スマホのフローティングバナー

Question

いつもお世話になっております。

スマホのフローティングバナー（画面下に固定されるバナー）
の設置ですが、過去の投稿を拝見しておりました。

こちらの内容は、画面下に固定されるバナーの作成方法でしょうか？

初歩的な質問ですが、「GOLDサーバー内に設置」がよくわかないのです。
どのように設置するのでしょうか？

ポイント５倍のバナーを貼り付けたいのですが・・・

宜しくお願い致します。


過去の投稿内容
--------------------------------------------------------------

最初に、下記の内容でCSSファイルを作成し、
GOLDサーバ内に設置してください。
===== この下の行から ============
 .spFixedBanner {
 display: block;
 position: fixed;
 right: 0;
 bottom: 画面下からの距離px;
 z-index: 999;
 width: 画像の横幅px;
 height: 画像の縦幅px;
 }
 ===== この上の行まで ============
※画面下からの距離、画像の横幅、画像の縦幅は、実際の値（半角数字）にご変更ください。

 続いて、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
 固定バナーを設置することができます。
===== この下の行から ============
 
 
 
 
 ===== この上の行まで ============
※CSSファイルのURL、バナーのリンク先、バナーの画像URLは、実際のURLにご変更ください。

Answer

ECマスターズの田中です。

＞こちらの内容は、画面下に固定されるバナーの作成方法でしょうか？

はい、スマートフォンの画面下に固定されるバナーの作成方法です。
ただし、RMSの不具合を利用した方法になりますので、
今後のRMSの改善により、利用できなくなる可能性があります。

＞初歩的な質問ですが、「GOLDサーバー内に設置」がよくわかないのです。
＞どのように設置するのでしょうか？

GOLDサーバー、つまり楽天GOLDはいわゆるFTPサーバで、
パソコンのハードディスクと同じ要領でファイルを保存し、
それをインターネット上に公開することができる仕組みです。

mk3864さんのショップは既に楽天GOLDをご利用いただいており
新規利用の申込は必要ありませんので、

楽天GOLDの内容を修正できる「Ribrary」というソフトを使って
楽天GOLDに、CSSファイルをアップロードしてください。

「Ribrary」の使い方は、下記URLの店舗運営マニュアルをご参照ください。
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=service/ribrary/&s=&param2=0

Answer

CSSファイルの作成とは、
メモ帳を起動して、CSSで保存すると、ファイルが作成できるのでしょうか？

そのファイルを「Ribrary」にフォルダを作成して、その中に
CSSファイルを貼り付けるという作業でしょうか？


===== この下の行から ============
 
 
 
 
 ===== この上の行まで ============
※CSSファイルのURL、バナーのリンク先、バナーの画像URLは、実際のURLにご変更ください。


CSSファイルのURLとは、どこを見ればわかりますか？

Answer

ECマスターズの田中です。

＞CSSファイルの作成とは、
＞メモ帳を起動して、CSSで保存すると、ファイルが作成できるのでしょうか？
はい、作成できます。
具体的な作成方法をご説明いたしますと、
メモ帳を起動して、「この下の行から」と「この上の行まで」の間にある
ソースを貼り付けていただき、
ファイル名の末尾に「.css」とつけて保存してください。

そうしますと、パソコンの中にCSSファイルが作成されますので、
「Ribrary」を使って、「楽天GOLD」のお好みのフォルダに、
作成したCSSファイルをアップロードしてください。

＞CSSファイルのURLとは、どこを見ればわかりますか？
楽天GOLDにアップロードした後、マウスカーソルを
アップロードしたファイルに当てていただきますと、
右下に「URLコピー」というボタンが表示されますので、
ボタンを押していただいた後、貼り付けを行っていただくことで、
CSSファイルのURLを入力することができます。

Answer

いつも早急なご対応ありがとうございます。

とりあえず解決済みにします。

またわからないところがありましたら質問させて頂きます。

宜しくお願い致します。

Answer

いつもお世話になっております。

＞続いて、スマートフォン用共通説明文に
＞下記のHTMLタグを貼り付けることで、
＞固定バナーを設置することができます。

スマートフォン用共通説明文とはどこのことでしょうか？
スマートフォンデザイン設定のどこにありますでしょうか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

＞スマートフォン用共通説明文とはどこのことでしょうか？
＞スマートフォンデザイン設定のどこにありますでしょうか？

表示させたい場所によって異なりますが、
RMSトップメニュー → 1-2 デザイン設定 → 2 スマートフォン デザイン設定
の中にあります、

■トップページの場合
トップページ編集　→　トップ説明文(1) もしくは トップ説明文(2)

■商品ページの場合
商品ページ 共通パーツ設定　→　商品ページ共通説明文

■カテゴリページの場合
カテゴリページ 共通パーツ設定　→　カテゴリページ共通説明文 

に、固定バナー用のHTMLタグをご記載ください。

Answer

＞■商品ページの場合
＞ 商品ページ 共通パーツ設定　→　商品ページ共通説明文

こちらに貼り付けましたが、バナーの横幅がスマートフォン画面の幅に
ピッタリになりません。
写真画像のようにwidth: 100%;
にはならないのでしょうか？

あと、画面下からの距離も少し空いています。
bottom: 0px;
にしたのですが・・・。

下記のようにCSSファイルを作成しました。
---------------------------------
.spFixedBanner {
 display: block;
 position: fixed;
 right: 0;
 bottom: 0px;
 z-index: 999;
 width: 300px;
 height: 70px;
 }
---------------------------------

宜しくお願い致します。

Answer

ECマスターズの田中です。

それでは、CSSファイルの内容を
このようにご変更いただくといかがでしょうか。

---------------------------------
.spFixedBanner img {
display: block;
position: fixed;
right: 0;
bottom: 0px;
z-index: 999;
width: 100%;
}
---------------------------------

Answer

できました！
いつも早急なご対応ありがとうございます。