当ミュージアムのトップページにも使用されている「イメージマップ」はとても便利なものです。大きさが固定されているページでしたら問題ないですが、レスポンシブ対応の場合画面の大きさの変化により、画像と座標が合わなくなります。ではどのように組み込んだのでしょうか？
※この方法は当ミュージアムが利用しているcocoonというテーマを使用していることを前提としています。この方法よりいい方法もあるかもしれません。参考程度にご覧ください。
手順1 イメージマップのコードを作成します
まずイメージマップのコードを作成します。かなり昔から有名な下記のサイトを利用すると簡単に作成できます♪
手順2 作成したコードを固定ページか投稿ページに記入します
当ミュージアムのトップページの場合は以下のように記入されています。
<!-- マップのイメージを表示します -->
<figure class="wp-block-image size-full is-style-default"><img class="wp-image-150" src="https://mus.p56.biz/wp-content/uploads/3d82f72ee4614b38e7b1812ed0e33e4a-1.png" alt="" usemap="#ImageMap"></figure>
<!-- イメージマップのコードをペーストします。 -->
<map name="ImageMap">
<area shape="rect" coords="177,394,404,501" href="%e7%b7%8f%e5%90%88%e6%a1%88%e5%86%85/" alt="総合案内">
<area shape="rect" coords="773,169,1007,401" href="category/photo/" alt="写真展示室">
<area shape="rect" coords="1499,173,1723,404" href="category/anime/" alt="動画展示室">
<area shape="rect" coords="2097,331,2332,560" href="category/know-how/" alt="ノウハウ収集室">
<area shape="rect" coords="2107,650,2342,878" href="category/area-info/" alt="地域情報室">
<area shape="rect" coords="1493,794,1733,1032" href="category/collec/" alt="コレクション室">
<area shape="rect" coords="755,786,991,1015" href="category/contents/" alt="コンテンツ室">
<area shape="rect" coords="193,742,444,874" href="category/ms/" alt="ミュージアムショップ">
</map>手順3 イメージマップのレスポンシブ対応jQueryプラグインを入れます
イメージマップをレスポンシブに対応するために下記のjQueryをダウンロードして、「jquery.rwdImageMaps.js」をワードプレスが入っているフォルダの一番上の部分に入れます。index.phpと同列に置きます。
手順4 Cocoon Child: head-insert.phpにコードを記入します
手順3でいれたjQueryプラグインを読み込ませるためのコードをヘッダー部分に記入します。
<script src="jquery.rwdImageMaps.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
以上で完了です。
