imagemap

2026年7月15日2026年7月19日

まずは、GEMINIに画像ファイルを与えて、HTMLとして、作ってもらう

※地図の画像を添付して下のプロンプトで、指示をGEMINIに与えました。プロンプトはかきのとおり。

添付した地図のポイントに、レスポンシブ運用を踏まえて、それぞれ、イメージマップのリンク（URLは http://exam.html）を設定してHTMLを記述してください、ページは画像の幅と高さに等しく表示するようにしてください。

いわゆるホームページの記述をそのまま作ってくれました、画像のURLやリンク先は、後に書き直せばOKな状態です。（これをSwell仕様にしないといけない）

GEMINIでHTMLとして記述したものをHTMLで必要な部分だけを抽出し、画像URLを変更してみた（自分で応用できるようにしてみた）

※上記は、途中までの内容だが・・・どうやら、不必要な部分がSWELLのボディーに干渉してうまく表示しないようだ

「この地図の画像とHTMLを、SWELLのブログで利用できるように、ブログパーツにしてください。」とそのままGEMINIに指示すると、作り直してくれた。

※不要な部分を整理して、そのままSwellのカスタムHTMLに貼り付けられるようにしてくれています。このページにそのまま載せたのが下のイメージマップです。リンク先は、さらに下の方にただのリストですが作ってみました。
HTMLは、a id=”” で作っただけです。

できたブログパーツのHTMLは下記の通り

<style>
/* SWELL・テーマ側に影響を与えないよう、クラス名に独自のプレフィックス（swell-map-）を付与しています */
.swell-map-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 画像と同じアスペクト比（縦横比）を維持してレスポンシブに表示するコンテナ */
.swell-map-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    /* 添付画像のオリジナル解像度（3744 × 2598）に等しい比率を設定 */
    aspect-ratio: 3744 / 2598;
    /* ↓↓↓ アップロードした画像のURLに差し替えてください ↓↓↓ */
    background-image: url('https://www.omniway.jp/wp-content/uploads/2026/07/map-scaled.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 各ポイントに被せる透明なリンクボタン */
.swell-map-link {
    position: absolute;
    display: block;
    text-decoration: none;
    /* 背景を完全に透明化（位置を確認したい場合は rgba(255, 0, 0, 0.4) などに一時変更可能） */
    background-color: rgba(255, 255, 255, 0); 
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時の視覚フィードバック */
.swell-map-link:hover {
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
}

/* 各エリアの位置調整 */
.swell-ln-one-health      { left: 51.5%; top: 21.5%; width: 18.0%; height: 6.5%; border-radius: 40px; }
.swell-ln-photo-booth     { left: 72.8%; top: 27.5%; width: 8.5%;  height: 6.5%; border-radius: 50%; }
.swell-ln-activity-center { left: 43.2%; top: 39.5%; width: 22.3%; height: 7.2%; border-radius: 35px; }
.swell-ln-marche-left     { left: 22.5%; top: 46.5%; width: 18.5%; height: 7.0%; border-radius: 35px; }
.swell-ln-marche-right    { left: 63.3%; top: 49.3%; width: 17.5%; height: 7.0%; border-radius: 35px; }
.swell-ln-stage-event     { left: 67.8%; top: 66.5%; width: 15.2%; height: 5.5%; border-radius: 35px; }
.swell-ln-atelier-marche  { left: 18.5%; top: 57.8%; width: 12.8%; height: 5.5%; border-radius: 35px; }
.swell-ln-kitchen-left    { left: 9.3%;  top: 42.8%; width: 12.2%; height: 5.5%; border-radius: 15px; }
.swell-ln-kitchen-right   { left: 85.0%; top: 65.0%; width: 12.5%; height: 5.5%; border-radius: 15px; }
.swell-ln-activity-left   { left: 0.8%;  top: 57.5%; width: 15.5%; height: 5.5%; border-radius: 35px; }
</style>

<div class="swell-map-container">
    <div class="swell-map-wrapper">
        <!-- リンク先 (href) を必要に応じて変更してください -->
        <a href="#link1" class="swell-map-link swell-ln-one-health" title="ワンヘルスエリア"></a>
        <a href="#link2" class="swell-map-link swell-ln-photo-booth" title="フォトブース"></a>
        <a href="#link3" class="swell-map-link swell-ln-activity-center" title="アクティビティエリア（中央）"></a>
        <a href="#link4" class="swell-map-link swell-ln-marche-left" title="マルシェエリア（左）"></a>
        <a href="#link5" class="swell-map-link swell-ln-marche-right" title="マルシェエリア（右）"></a>
        <a href="#link6" class="swell-map-link swell-ln-stage-event" title="ステージイベント"></a>
        <a href="#link7" class="swell-map-link swell-ln-atelier-marche" title="アトリエマルシェ"></a>
        <a href="#link8" class="swell-map-link swell-ln-kitchen-left" title="キッチンカー（左）"></a>
        <a href="#link9" class="swell-map-link swell-ln-kitchen-right" title="キッチンカー（右）"></a>
        <a href="#link10" class="swell-map-link swell-ln-activity-left" title="アクティビティエリア（左）"></a>
    </div>
</div>

上のイメージまっpのリンク先として作ったリストです

ワンヘルスエリア

フォトブース

アクティビティエリア（中央）

マルシェエリア（左)

マルシェエリア（右)

ステージイベント

アトリエマルシェ

キッチンカー（左）

キッチンカー（右）

アクティビティエリア（左）

<a id="link1">ワンヘルスエリア</a><br><br>
<a id="link2">フォトブース</a><br><br>
<a id="link3">アクティビティエリア（中央）</a><br><br>
<a id="link4">マルシェエリア（左)</a><br><br>
<a id="link5">マルシェエリア（右)</a><br><br>
<a id="link6">ステージイベント</a><br><br>
<a id="link7">アトリエマルシェ</a><br><br>
<a id="link8">キッチンカー（左）</a><br><br>
<a id="link9">キッチンカー（右）</a><br><br>
<a id="link10">アクティビティエリア（左）</a><br><br>