フローティングヘッダー・フッターについて

Question

お世話になっております。

スマホの商品ページに以下のサイトのような
フローティングフッターを設置したいのですが
どうすれば良いのでしょうか？
http://item.rakuten.co.jp/keitai/400-845

合わせてフローティングヘッダーを設置したいと考えておりますので
ご教授いただけましたら幸いです。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

スタイルシートを利用すれば可能ですが、
RMSのバグを利用するため、RMS改修により使用できなくなる可能性がありますので
ご注意ください。

方法ですが、まず以下の内容で、
CSSファイルを作成し、GOLDにアップロードをお願いします。

===== この下の行から ============
.spFloat img {
	display: block;
	position: fixed;
	left: 0;
	z-index: 999;
	width: 100vw;
}
.spFloat.spHeader img { top: 0; }
.spFloat.spFooter img { bottom: 0; }
===== この上の行まで ============

続いて、スマートフォン用共通説明文に、
以下のHTMLタグを貼り付けていただくと、バナーが表示されます。

===== この下の行から ============





===== この上の行まで ============
※行末の空白、タグ内の改行も必要なので、上記タグをそのままコピーしてご利用ください。
※CSSファイルのURL、各リンク先、各画像URLは、実際のURLに書き換えてご利用ください。

Answer

ありがとうございます。表示できました。

Answer

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

Answer

田中様

いつもお世話になっております！
神対応ですね！

活用させて頂きます！
ありがとうございます！