【レスポンシブ対応】画像の一部分にだけリンクを貼る方法！（クリッカブルマップ）

HP制作の際、画像にリンクを貼りたいけど画像全体には貼りたくない。

かといって、貼りたい部分とそれ以外を分けた画像を作ってもCSSでのデザインが上手くいかなそう。

こういった経験ないでしょうか？

この問題は「クリッカブルマップ」というものを使うことで簡単に解決することが出来ます。

3分程度で出来るレベルですので、コーディングを始めたての方でもご安心ください！

では、２ステップで解説していきます！

Step1 : クリッカブルマップの作成

では早速、クリッカブルマップというものの作成からやっていきましょう。

「Clickable map（クリッカブルマップ）」

意味はそのままで、

クリック（click）できる（able）マップ（座標）という意味になります。

これを任意の画像の上から重ねることで、

画像の一部分だけをクリックできるようになるというわけです。

ちなみに2ステップといいましたが、ここが作業の9割になります。

まず何をするかというと、

リンクする範囲（クリック出来る範囲）を決める作業をしていきます。

コードに書くとこんな感じ。

---

<img src="〇〇.png" usemap="#ImageMap">
<map name="ImageMap">
     <area shape="poly" coords="3,2338,2836,1730,3128,3080,292,3692,1,2340,72,2346" href="〇〇">
</map>

---

上から順番に説明していきましょう。

【img src=”〇〇.png】：使用したいお好きな画像を指定して下さい

【usemap=”#ImageMap“, map name=”ImageMap“】：お好きな名前を設定して下さい（＃を忘れずに）

【shape=”poly“】：どういう形で範囲を作るかを指定しています。

“poly”は多角形のことを指しており、基本的にはこれで大丈夫です。

【href=”〇〇“】：リンクしたいサイトのURLを指定して下さい

【coords=”3,2338,2836,1730…】

この”coords”が一番大事で、リンクさせたい範囲の座標を表しています。

左から、x1,y1,x2,y2…という風に続き、何角形かによって中の数値の数は増減します。

---

「座標とかコードとか色々面倒くさそう…」と思ったそこの貴方！

安心してください。

簡単に座標が分かる文明の利器（サイト）がございます。

とっても簡単便利ツール「HTML Imagemap Generator」

座標の位置が分かって、尚且つHTML（先ほどのコード）まで構築してくれる優れもの。

「HTML Imagemap Generator」

こちらを今回は使用していきます。

下記URLよりアクセスし、以下の手順を行ってください。

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

1.　好きな画像をドラッグ＆ドロップ

2.　右上の「多角形を描く」を選択

3.　リンクにしたい箇所の角を順にクリックしていき、Escapeボタンで確定

4.　右側に出てきたHTMLコードをコピー＆ペースト

これでクリッカブルマップ作りは完了になります！

ツールはやっぱり楽でいいですね。

Step2 : プラグイン「image-map-resizer」の導入（レスポンシブ対応）

クリッカブルマップは作成できましたが、

このままだとレスポンシブ対応ができていません。

携帯等のSP画面だと範囲にズレが生じ、リンクが別の箇所に出来てしまいます。

というわけで、最後に「image-map-resizer」というプラグインを入れましょう！

下記のコードをHTMLの”body”終了タグ直前に入れてあげて下さい。

---

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

---

この「image-map-resizer」は複数のサイトでダウンロードできますが、

今回はCDNのものを使用しました。

（CDNダウンロードサイト : https://cdnjs.com/libraries/image-map-resizer）

中身はどのサイトでダウンロードしても変わらないので上記のもので大丈夫です。

これでレスポンシブ対応も完了となります！

まとめ

ということで今回は、画像の一部分にだけリンクを貼る方法をご紹介いたしました！

手順は簡単２ステップ

1.　「HTML Imagemap Generator」にてクリッカブルマップを作る

2.　「image-map-resizer」を入れて、レスポンシブデザインに対応させる

以上です。

コピペをすればコードを書く必要も実際ないので、初心者の方でも問題なく実装できると思います。

是非お試し下さい。

本サイトでは、他にもWebデザインに関することを色々書いております！

そちらも併せて見て頂けると幸いです！

では！！