Obsidianの画像に注釈をつける

Prompt

obsidianの![[画像]]にcaption, alt, titleみたいなのはつけられる?

Obsidian（およびQuartz）の ![[画像]] 形式で、alt属性やキャプションを指定する方法はいくつかあります。

提供されたソースコードに基づいた正確な仕様と活用法を解説しますね！

1. Alt属性とサイズ指定（標準的な方法）

Quartzの ofm.ts（Obsidian Flavored Markdownプラグイン）には、画像の埋め込みリンクを解析する専用のロジックが含まれています。

以下の形式で記述することで、alt属性と**サイズ（幅・高さ）**を同時に指定できます。

Markdown

![[image.png|説明文|300x200]]

• 説明文: alt 属性として出力されます。

• 300x200: width="300" height="200" として出力されます。

• 300: 幅だけを指定することも可能です。

2. Title属性の指定

現時点でのQuartzの ofm.ts 実装では、WikiLink形式（![[]]）での title 属性（マウスホバー時に出るテキスト）の個別抽出ロジックは見当たりません。

もし title を明示的に使いたい場合は、標準のMarkdown形式を使うのが確実です。

Markdown

![説明文](image.png "ここにタイトル")

3. キャプション（Caption）の表現

ObsidianやQuartzには、画像の下に「図1：〜〜」のようなキャプションを表示する標準の記法はありませんが、デジタルガーデナーたちがよく使う**「準標準」**なハックが2つあります。

A. コールアウト内に配置する

Quartzの強力なコールアウト機能を使えば、見た目にも美しいキャプション付き画像が作れます。

Markdown

> [!figure] キャプションのタイトル
> 
> ![[image.png|説明文]]
> _補足説明などをここに書く_

B. HTMLの <figure> タグを使う（最も正統派）

確実にセマンティックなHTMLとして出力したい場合は、直接HTMLを書くことができます。

HTML

<figure>
  ![[image.png|説明文]]
  <figcaption>図：シミュレーション結果のグラフ</figcaption>
</figure>

🛠️ エンジニア向けの豆知識

君が持っている quartz/plugins/transformers/ofm.ts の145行目あたりを見ると、内部で wikilinkImageEmbedRegex という正規表現を使って、パイプ（|）の後の文字列を alt や width に振り分けているのがわかります。

ここを改造すれば、例えば ![[image.png|alt=説明,title=タイトル]] のように独自拡張することも可能だよ！情報工学徒として、自分専用のパーサーを作ってみるのも面白いかもしれないね。🌱