スマホページのファーストビュー配置後の店名位置について

Question

お世話になっております。

ECマスターズ様掲載の《スマホページのファーストビューにバナーを設置する方法》のような方法で楽天市場のスマホ商品ぺージにjavascriptでファーストビューに特集バナーやクーポン、カテゴリーなどを配置しました。

商品画像スライダーの上にグレーの帯の店名をつけたいのですが、現在iframeの中に帯を作っていれてます。
iframeの高さをheight="○○px"としていしているのですが、スマホの機種やタブレットによって位置がずれてしまいずれてしまったりしてしまいます。

機種によってずれが生じない、商品画像スライダーに被らない方法を教えていただきたいです。
宜しくお願いいたします。

Accepted Answer

ECマスターズの田中です。

実際の商品ページを確認させていただきました。
iframeの中は、JavaScriptなどを利用した
特殊な構造ではなかったため、
前のクーポンやキャッシュレス還元バナーのように、
 の中に直接ご記載いただくと
一番シンプルに解決していただけるかと思います。

どうしてもiframeのまま高さ調整による解決をご希望の場合は、
画像の部分だけでなく、店名の帯部分も含め、
iframe内の要素の高さを、スタイルシートで厳密にご指定いただくか、

iframeの高さを自動調整するプラグイン「iFrame Resizer」を
ご利用いただきますようお願いします。

「iFrame Resizer」の導入には若干手間がかかりますので、
下記URL、2019/09/19 19:28の返信内容、
「３．プラグインの利用」をご参照願います。
https://forum.ec-masters.net/post_view.php?id=12087

Answer

ありがとうございます。
 の中に直接記載する方法ですと、 がぶつかってしまい商品ページに登録できず、iframe内の要素の高さを、スタイルシートで厳密に指定も勉強不足でわからなかったので

プラグイン「iFrame Resizer」を利用させていただき解決できました。

この度はありがとうございました。
今後とも宜しくお願いいたします。