画像拡大表示

レンダリング幅より広い画像に、自動でフルスクリーン拡大ボタンを追加します。

画像の本来の幅がレンダリング幅（デバイスピクセル比を考慮）より大きい場合、隅に小さな拡大ボタンが表示され、操作可能であることを示すうっすらとした枠線が画像に付きます。隅のボタンだけでなく画像のどこをクリックしてもフルスクリーンダイアログで開きます。

横幅の広い画像 — ボタンが表示される

以下の画像は 2400 px 幅で、一般的なコンテンツカラムより大きいサイズです。ブラウザがレンダリングサイズを計測すると、拡大ボタンが表示されます。

小さな画像 — ボタンは表示されない

この画像は 300 px 幅で、コンテンツカラムに収まります。画像がコンテナより大きくないため、拡大ボタンは非表示のままです。

拡大を無効化する（オプトアウト）

幅が大きい画像でも、特定の画像だけ拡大ボタンを無効にしたい場合は、Markdown のタイトル属性に "no-enlarge" を指定します。title 属性はレンダリング後の <img> からも削除されるため、ブラウザのツールチップには表示されません。

![alt text](./image.png "no-enlarge")

動作の仕組み

この機能は 2 つの部分で構成されています。

• ビルド時 — rehype プラグインが、段落内で単独の <img> を <figure class="zd-enlargeable"> でラップし、非表示の <button class="zd-enlarge-btn"> を注入します。インラインテキストと混在する画像はラップされません。
• 実行時 — Preact アイランド（ImageEnlarge）が ResizeObserver を使用して naturalWidth と clientWidth × devicePixelRatio を比較し、ボタンの hidden 属性を切り替えます。hidden が外れている間は画像全体がクリック対象となり、ホバー時のフィードバックも表示されるため、画像のどこをクリックしても <dialog> で開きます。ESC キー、ビューポート右上の閉じるボタン、または画像の外側をクリックすると閉じられます。

設定

画像拡大表示は src/config/settings.ts で有効にします。

export const settings = {
  imageEnlarge: true,
};

imageEnlarge: false に設定すると、機能全体を無効にできます。

オーバーレイ色のカスタマイズ

拡大ボタンとダイアログの閉じるボタンは、外観を制御するトークンペアを共有しています。

• image-overlay-bg — アイコンの背後に 80% の不透明度で描画される背景レイヤーの色。
• image-overlay-fg — 背景の上に 100% の不透明度で描画されるアイコンの色。

適切なオーバーレイ色はコンテンツ画像に依存し、サイトによって異なります。デフォルト値はほとんどのケースで機能しますが、3 層カラー戦略（Color を参照）に従い、任意のカラースキームで上書きできます。

// src/config/color-schemes.ts
"My Scheme": {
  // ...palette, background, foreground, ...
  semantic: {
    imageOverlayBg: 0,    // palette index — deep surface
    imageOverlayFg: 11,   // palette index — light text
    // or a direct color string: imageOverlayBg: "#222"
  },
},

Color Tweak Panel（有効時）を使えば、コードを編集せずにこれらのトークンをライブで調整できます。