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

HTML/CSS
スポンサーリンク

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

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

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

おおたに
おおたに

初めてクリッカブルマップを使う方にも分かりやすく図付きで説明します!

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

クリッカブルマップとは

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

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

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

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

ぱんだ
ぱんだ

地図にマップピンをいくつか配置した画像を1枚用意して、そのマップピンにgoogle mapへのリンクを埋め込むとか、いろんな使い方が出来そうだね!

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

クリッカブルマップを作るには、「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を使用します。

image-map-resizer

Github

CDN

ここではより簡単な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でレスポンシブ対応させましょう!

おおたに
おおたに

jQueryの「RWD Image Maps」の方はバージョンによって動作しないことがありますので、
image-map-resizerが簡単でおすすめです!

コメント

タイトルとURLをコピーしました