## 概要
以下のように画像の下に注釈をいい感じに載せたい。ただし、[[HTML]]ではなく[[Markdown]]だけで表現し、[[Obsidian]]の記法([[内部リンク]]など)も使いたい。
![[Pasted image 20230104181312.png|frame]]
## ソリューション
以下2つのルールを定め、それらに[[CSS]]を効かせることで実現します。
1. 注釈を入れたい画像にはalt[[属性 (HTML)|属性]]を指定する
2. 注釈は、画像を挿入した行の次の行にemタグで挿入する
たとえば、alt[[属性 (HTML)|属性]]を`example-image`、注釈を`例の画像`としたい場合を考えます。
### [[Markdown]]
[[Markdown]]は以下のように記載します。
```markdown
![[image.png|example-image]]
*例の画像*
```
これは[[Obsidian Publish]]の[[HTML]]では以下のように変換されます。( #2023/01/04 現在の場合)
```html
<div>
<p>
<span alt="example-image" src="image.png" class="internal-embed image-embed is-loaded">
<img alt="example-image" src="https..中略..image.png" />
</span>
<br>
<em>例の画像</em>
</p>
</div>
```
### [[CSS]]
上記`em`タグ内にかかるような[[CSS]]を記述します。
```css
span[alt="example-image"] ~ em {
/* 中央寄せ */
display: flex;
justify-content: center;
/* 横幅が足りない場合、複数のDOMが含まれるとそれぞれが改行されるのを防ぐため */
flex-wrap: wrap;
/* 利用しているCSSによる. 画像のすぐ下に配置されるよう要調整 */
margin-top: -2.75rem;
/* 個人的にオススメなサイズ */
font-size: 0.875rem;
}
```
これは『`alt`属性が`example-image`である`span`タグと同じ階層にあり、後方に登場する`em`タグに対してかかるスタイル』となります。つまり、`<em>例の画像</em>`が対象になります。[[内部リンク]]など[[Obsidian]]の記法を使っても、`*`と`*`で囲まれていれば、全体が`em`タグで囲まれるため期待通り動きます。