1つの画像に複数のリンク先を設定する場合のコード

Question

お世話になっております。
ECマスターズクラブの最近のライブや動画で、講師の方（確か清水様）が「一つの画像に複数のリンク先を設定する方法」と「それを簡単に行えるhtmlコードを作成できるサイト」のご紹介をされていたような記憶があるのですが、詳細がわからなくなってしまいました。もしわかれば教えて頂けますでしょうか？

具体的には、楽天の商品説明文等でimgタグの数に制限があるため、スクエアの画像で商品Aへのリンクのものと商品Bへのリンクのものをタテに並べて長方形にして、上部を商品Aへのリンク・下部を商品Bへのリンクとしたいと思っています。
※出来れば楽天のスマホ商品説明文で使えるコードであればベストです。

よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> ECマスターズクラブの最近のライブや動画で、講師の方（確か清水様）が「一つの画像に複数のリンク先を設定する方法」と「それを簡単に行えるhtmlコードを作成できるサイト」のご紹介をされていたような記憶があるのですが、詳細がわからなくなってしまいました。もしわかれば教えて頂けますでしょうか？

イメージマップ
https://www.tagindex.com/html_tag/img/img_map.html

かと思いますが、残念ながら、こちらのタグは、
スマホではご利用いたくことができません。
スマホの場合は、複数枚の画像を結合するなどで、
枚数の調整をお願いいたします。

イメージマップの作成方法については、
下記に詳細を記載いたしますので、
ご確認くださいませ。

【使用ツール】
HTML Imagemap Generator
https://labs.d-s-b.jp/ImagemapGenerator/

【使用方法】
HTML Imagemap Generatorで
クリック範囲を指定いただくことで、
下記のようなデータが作成されますので、









href="この部分をリンク先に変更"
して、ご利用くださいませ。

動画：
https://ec-masters.gyazo.com/3b855b84b1ee2037171f6c3234180154

Answer

ありがとうございました。