【jQuery非依存】クリッカブルマップをレスポンシブ対応する【ずれる人必見】

クリッカブルマップをレスポンシブ対応しようとして、jQueryの「RWD Image Maps」を使ってみましたが上手くいかず、PCサイズでもクリックエリアがずれてしまっていました。

「RWD Image Maps」は古いプラグインのため、jQueryのバージョンによっては動作しないことがあるようです。

jQuery非依存の「image-map-resizer」というのを見つけ、簡単にレスポンシブ対応することができましたのでその使い方と、クリッカブルマップ自体の導入方法を解説します！

クリッカブルマップの使い方

クリッカブルマップとは

クリッカブルマップとは、画像の任意の場所をクリックできるようにするコーディング方法です。

クリックした場所にリンクなどを設定することができます。

↓の画像のうさぎちゃんをクリックするとこのページの一番上に遷移します。

こんな感じで画像の任意の場所をクリックできるようにするのがクリッカブルマップです。

クリッカブルマップの作成方法

クリッカブルマップを作るには、「HTML Imagemap Generator」を使いましょう！
簡単にエリアを指定するHTMLコードを作成することが出来ます！

円や正方形だけでなく、複雑な多角形もクリックでなぞっていくだけで簡単に作成することができます。

画像の上をなぞったら、右側にHTMLコードができているのでそれをHTMLにコピペして使います。

<img src="25346389_s.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
  <area shape="poly" coords="437,364,428,373,405,371,400,353,353,346,341,371,296,369,304,352,315,345,306,282,330,218,351,195,343,167,317,108,358,141,370,166,377,137,410,96,416,107,408,152,398,166,396,185,427,207,440,247,449,267,448,307,448,348,440,346,440,346" href="#" alt="" />
</map>

↑のようなコードになります

※imgタグの中のsrc属性の部分を実際に使う画像のパスに変更します。

パスの書き方は以下の記事を参考にしてみてください！

これだけでは、正しく選択範囲が表示されるのは元の画像のサイズの時だけです。
レスポンシブで画像サイズが変わってしまっても正しくクリック範囲が反映されるよう、レスポンシブ対応を行なっていきましょう！

「image-map-resizer」でレスポンシブ対応する方法

「image-map-resizer」というjsを使用します。

ここではより簡単なCDNを使っていきます。

以下のコードをbodyの閉じタグの直前に記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
  imageMapResize();
</script>

WordPressの場合

WordPressサイトの場合も同様にbodyの閉じタグの直前に上述のscriptを記述してあげるだけでOKなので、FTPを使用してファイルのアップロードなど、面倒な作業が減ってとっても便利です！

bodyの閉じタグは大体footer.phpとかにあるので探してみてください。

まとめ

レスポンシブのクリッカブルマップを使用するには、「HTML Imagemap Generator」でHTMLを作成して、「image-map-resizer」でレスポンシブ対応させましょう！