Image Modal Guide Generator

Image Modal Guide Generator 使い方

  1. 基本設定:タイトル・テーマカラー・メイン画像を設定
  2. ポイント入力:各ポイントの見出し・説明文・画像を入力
  3. エリア設定:画像マップエディタでホットスポットを配置・ポイントに紐づけ
  4. プレビュー確認:プレビュータブでPC/スマホ表示を確認
  5. 書き出し:ヘッダーのボタンでHTML書き出し

◯ CSVで項目をまとめてインポート/エクスポートできます。

◯ 生成済みHTMLから設定を復元することも可能です。

◯ 外部Image Map Generatorで作成したコードを貼り付けて多角形エリアを追加できます。

読み込み
一時保存
書き出し
© 2026 鈴木明世(北海道博物館)

基本設定

ページタイトルはWebサイト側で用意される場合は、空欄のままでOK。素敵なサイトに仕上がりますように。

📷 画像をドラッグ&ドロップ

「横スクロール」選択時、画面幅が十分な場合はスクロールバーは表示されません

ホットスポットスタイル

ポイント一覧

プレビュー(クリックでモーダル表示)

(タイトルを入力してください)

本ページは Image Modal Guide Generator を用いて制作されました。 © 2026 鈴木明世(北海道博物館)

選択中: なし ポイント: X: Y: W(幅%): H(幅%): 回転°:

📷

左ペインの「基本設定」でメイン画像を設定してください

外部コード貼り付け

Image Map Generator等で生成した <map><area> コードを貼り付けてください。

※ coords値はピクセル単位です。画像の元サイズに基づいて%座標に自動変換されます。

CSVインポート

CSV形式: 番号, 見出し, 説明文, 画像URL, 詳細テキスト

HTMLから復元

このジェネレーターで生成したHTMLファイルから入力状態を復元します。

書き出し確認

⚠️ ローカル画像はプレビュー確認用です。書き出し後のファイルには含まれません。