画像の複数エリアをクリックできる「イメージマップ」の作り方
日本地図から個々の都道府県をクリックするなど、1枚の画像に複数のリンク先を設定したい場合、イメージマップを作成するのが一般的です。手作業では面倒ですが、HTML Imagemap Generatorを使うと、簡単に作成することができます。
イメージマップの作成
イメージマップを作成するためHTML Imagemap Generatorを開きます。
![HTML Imagemap Generator](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_11-44-50.png)
「ここに画像をドラッグしてください」に画像をドラッグアンドドロップします。ここでは次のような1枚の画像を使います。
![イメージマップを作成する画像をドロップ](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_11-47-17.png)
右上のツールバー(1)から四角形・円・多角形を選んで画像上を範囲選択(2)すると、クリック可能な領域が作成されます。作成されたコード(HTML)は画面右側(3)に表示されます。ここでは1枚のトランプをクリック可能にしました。
![クリック可能な領域を追加](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_11-52-04.png)
同じように他の領域も作成します。ここでは3枚のトランプそれぞれをクリックできるように3つの領域を作成しました。
![3つのクリック可能な領域を作成](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_12-00-03.png)
画面右側からHTMLをコピーします。
![イメージマップのHTMLをコピー](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_12-03-43.png)
WordPressのダッシュボードを開き、任意の投稿または固定ページにコピーペーストします。ブロックエディタの場合はカスタムHTMLブロックを使います。
![イメージマップのHTMLをペースト](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_12-08-04.png)
そのままではイメージマップとして機能しないので、画像のURLやクリック時に開くリンク先のURLを修正する必要があります。
![修正が必要な部分](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_16-22-55.png)
- src="card.png" --- サンプルの画像ファイル名「card.png」を実際の画像のURL(例:http://example.com/card.png)に変更します。
- href="#" --- 仮に入力されたURL「#」を実際のリンク先URL(例:http://example.com/card1)に変更します。
変更した例は次のようになります。
<img src="http://example.com…略…card.png" usemap="#ImageMap" alt="" /> <map name="ImageMap"> <area shape="rect" coords="401,0,599,267" href="http://example.com/card3" alt="" /> <area shape="rect" coords="203,0,389,262" href="http://example.com/card2" alt="" /> <area shape="rect" coords="1,0,187,262" href="http://example.com/card1" alt="" /> </map>
これで個々の領域がクリック可能なイメージマップが機能するようになります。
![イメージマップが機能する](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_12-28-06-710x325.png)
イメージマップのレスポンシブ対応
イメージマップのレスポンシブ対応にはjQueryのrwdImageMapsライブラリが役立ちます。以下のページからダウンロードして設定してみてください。
jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
イメージマップがレスポンシブ対応になります。
![レスポンシブ対応したイメージマップ](https://www.nishi2002.com/wp-content/uploads/2020/10/2020-10-21_12-59-32.png)
よくわからなければWordPressメールサポートで対応させていただきます。