商品ページのスマホフローティングバナーについて

Question

いつもお世話になります。

スマートフォンでこちらのショップ様のように
http://item.rakuten.co.jp/jiggys-shop/s-2-577

フローティングバナーで検索窓を隠して、
さらにメニューをクリックした際のオリジナル？メニューを表示
させる方法を調べて頂けますでしょうか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

いずれも、楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。


画面上部の固定バナーを設置する方法ですが、
最初に、下記の内容でCSSファイルを作成し、
GOLDサーバ内に設置してください。
===== この下の行から ============
.spFixedBanner img{
display: block;
position: fixed;
right: 0;
top: 0;
z-index: 999;
width: 100%;
}
===== この上の行まで ============

続いて、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
固定バナーを設置することができます。
===== この下の行から ============




===== この上の行まで ============
※CSSファイルのURL、バナーのリンク先、バナーの画像URLは、実際のURLにご変更ください。


メニューをクリックして表示されるメニューにつきましても同様に、
RMSの不具合を利用してJavaScriptを動作させ、
本来スマートフォンでの利用が禁止されているHTMLタグを挿入することで
表示させております。

いただいた商品ページですと、
スマートフォン用共通説明文に入っている
下記部分でJavaScriptを設置しております。

===== この下の行から ============



      

===== この上の行まで ============

タグ内の「=""」や「frameborder="0"」は、
禁止タグチェック回避を目的とした表記です。

上記タグの中で読み込ませている
http://www.rakuten.ne.jp/gold/jiggys-shop/sp_pg/rms_dw_master15.js
で、メニュー用のHTMLタグを挿入し、さらに挿入過程の中で
外部CSSファイル（http://www.rakuten.ne.jp/gold/jiggys-shop/sp_pg/rms_dw.css）
jQuery用外部JSファイル（http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js）
メニュー開閉用外部JSファイル（http://www.rakuten.ne.jp/gold/jiggys-shop/sp_pg/rms_dw2.js）
といった、メニューの表示・動作に必要なファイルを読み込ませております。

Answer

遅くなりました。
いつもお世話になりありがとうございます。
順次対応して行きます！

Answer

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

Answer

すごい！
いつもありがとうございます！