スマホ商品ページ内での横バナーの設置について

Question

お世話になっております。

スマホ商品ページの横バナーの設置方法を探しております。

現在はページ下部にのみテキストリンクを常に表示させていますが、
こちらのページのように小さめのバナーも表示させたいと考えています。

http://item.rakuten.co.jp/u-stream/pg-ft/

方法がお分かりでしたら教えて下さいませ。

現在はcssファイルをgoldにアップし、商品共通設定にスタイルシートの読み込みタグ、
商品ページのスマホ説明文に、全商品それぞれフロートバナーのタグを入れているのですが、
毎回クーポンなどの内容が変わる度に変更するのが大変になっております。

何か効率のよう方法はご存知でしょうか？


宜しくお願い致します。

Answer

ECマスターズの田中です。

＞こちらのページのように小さめのバナーも表示させたいと考えています。
＞方法がお分かりでしたら教えて下さいませ。
ページ下部テキストリンクを応用していただければ可能です。

まずはcssファイル内の指定、
およびフロートバナーのタグを同じ場所に複製してください。

次に、IDをご変更いただく必要があります。
先ほどコピーしていただいた
css・フロートバナーのタグ、それぞれ１箇所ずつ
「floatbanner」と記載のある部分を、
別の文字にご変更ください。
（以降、 floatbanner2 に変更したとしてお話いたします）

続いて、floatbanner2用のcssをご変更いただきます。
widthを、設置するバナーの幅に、
heightを、設置するバナーの高さに、
bottomを、画面下からの距離にご変更ください。
rightはすでに0になっておりますので、これで画面右に固定されます。
左側に固定する場合は、right を left にご変更ください。

これで、画面横の固定バナーを作ることができます。


＞現在はcssファイルをgoldにアップし、商品共通設定にスタイルシートの読み込みタグ、
＞商品ページのスマホ説明文に、全商品それぞれフロートバナーのタグを入れているのですが、
＞毎回クーポンなどの内容が変わる度に変更するのが大変になっております。
全商品でフロートバナーの内容が同じでしたら、
フロートバナーのタグも共通説明文の中に入れていただければ
全商品へ一括で適用されますので、
ご検討いただけますでしょうか。

Answer

表示させることができました。
ありがとうございました。

また、わざわざ商品ページに貼りに行く必要もなくなりました。
ありがとうございます。