ブログの画像対応
そろそろ記事に画像を表示する方法を考えないといけないですね……。この自作ブログの記事は Obsidian で書いているので、その画像管理方式と互換性を保ったまま、自作ブログにも画像を表示したいです。
まずは Markdown の画像記法  を考えます。この記法に対しては、alt 属性に「夕方に撮影した東京駅の丸の内駅舎」が設定された <img> タグを出力します。こんな感じに： 
| 100 の部分は画像のサイズ指定です。Obsidian の独自記法で、alt 文字列の後ろに | で区切って画像サイズを書くことができます。整数を 1 つだけ指定すると幅を指定したことになり、高さは元のアスペクト比を保って自動的に変わります。高さも明示的に指定するには 幅x高さ というように x で区切って 2 つの整数を書きます。この機能は Obsidian Release v0.9.4 - Announcements - Obsidian Forum で追加されたようです。
Obsidian では画像ファイルが（保管庫ディレクトリ以下の）どこに存在してもファイル名だけで認識してくれるようです。しかし HTML にはそういう便利な機能はありません。今のところ、記事に貼る画像は /ublog/images ディレクトリにまとめて置くことにしようと思います。ということで foo.jpg というファイル名を src 属性に設定する際には、ディレクトリ名を付加して src="/ublog/images/foo.jpg" とします。
それから、もし alt 属性が指定されていない場合はファイル名の拡張子を除いた文字列を alt 属性として設定することにしました。画像の管理の面からも、ファイル名には内容を表す名前をちゃんと付けるクセを付けたいなと思います。
ちなみに、alt 属性に書くべき内容の考え方は HTML Standard "4.8.4.4.1 General guidelines" で説明されています。これによると、ページに画像があることには触れず、ページの内容を電話で伝える場面を考えると良い出発点となるようです。
さて、Obsidian には Wikilink 記法による画像貼り付け機能もあります。同じ画像をこちらの記法で貼る場合は ![[夕方の東京駅丸の内駅舎.jpg | 100]] と書きます。
Wikilink 記法による画像貼り付けはこのような表示になります： 
Obsidian の Wikilink 記法はもともと ファイル名 | 表示名 という記法になっています。| 表示名 はオプションで、省略するとファイル名がそのままプレビューに表示されます。表示名を指定するとファイル名の代わりに表示名がプレビューに表示されます。画像の場合は「表示名」を alt 属性として解釈するのが順当かなと思いますので、このブログの実装ではそのように解釈しています。
表示名の代わりに画像サイズを指定することができます。言い換えると alt 属性と画像サイズのどちらかしか指定できないということになります。Markdown 記法では両方を指定できますが Wikilink 記法では片方しか指定できません。ちょっと残念な感じがします。ブログで使う記事では主に Markdown 記法を使った方がよさそうです。Markdown 記法にしておくと余所のブログシステムに記事を流用する際にも互換性が高いかもれませんし（画像リンクはどうせ変える必要がありそうですが）。
キャプション付き画像
ところで <img> タグはインライン要素ですので、先の例のようにテキストと同一行に表示されます。画像を中央に寄せ、さらにキャプションを付けたいときがあります。何とか対応したいです。
まず画像を中央に寄せる方法ですが、<img> タグの外側を囲んでいるタグに text-align: center を指定することで実現できます。この目的では <p><img ...></p> のように、Markdown の標準的な段落タグ <p> を使うのでも大丈夫です。しかし、キャプションを付けることを考えると <figure> を使いたいです。
そこで、画像だけが含まれる段落を特別視し、そのような段落は <p> ではなく <figure> を生成することにしました。例えば、次のような Markdown コードでは画像を <figure> が囲むようになります。
ほげほげほげ
空行を空けて別の文章
これで中央寄せは実現できます。次はキャプションです。これは Markdown 記法のタイトル機能を活用することにしました。実はブログ実装をするまで知らなかったのですが、Markdown 記法では <img> タグの title 属性を指定する機能があります（例： CommonMark Spec "6.4 Images Example 571"）。上記のコードでは <img title="caption" ..> となるわけです。
CommonMark の仕様では title 属性を指定する機能なのですが、このブログでは画像のキャプション <figcaption> を指定する機能として利用することにしました。例えば  と（段落を分けて）書くと次のように表示されます。
Obsidian のプレビューでは画像はインライン表示のままですが、自作ブログエンジンにより HTML に変換するとキャプション付きの独立した画像となります。
この記事を参照しているブログ内記事はありません。