## 概要
アクティブなMarkdownエディタの[[ペイン (Obsidian)|ペイン]]に画像を表示したい。
`イメージ`
![[Pasted image 20220917221637.png|frame]]
## ソリューション
[[CSS]]で設定します。
```css
.workspace-split.mod-root .workspace-leaf.mod-active:after {
content: "";
position: absolute;
background-repeat: no-repeat;
/* 以下は好みの値を設定する */
background-image: url(画像のURL);
background-size: 300px;
filter: opacity(0.5);
top: -50px;
left: calc(100% - 250px);
right: 0;
bottom: 0;
height: 350px;
}
```
> [!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: 300px;
filter: opacity(0.5);
top: -50px;
left: calc(100% - 250px);
right: 0;
bottom: 0;
height: 350px;
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: 300px;
filter: opacity(0.5);
top: -50px;
left: calc(100% - 250px);
right: 0;
bottom: 0;
height: 350px;
animation: fadeOut 0.3s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```