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

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/SHOP-URL/sp_pg/rms_dw_master15.jsで、メニュー用のHTMLタグを挿入し、さらに挿入過程の中で外部CSSファイル（http//www.rakuten.ne.jp/gold/SHOP-URL/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/SHOP-URL/sp_pg/rms_dw2.js）といった、メニューの表示・動作に必要なファイルを読み込ませております。

Answer

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

Answer

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

Answer

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

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

カテゴリーから探す