## 概要
アクティブな[[タブ (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;
pointer-events: none;
}
```
アクティブな[[タブ (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;
pointer-events: none;
}
@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;
pointer-events: none;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```