## 概要 以下のように画像の下に注釈をいい感じに載せたい。ただし、[[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`タグで囲まれるため期待通り動きます。