スマホ商品ページ画像の上にバナーを設置したい

Question

お世話になっております。

タイトルの通り
「スマホ商品ページ画像の上にバナーを設置したい」
と思い、御社の「デザインレシピ」→スマホページのファーストビューにバナーを設置する方法を参考に編集しましたが、商品画像の上に空白ができただけとなってしまいました。

何が原因なのでしょうか？
ご教示いただけますでしょうか？

Accepted Answer

ECマスターズの田中です。

スライドバナーにて、自動で生成されたHTMLを修正しようとすると
ソースが複雑で、楽天GOLDの操作も必要となりますので、
共通説明文に追記していただく方法をお試しいただけますでしょうか。

バナー設置用のタグから
class="iframeBefore"
を削除していただき、
下記のようにタグとタグで挟んでいただきますようお願いします。

Answer

ECマスターズの田中です。

確認したところ、iframeタグのURLを書く位置に
誤りがございました。

iframeの直後にある「=""」の"の中ではなく、
次にある「src=""」の"の中にご記載をお願いします。


↓

Answer

ありがとうございます！

表示されるようになりました。
ただ、バナーの下の商品画像とのスペースが
空白になっています。

このスペースをなくすには
どうしたらよいでしょうか？

ご回答よろしくお願い致します。

Answer

ECマスターズの山岡です。

完全にスペースを0にするにはiframeに指定したURLのhtmlを修正する必要があります。

もうひとつ方法として


heightの37を調整することでスペースを小さくすることができます。

Answer

ECマスターズ
山岡様

お世話になっております。
heightを０にしたのですが、
それでもスペースは空いたままです。

iframeに指定したURLのhtmlを修正する必要があるとのことですが、
それはどうやるのでしょうか？

Answer

ECマスターズの山岡です。

CSSを変更する方法になります。

ステップ1  

商品画像の上のスペースを0に設定する

CSSファイルをGOLDにアップロードする

#itemImageSlider {
    margin: 0px 0 32px 0;
}

メモ帳などのテキストエディタに貼り付けます
ファイル名の末尾を「.css」にしてファイルを保存し
GOLDにアップロードします。

Answer

ECマスターズ
山岡様

ご回答ありがとうございます。

ステップ２の
「iframeに指定したHTMLに以下を差し込んでください。」

というのがわかりません。
iframeはECステーションのスライドバナーにて
作成したhtmlです。
そこにタグをどう差し込んだらよいのかわかりません。

お手数をお掛け致しますが、
よろしくお願い致します。

Answer

ECマスターズの塚本です。

いただいたご質問ですが、こちらお調べしまして
担当より明日回答させていただきます。
回答まで今しばらくお待ちくださいませ。

Answer

ECマスターズ
田中様

お世話になっております。
教えていただきました通り修正して
無事キレイに表示されるようになりました！

ありがとうございました。