スマホ商品画像の上にバナー表示、リンクについて

Question

スマホ商品画像の上にクーポンのバナーを表示させて、クーポンを獲得するページにリンクさせたいです。

次の点が分からず質問させていただきたいです。
１．画像がスマホ画面横幅100％になっていない。
２．クーポン獲得画面へのリンク方法が分からない。

GOLDに「sp_fastview.js」を置きました。
jQuery(function($){
$('#itemImageSlider').before($('.iframeBefore'));
});

商品ページ共通説明文に以下を入れました。
<script ="" src="https//www.rakuten.ne.jp/gold/SHOP-URL/eventbanner/fastview_off/sp_fastview.js"></script ="">
<iframe ="" src="https://image.rakuten.co.jp/SHOP-URL/cabinet/event/haihu3.jpg" class="iframeBefore" width="100%" height="60">
</iframe ="">

よろしくお願いいたします。

Answer

ECマスターズの星です。明日、担当の者よりご連絡さしあげますので、もう少々お時間いただければと存じます。お待たせしており申し訳ございませんが、何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。> １．画像がスマホ画面横幅100％になっていない。iframeタグは、HTMLで作成した別のページを埋め込むためのタグです。１枚の画像を設置される場合は、imgタグをご利用ください。そうすることで、画像が指示通り、横幅100%に収まるようになります。↓

> ２．クーポン獲得画面へのリンク方法が分からない。商品ページ共通説明文にございます、同バナーと同様に、上記タグをタグで囲んでいただければ結構です。http://www.htmq.com/html/a.shtml

Answer

田中様早々のご回答、ありがとうございます。> １．画像がスマホ画面横幅100％になっていない。これは解決いたしました。商品画像前に表示させる為には、iframeでなければならないと思い込んでいました。> ２．クーポン獲得画面へのリンク方法が分からない。これが未解決です。下記のとおりをで囲んでいるのですが、スマホで確認するとリンクしません。

お手数をおかけしますが、再度、ご指導いただきたくお願い申しあげます。

Answer

ECマスターズの田中です。失礼しました、いただいたソースの場合、タグの中身のタグだけが商品画像上に移動してしまい、リンクが無くなってしまいます。そのため、class="iframeBefore" と、禁止タグ入力のための、タグ名直後の ="" をimgタグからaタグへ、移動していただきますようお願いします。（タグ名直後の ="" は、タグにも必要です）

↓

Answer

田中様早々のご対応、ありがとうございます。> ２．クーポン獲得画面へのリンク方法が分からない。これも解決いたしました。入会して良かった！！ありがとうございます。今後とも、よろしくお願いいたします。

スマホ商品画像の上にバナー表示、リンクについて

カテゴリーから探す