## 概要
アクティブな[[タブ (Obsidian)|タブ]]に画像を表示したい。
`イメージ`
![[Pasted image 20250412191342.png|frame]]
*右下の[[Minerva]]キャラがそれにあたる*
## ソリューション
[[CSS]]で設定します。
```css
.workspace-split.mod-root .workspace-leaf.mod-active:after {
content: "";
position: absolute;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-size: 100px;
left: calc(100% - 128px);
right: 0;
bottom: 0;
height: 168px;
animation: fadeIn 0.5s ease;
}
```
> [!caution]
> 画像の表示されている領域はクリック判定がありません。操作性を損なわないよう画像の大きさや表示位置を設定してください。
アクティブな[[タブ (Obsidian)|タブ]]が変更されて画像の表示位置が変わったとき、アニメーションさせたい場合は以下の[[CSS]]を使います。0.5秒のフェードアニメーションするようにしています。
```css
.workspace-split.mod-root .workspace-leaf.mod-active:after {
content: "";
position: absolute;
background-image: url(画像URL);
background-repeat: no-repeat;
background-size: 100px;
left: calc(100% - 128px);
right: 0;
bottom: 0;
height: 168px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.workspace-split.mod-root .workspace-leaf:not(.mod-active):after {
content: "";
position: absolute;
background-image: url(画像URL);
background-repeat: no-repeat;
background-size: 100px;
left: calc(100% - 128px);
right: 0;
bottom: 0;
height: 168px;
animation: fadeOut 0.3s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```