バナー上に乗せたクーポンのリンクについて

Question

いつもおせわになっております。

スマホ用に添付のようなバナーを作成したのですが、
それぞれ、個別にクーポン獲得ページが設定されているため
リンクを300円、500円、1000円と別に飛ばしたいのですが
どのようにHTMLテキストを組めばよろしいでしょうか

ご教授いただけるとありがたいです。
よろしくお願いいたします。###HR######IMG002d7648de5d92ecc1b72b48732e8b20e.jpegIMG0###

Answer

ECマスターズの田中です。

１つの画像の中に複数のリンクを設定する
タグというものはございますが、
ピクセル単位での座標指定が必要となり、
横幅が変わるスマートフォン向けページで設置しようとすると
機種によってクリックできる位置がどんどんズレてしまいます。

自動調整も可能ですが、
そのためにはjQueryプラグインの導入が必要となりますので、

バナー１つにつき１つの画像ファイルとしてご用意いただき、
タグを利用して横3列に並べていただく方法が
一番わかりやすいと思います。

なお、画像ファイルを作成される際、
JPG形式で保存すると、ご覧の通り、
特に赤い部分がモヤモヤした表示になってしまいますので、
GIFもしくはPNG形式で保存していただくことをオススメいたします。