- 一枚の画像にアイテムがいくつかあって、それぞれに別々のリンクをつけたい！
- 初心者向けに一枚の画像に複数リンクを設置する方法を分かりやすく解説してほしい！
今回の記事では、初心者の方でも分かりやすいように、イメージマップを用いた、一枚画像に複数リンクを設置する方法を解説していきます！
↓ イメージとしてはこのような感じです！ （観葉植物とメモ帳に別々のリンクを設置）↓
このように一枚の画像を分割できなくて、画像内で別々のリンクを設置したい時に「イメージマップ」と呼ばれるHTMLの用法を使い実装します。
✔︎この記事を読むとできること
- 一枚の画像に複数のリンクを設置できるようになる
- レスポンシブでも上記同様の挙動ができる
イメージマップで画像に複数リンクを設置する方法
今回の例として、この一枚の画像に青と赤の領域に、別々のリンクを設置したいと思います。
✔︎画像に複数リンクを設置する 流れ
- <img>で画像を挿入
- ImagemapGenerator でイメージマップの作成
- コードをコピーして貼り付け
- jQueryのプラグインを使用しレスポンシブ対応
基本的にはこのような流れになります。
ちなみに完成形のソースコードはこちらです！
<img src="images/leaf-3162421_1280.jpg" usemap="#ImageMap">
<map name="ImageMap">
<area shape="rect" coords="110,70,347,529" href="https://ja.wikipedia.org/wiki/観葉植物" target="_blank">
<area shape="rect" coords="414,170,661,531" href="https://ja.wikipedia.org/wiki/メモ帳" target="_blank">
</map>このコードを手動で書くこともできますが、coordsの座標指定の部分が目視では確認できないので、ImagemapGenerator を使ってコードを自動生成する事をオススメします！
✔︎イメージマップ ソースコードの解説
- usemap=”#mapの名前（自由）”：イメージマップを付与したい画像に指定します。
- <map name=”ImageMap”>：nameにはusemapの名前と同じ名前を書く
- <area>：リンクを設置する範囲・リンク先を指定
- shape=”選択範囲の形を指定”「rect（四角形）circle（円）poly（多角形）」で指定
- coords=”座標の指定”
1.<img>で画像を普通に挿入
まず始めにいつもの通りに、<img>タグを使って複数リンクを設置させたい画像を挿入していきます。
<img src="images/leaf-3162421_1280.jpg" usemap="#ImageMap" alt="観葉植物とメモ帳">ポイントとしては、<img>タグの中に、usemap=”＃mapの名前”を好きなように指定して下さい！
2. ImagemapGenerator でイメージマップの作成
次にImagemapGenerator を使って、イメージマップのコードを自動生成します
まずは、 ImagemapGenerator にアクセスします。
「ここに画像をドラッグしてください」と画面が表示されるので、複数リンクを設置する画像をドラッグ&ドロップして読み込みましょう！
すると、このように画像と、ソースコードが表示されているのが分かると思います。
- 右上のメニューから好きな形状をクリック
- 画像の上でドラッグして、リンクを設置させたい範囲を選択
- HTMLコードが自動生成される
この手順で、メモ帳も同じように範囲選択してHTMLコードを自動生成します。
そして、生成されたコードを自分のエディタに貼り付ければ完成です！（PCのみ）
3.画像の複数リンクレスポンシブ対応させる
このままでは、画像のスマホ表示の際に画像の大きさが変化するので、指定した領域でリンクが設置できていません。
なので、画像が拡大縮小した際に、イメージマップの範囲も拡大縮小されるようにする必要があります。
やり方はとっても簡単で、jQueryの「jQuery RWD Image Maps」と呼ばれるプラグインを使用すればOKです！
→ CDNはこちら
jQueryって何？知らないんだけど！
jQueryの知識がない方でもできるように、コピペで実装できるように解説しますね！
↓このコードを<head>タグ内にコピペ！↓
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js" integrity="sha256-MV/L2nrfaNYQUtnDja7Ok3sF1D5Rpviw/MUs76PX9nE=" crossorigin="anonymous"></script>
</head>↓このコードを</body>の前にコピペ↓
<script>
$('img[usemap]').rwdImageMaps();
</script>
</body>
</html>これでレスポンシブでもイメージマップで画像に複数リンクが正しく設置できるようになっていると思います！
レスポンシブで正しい位置にリンクが設置できていない場合は、画像の大きさに問題があるので、width:100%; height:auto; などCSSを編集してみましょう！
イメージマップで画像に複数リンクを設置する方法 まとめ
これで、どんな画像でも沢山リンクを設置できるようになるね！
いかがでしたでしょうか！
画像を分割できない際には、このイメージマップという方法を用いて、画像に複数リンクを設置するようにしましょう！
最後までご覧いただきありがとうございました！
