IT

クリッカブルマップが動作しない

2025年現在、クリッカブルマップのレスポンシブ（スマホ）が動作しません。2022年の2月には、確かに動作していたはずです（朝会でデモした記録が残ってるので）。

テスト画像を使って再検証してみましょう。

あ

「クリッカブルマップ」は、英語では「イメージマップ」といいます。イメージマップの無料ジェネレーターは複数あります。どれでも好きなツールを使って、まずはHTMLタグを作ります。

生成したタグはこちら。

<img src="https://negishicho.com/wp-content/uploads/2025/02/400x300-1.png" usemap="#ImageMap">
<map name="ImageMap">
  <area shape="rect" coords="0,0,100,100" href="#map1" alt="map1" />
  <area shape="circle" coords="225,175,75" href="#map2" alt="map2" />
  <area shape="rect" coords="350,150,400,300" href="#map3" alt="map3" />
</map>

クリック可能領域に色を付け、わかりやすくしてみました。

map1 map2 map3

map1
正方形

map2
円形

map3
長方形

座標のコード順は、下記のように決まっています。

<img src="画像パス.拡張子" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="circle" coords="中心点X,中心点Y,半径" href="#" alt="円" />
  <area shape="poly" coords="0,0,0,0,0,0,..." href="#" alt="多角形" />
  <area shape="rect" coords="始点X,始点Y,終点X,終点Y" href="#" alt="四角" />
</map>

ImageMapのコードは合っています。PC版では正しく動作しますので。

問題は、レスポンシブ対応用の「imageMapResizer」です。

<script src="https://unpkg.com/image-map-resizer@1.0.10/js/imageMapResizer.min.js"></script>
<script>imageMapResize();</script>

①minify形式ではないjsコードを参照する（「.min」を削除する）。②footer.phpにコードを移動する、等を試してみましたがダメでした。

「Image Map Resizer」のソースを見ると、

/*! Image Map Resizer
 *  Desc: Resize HTML imageMap to scaled image.
 *  Copyright: (c) 2014-15 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */
/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10
 *  Desc: Resize HTML imageMap to scaled image.
 *  Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */

日付が「2019-04-10（6年前）」となっています。
作者のDavid J. BradshawさんのGitHubをチェックすると…
「v1.0.10」のまま、2019年のリリース以来、一度も更新されていません。

ただ、コンソールにエラーが出ないので、コーディングに問題があるわけでもなさそうです。

解決方法

CDNサーバーを変える

「https://unpkg.com/image-map-resizer@1.0.10/js/imageMapResizer.min.js」と記述している人は、「https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js」に参照元を変更してください。

嘘です全然関係ありませんでしたm(__)m

スクリプト読み込み位置を見直す
①「<script src=”…/imageMapResizer.min.js”></script>」タグは画面上部で読み込む。
②「<script>imageMapResize();</script>」タグは画面下部に置く。
と、別々に離して設置してみてください。

※並べて書いても基本的には動作しますが、スクリプト参照は<head>内、コード実行は</body>タグ直前で行うのが理想的です。

余計なタグ、属性があれば削除する！

皆さんマップ画像を追加するとき、画像ブロックを挿入→画像をアップロード→右クリでHTMLとして編集→「usemap=”イメージマップのID”」を挿入→そのままでビジュアル編集に戻ろうとするとエラーになるため、カスタムHTMLに変換、の手順を通ったと思います。

そのとき自動的に付加された<figure>タグのclassが、画像の表示サイズに影響している場合があります。wp-block-imageやsize-fullなど、いかにも怪しいですよね。

<img>タグを囲む<figure>タグ、<figcaption>タグは不要です。<img>タグに付く「wp-image-連番」クラスは、画像追加時に自動的に付加されるもので、使われていません。あってもなくても良いものは、コードをスッキリさせるために削りましょう。

※私はこれで直りました！

<figure class="wp-block-image size-XXX">
<img src="画像" alt="" class="wp-image-00000"/>
<figcaption class="wp-element-caption">キャプション</figcaption>
</figure>

画像の大きさ（横幅）を見直す

レスポンシブが正しく動作しない現象が再現したのは、WordPressのメインカラム最大幅より、画像の幅が大きいときです。自動的に縮小表示され、座標が合わなくなります。ページタイプ・デフォルトで860px、フルワイドで1294px以内の画像にしてください。

そんなときは、（先程は「不要な装飾は消す」と書きましたが）<img>タグに本来の画像サイズ（widthとheight属性を追記）を明示してください。

<figure class="wp-block-image size-full">
<img src="画像" alt="" class="wp-image-00000" width="0000" height="0000"/>
<figcaption class="wp-element-caption">キャプション</figcaption>
</figure>

コメント