## ステータス
検討中（実験中）
## 経緯
[[🗄️MXT0003 画像のキャプションは強調(*)とCSSで実現する]]ことを提案して検証していたが、キャプションがほしいのは画像の直後とは限らないことがわかってきた。
そうであれば、独自クラス、image-captionを採用するほうが合理的ではないか。
検討したが、うまくいかなかったもの：
- [`<figcaption>`タグの使用。](#figcaptionタグ)
検討して候補に残ったもの：
- [image-captionタグの利用](#image-caption+CSS)
- ノートに`<span class="image-caption"> ▲ xxxxxxx</span>`と書き、CSSで装飾する。
- [強調タグ（`*`）の利用](#強調タグ)
## 提案内容
`mxt-caption`クラスを採用する。
ノートに`<span class="mxt-caption">▲ xxxxxxx</span>`と書き、CSSで装飾する。
> [!note] クラス名がかぶらないよう、image-caption から mxt-caption に変更
## 承諾した場合の結果
### メリット
- 画像の直後だけでなく、任意の箇所にキャプションを挿入できる。
- [[Obsidian Publish]] のHTMLレンダリング方法が変わっても、CSSの再調整などが不要な可能性が高く、メンテナンスコストを抑えられる。
- ローカル環境で [[Obsidian]] ノートでも、 [[Obsidian Publish]] の表示と一貫性があり、体験の質がよい。
### デメリット
- 標準的なマークダウンだけでは記述できないので、他のプラットフォームに移行した場合の互換性には懸念がのこる。
- `publish.css`とローカルのCSSスニペットの両方をメンテする必要があり、めんどうくさいし、忘れそう。
## 以下、参考情報
### mxt-caption + CSS
- キャプションはHTMLで書く `<span class="mtx-caption">▲ xxxxxx</span>`
- キャプションのスタイルはCSSで定義する
- ローカルのCSSでも対応できるようにスニペットにも書く
マークダウンの記述例：
```
<span class="mtx-caption">▲ Font AwasomeからSVGファイルをローカルにダウンロード</span>
```
publish.css の記述：
```css
/* 画像のスタイルを設定する */
img {
max-width: 100%;
height: auto;
display: block; /* 画像をブロック要素として扱う */
}
/* キャプションのスタイル */
.mxt-caption {
display: block; /* キャプションをインラインブロック要素として扱う */
font-size: 0.875rem; /* フォントサイズを調整 */
color: var(--text-faint); /* フォントの色を調整 */
margin-top: -2rem; /* マージン、使用テーマに依存 */
margin-bottom: 1rem; /* マージンを調整 */
font-style: italic; /* テキストをイタリックにする */
```
cssスニペットの記述：
```css
/* 画像のスタイルを設定する */
img {
max-width: 100%;
height: auto;
display: block; /* 画像をブロック要素として扱う */
}
/* キャプションのスタイル */
.mxt-caption {
display: block; /* キャプションをインラインブロック要素として扱う */
font-size: 0.875rem; /* フォントサイズを調整 */
color: var(--text-faint); /* フォントの色を調整 */
margin-top: -2rem; /* マージン、使用テーマに依存 */
margin-bottom: 1rem; /* マージンを調整 */
font-style: italic; /* テキストをイタリックにする */
}
```