## ステータス
検討中（実験中）……却下の見通し
## 経緯
検討したが、うまくいかなかったもの：
- [`<figcaption>`タグの使用。](#figcaptionタグ)
検討して候補に残ったもの：
- [image-captionタグの利用](#image-caption+CSS)
- ノートに`<span class="image-caption"> ▲ xxxxxxx</span>`と書き、CSSで装飾する。
- [強調タグ（`*`）の利用](#強調タグ)
## 提案内容
- [[Obsidian Publish]] で画像にキャプションを入れる場合、画像の直後に強調タグ（`*`）を用いる。
- [[Obsidian Publish]] のキャプションはCSSで装飾する。
- ローカル [[Obsidian]] のキャプションはCSSで装飾しない（`*`の修飾スタイルのまま）
see [記述例](#強調タグ)
- figcaptionタグ を選ばなかったのは、 [[Obsidian Publish]] でHTML化されないため。
- image-caption を選ばなかったのは、複雑さが増すため。
## 承諾した場合の結果
### メリット
- 標準的なマークダウンだけで記述できるので、万が一、他のプラットフォームに移行した場合も互換性が保たれる。
- カスタマイズの範囲を`publish.css`に限定することで、保守性と再利用性が向上する。
### デメリット
- [[Obsidian Publish]] のHTMLレンダリングの方法が変わったとき、CSSの再調整が必要となり、メンテナンスの手間が増加する可能性がある。
- ローカル環境で [[Obsidian]] 使用時、キャプションの表示が標準のマークダウン修飾に限られ、Publishでの装飾された表示と一貫性がなく、体験の質が悪い。
## 以下、参考情報
### 強調タグ
マークダウンの記述例：
```
*▲ Font AwasomeからSVGファイルをローカルにダウンロード*
```
publish.cssの記述：
```css
/* 画像のスタイルを設定する */
img {
max-width: 100%;
height: auto;
display: block; /* 画像をブロック要素として扱う */
}
/* キャプションのスタイル */
p img ~ em {
display: block; /* キャプションをブロック要素として扱う */
/* font-size: 0.875rem; フォントサイズを調整 */
font-size: var(--fontsizetiny); /* フォントサイズを調整 */
color: var(--text-faint); /* フォントの色を調整 */
margin-top: -1.5rem; /* 画像キャプション間のマージン、使用テーマに依存 */
margin-bottom: 1rem; /* 画像とキャプションの間のマージンを調整 */
}
```
設定の基本的なコンセプトは[📗Reading viewやObsidian Publishで画像の下に注釈を載せたい - Minerva](https://minerva.mamansoft.net/%F0%9F%93%97Obsidian%E9%80%86%E5%BC%95%E3%81%8D%E3%83%AC%E3%82%B7%E3%83%94/%F0%9F%93%97Reading+view%E3%82%84Obsidian+Publish%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E4%B8%8B%E3%81%AB%E6%B3%A8%E9%87%88%E3%82%92%E8%BC%89%E3%81%9B%E3%81%9F%E3%81%84)を参考にした。
> [!note]- ローカルノートの装飾について
> CSSスニペットで実現できないかとおもってかなり粘ったがダメだった。
> HTMLは下記のようになっており、キャプション部分だけを指定する方法を見つけられなかった。
> (2024-01-10 12:49)
>
> ```
> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/masatora_bd5/20240106/20240106175352.png" width="450" alt="SS 2024-01-06 10.39.05.png" contenteditable="false">
> <div class="cm-line"><img class="cm-widgetBuffer" aria-hidden="true"><span contenteditable="false"></span><img class="cm-widgetBuffer" aria-hidden="true"><span class="cm-em">▲ ノートのプロパティを利用して作成日と更新日を表示</span><img class="cm-widgetBuffer" aria-hidden="true"><span contenteditable="false"></span><img class="cm-widgetBuffer" aria-hidden="true"></div>
> ```
### image-caption + CSS
- 原則としてマークダウンの画像挿入をつかう `[imgname](imgurl)`
- キャプションはHTMLで書く `<span class="image-caption"> ▲ xxxxxx</span>`
- キャプションのスタイルはCSSで定義する
- ローカルのCSSでも対応できるようにスニペットにも書く
マークダウンの記述例：
```
<span class="image-caption"> ▲ Font AwasomeからSVGファイルをローカルにダウンロード</span>
```
publish.css の記述：
```css
/* 画像のスタイルを設定する */
img {
max-width: 100%;
height: auto;
display: block; /* 画像をブロック要素として扱う */
}
/* キャプションのスタイル */
.image-caption {
display: block; /* キャプションをブロック要素として扱う */
font-size: 0.875rem; /* フォントサイズを調整 */
color: var(--text-faint); /* フォントの色を調整 */
margin-top: -1rem; /* 画像キャプション間のマージン、使用テーマに依存 */
margin-bottom: 1rem; /* 画像とキャプションの間のマージンを調整 */
font-style: italic; /* テキストをイタリックにする */
}
```
cssスニペットの記述：
```css
/* 画像のスタイルを設定する */
img {
max-width: 100%;
height: auto;
display: block; /* 画像をブロック要素として扱う */
}
/* キャプションのスタイル */
.image-caption {
display: block; /* キャプションをブロック要素として扱う */
font-size: 0.875rem; /* フォントサイズを調整 */
color: var(--text-faint); /* フォントの色を調整 */
margin-top: -1.5rem; /* 画像キャプション間のマージン、使用テーマに依存 */
margin-bottom: 1rem; /* 画像とキャプションの間のマージンを調整 */
font-style: italic; /* テキストをイタリックにする */
}
```
### figcaptionタグ
figcaption はこう書こうとおもったが、 [[Obsidian Publish]] ではタグがつかず、CSSで捕捉できなかった。
```
`<figcaption>ここにキャプションを入力</figcaption>
```
あるいは
```
<figure>
<figcaption>ここにキャプションを入力</figcaption>
</figure>
```
も考えたが、[[Obsidian Publish]] でどうHTML化されるかわからず（未検証）、書く量も増える。将来的にもHTLM形式が変わるかも知れず得策ではないと判断した。