2022/07/22 2022/09/13

【HTML+CSS+jQuery】iPhoneのSafariとChromeもOK！WordPressでクリッカブルマップをレスポンシブ対応に

WordPressでクリッカブルマップをレスポンシブ対応にする方法

日本地図
日本地図

クリッカブルマップは上記のような日本地図の地方ごとにリンクを設置したいときにめちゃくちゃ便利なもの。

便利なんだけど、レスポンシブ対応させるのに結構手間取った。
特にAndroidでは動くのにiPhoneでは動作しない状態に陥ってしまった。

HTML Imagemap Generator

https://labs.d-s-b.jp/ImagemapGenerator/

HTML Imagemap Generator
HTML Imagemap Generator

こちらのサイトで画像をドラック＆ドロップして、右上のどれかを選択し、リンクを設定したいエリアを区切る。

細かくエリアを区切りたいときは多角形を使用。多角形を描く場合は終わる時にescボタンで終了できる。

エリアを区切るごとに右側にコードが生成されるのでそれをHTMLにコピペ。

HTML

  <div class="mapContainer">
    <figure class="japan_map">
      <img src="../wp-content/themes/deli-sapo/image/japan_map.png" usemap="#ImageMap" alt="" />
      <map name="ImageMap">
        <area shape="poly" coords="735,97,712,198,839,199,864,97,864,97"
          href="http://yummy.staba.jp/deli-sapo/store_hokkaido/ " alt="" />
        <area shape="poly" coords="705,219,682,310,734,309,725,339,779,341,808,219,808,219" href="#" alt="" />
        <area shape="poly"
          coords="638,340,631,372,684,370,675,399,639,398,621,463,662,462,669,429,715,430,709,453,747,453,776,340,776,340"
          href="#" alt="" />
        <area shape="poly"
          coords="582,292,570,338,519,341,514,369,562,370,557,398,567,401,554,460,621,460,636,399,672,401,681,370,633,370,636,342,723,341,729,310,616,311,619,292,619,292"
          href="#" alt="" />
        <area shape="poly"
          coords="450,340,438,399,471,399,453,469,551,470,565,401,553,398,561,369,511,368,520,339,520,339" href="#"
          alt="" />
        <area shape="poly" coords="317,341,302,399,437,401,449,339,449,339" href="#" alt="" />
        <area shape="poly" coords="306,420,290,485,425,488,439,420,439,420" href="#" alt="" />
        <area shape="poly" coords="144,345,126,423,161,418,167,398,197,404,176,490,257,489,293,345,310,341" href="#"
          alt="" />
        <area shape="poly" coords="74,480,57,551,90,551,108,480,111,480" href="#" alt="" />
      </map>
    </figure>
  </div>

CSS

.japan_map {
  width: 100%;
  height: auto;
}

.japan_map img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: baseline;
}

widthとheightを指定しないとうまく動作しないみたいなので注意。

レスポンシブ対応

調べると「image-map-resizer」と「jQuery RWD Image Maps」の２通りやり方があるが、結論は「jQuery RWD Image Maps」を使用。

jQuery非依存で軽量の「image-map-resizer」の使用を進める人が多かったから最初は「image-map-resizer」を使って実装してたんだが、iPhoneで動作しなかった。

「jQuery RWD Image Maps」は最初エリアの範囲がずれてしまってレスポンシブ全然ならんやんけ！と思っていたが、CDNで「jQuery RWD Image Maps」を読み込む際headタグ内ではなくbody終了タグ直前に読み込むとちゃんと動作した。

今回は他の人がコーディングしたWordPressサイトの追加ページ作成だったから、jQueryがheadタグ内に記述してあってもあまりイジくりたくなかったから放置していたのだが…headタグで読み込んだらうまく動作しないとは身を持って学んだ。

職業訓練校でJSはbody終了タグ直前に読み込むと習っていたが、まさに！って感じでした。

image-map-resizer

<script src="//cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js" integrity="sha512-sXgF3JImNbesKnmCuR5AE5WPQo6Z8xJMYRvDknGyc0eTWL62pqgEG4Auk9d0VnstzyhRNzPak8AyemFJq7a6/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  imageMapResize();
</script>

CDNで読み込んでます。

下記のリンクからCDNを取得できます。

https://cdnjs.com/libraries/image-map-resizer

jQuery RWD Image Maps

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script>
  $(function() {
    $('img[usemap]').rwdImageMaps();
  });
</script>

CDNで読み込んでます。

下記のリンクからCDNを取得できます。

https://cdnjs.com/libraries/jQuery-rwdImageMaps

<script>
 $('map').imageMapResize();
</script>

こちらでも動作するみたいなので、お好みの方を選択。

READ MORE IN BLOGS