画像描画テスト

本文画像のレンダリング検証用サンプル

2026年10月9日1,425자약 4분ツールサンプル画像

この記事は、public/img/ に配置した画像 (梅・蘭・竹・菊と 16:9 のカバー用 SVG) を使って、blog-hishaku の画像描画まわりをまとめて確認するためのテスト記事です。

梅・蘭・竹・菊は 640×960 前後の縦長 (約2:3) WEBP です。正方形画像の確認にはアバター SVG を使います。末尾のチェックリストと突き合わせて見た目を確認します。

基本の画像

![代替テキスト](パス) で本文に画像を置くと、<figure> でラップされて中央寄せ表示され、代替テキストがキャプションとして下に出ます。あわせて loading="lazy" と decoding="async" が付きます。

縦長・正方形画像は高さが画面の 70vh を超えないように縮小され、幅も比率に応じて自動で狭くなります。

代替テキストを省略すると、<figure> は作られるもののキャプションは出ません。

隣接する段落の縦長・正方形画像は、2枚以上連続すると横一列に並びます。行内の画像は高さが揃い、キャプションはそれぞれの画像の下に付きます。3枚以上でも同じ行に並びます (画面幅が狭いと1枚あたりの幅は小さくなります)。

1:1 の画像も、幅を指定せずに2枚連続で置くと横一列に並びます。

正方形の画像1

正方形の画像2

16:9 などの横長画像は本文幅いっぱいに表示され、縦長画像用の高さ制限は掛かりません。

属性構文を使えば画像に width などを直接付けられます。{width=320} を続けると 320px 幅で描画されます (スマホ幅では max-width: 100% に従い縮みます)。幅を明示した画像は高さ制限と横並びの対象外です。

画像をリンクで包むと、figure ラップは行われずリンク優先の挙動になります。カーソルも zoom-in ではなくリンク用になり、クリックでリンク先 (元画像) が開きます。

本文の画像 (リンク内・絵文字画像を除く) をクリックすると、<dialog> で全画面に拡大表示されます。Esc キー、閉じるアイコン、画像外のクリックで閉じます。上の画像を1枚クリックして確認してください。

画像には .cache/lqips.json から計算した 135deg のグラデーションが背景として敷かれます。まだキャッシュが無い場合は、次のコマンドで生成してから開いてください。

pnpm generate:lqips

生成済みなら、スクロールで画像が表示される直前に4色のかすりグラデーションが一瞬見えます。

frontmatter の cover に /img/plum.webp を指定しています。このパスは記事一覧のサムネイル、OGP 画像、JSON-LD の画像に使われるため、以下の点を確認します。