楽天スマホ商品ページ上部にバナーを設定する方法について

Question

いつもお世話になります。
夏季休暇のお知らせや、マラソンなどのイベントの際に、クーポンなどを各商品ページの上部にバナー表示をしたいのですが、どのように設置するのか教えてください。

今までのフォーラムで
「楽天スマホ商品ページ上部バナーの設定方法」も拝見させていただきましたが、難し過ぎて分かりませんでした。

Answer

ECマスターズの田中です。

念のため一度、以前よりフォーラムにて
ご回答差し上げている方法をご案内いたしますので、
操作がわからない部分などありましたらお知らせください。

なお、楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

最初に、下記の内容でCSSファイルを作成し、
GOLDサーバ内に設置してください。
===== この下の行から ============
.spFixedBanner img{
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
}
===== この上の行まで ============

続いて、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
固定バナーを設置することができます。
===== この下の行から ============




===== この上の行まで ============
※CSSファイルのURL、バナーのリンク先、バナーの画像URLは、実際のURLにご変更ください。

Answer

ECマスターズ　田中さま

お世話になります。
CSSファイル作成をどこでするのかさえ分からない超初心者で、
GOLDサーバーも初めて自分でサーバー内に設置しましたが、Ribraryだとファイルなどが見やすく、
ようやく無事表記できました、ありがとうございました。

カラーミーサイトのスマホページにも表示できますか？
PC用の画面では、夏季休暇など表記する場所はHPを作っていただいた会社にどこにどのようにして
入れるか、文字入力だけで済むように設置していただいてますが、その際、スマホには表示出来ない
と言われましたが、もし設置でるのであれば教えてください。

Answer

ECマスターズの田中です。

＞カラーミーサイトのスマホページにも表示できますか？
はい、表示できます。
https://shop-pro.jp/manual/s_design_tmpl_lst_sub2
上記、スマートフォン用テンプレートの「デザイン設定（上級）」より、

HTML編集欄に下記の内容を、
===== この下の行から ============



===== この上の行まで ============

CSS編集欄に下記の内容を
===== この下の行から ============
.spFixedBanner img{
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
}
===== この上の行まで ============

それぞれ入力していただけますでしょうか。

入力しても表示されない場合は、改めてお知らせください。

Answer

ECマスターズ　田中さま

無事設置できました、ありがとうございました。

Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun