スマホでスクロールしても固定されるバナーの件

Question

いつもお世話になっております。

下記ページをスマホで見た時のように
ページの一番下にリンク付きの固定バナーを設置する場合には
どの箇所にどんなタグを入れればよろしいでしょうか？

(以前の質問の中でそれらしい物を試したのですがうまくいかなかったので
詳しく教えて頂けると幸いです）

http://item.rakuten.co.jp/i-love-baby/bk-51343

Answer

ECマスターズの塚本です。

＞ページの一番下にリンク付きの固定バナーを設置する場合には
＞どの箇所にどんなタグを入れればよろしいでしょうか？

フローティングバナーの設置方法は
下記URLの過去の投稿が参考になります。ご参照ください。
https://ec-masters.club/forum/post_view.php?id=1576

今回の場合、一番下にバナーを設置するので、
GOLDサーバー内に設置するCSSを、

===== この下の行から ================
.spFixedBanner img{
display: block;
position: fixed;
right: 0;
bottom: 0px;
z-index: 999;
width: 100%;
}
===== この上の行まで ================

に書き換えていただくようお願いします。

Answer

ありがとうございます！

大変お恥ずかしいのですが、cssファイルの作成は
テキストエディター等で作成するのでしょうか。

普段、ホームページビルダーを利用していますが
保存する際に.cssとすればcssファイルに変換されますか？
また、その際頭の余分なソースは削除し単純に

下記のソースを入力すればいいのでしょうか。

===== この下の行から ================
 .spFixedBanner img{
 display: block;
 position: fixed;
 right: 0;
 bottom: 0px;
 z-index: 999;
 width: 100%;
 }
 ===== この上の行まで ================

初歩的な質問ですみません。
よろしくお願いします。

Answer

ECマスターズの塚本です。

＞大変お恥ずかしいのですが、cssファイルの作成は
＞テキストエディター等で作成するのでしょうか。

はい、テキストエディタで作成してください。

＞普段、ホームページビルダーを利用していますが
＞保存する際に.cssとすればcssファイルに変換されますか？

テキストエディタで保存する際に、
ファイル名の末尾を「.css」にして保存すると
CSSファイルとして扱われるようになります。

Windowsの場合、ファイルの種類が
カスケード スタイル シート ドキュメント
になっていることをご確認ください。

＞また、その際頭の余分なソースは削除し単純に
＞下記のソースを入力すればいいのでしょうか。

既存のCSSファイルとは別のファイルになりますので、
既存のものは削除せずに、新しいファイルとして保存してください。

Answer

ありがとうございます！
早速試してみたのですが、うまくページに反映されません。。

確認ですが、今回は以下のソースのcssファイルを作成、
GOLDサーバー内に設置し、

.spFixedBanner img{
 display: block;
 position: fixed;
 right: 0;
 bottom: 0px;
 z-index: 999;
 width: 100%;
 }

家の場合は以下のソースを
スマートフォンの「商品ページ共通説明文」に貼り付ける。
でよろしいでしょうか？



 
 
 

cssファイルを添付してみましたので
ご確認頂けますでしょうか？

Answer

ECマスターズの塚本です。

http://www.rakuten.co.jp/pokopoko/smp-bana.css 
のURLのドメインがco.jpになっているようです。

GOLDのファイル名の記述には以下のルールがあります。
http://www.rakuten.ne.jp/gold/【ショップURL】/【フォルダ名】/【ファイル名】

co.jpの部分をne.jpに変更し、/gold/の階層を増やしていただけますでしょうか。

Answer

塚本さん、ありがとうございます！
無事、出来ました！ご丁寧に教えて頂き感謝です。