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

Question

スマホのフローティングバナーをヘッダーに使いたいです。作成の仕方を教えて頂けませんでしょうか？イメージは下記の通りです。①～④のカテゴリにはドロワーメニューを使いたいです。メニュー・ショップロゴ・買い物かごは画像を使います。宜しくお願い致します。_____________________________________メニュー　|　　ショップロゴ　　|　買い物かご￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　　①　　| 　　②　　| 　　③　　| 　　④￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

Answer

ECマスターズの田中です。※RMSの、禁止タグを入力できるバグを利用する方法ですので、　今後、RMSの改修により、使用できなくなる可能性があります。＞①～④のカテゴリにはドロワーメニューを使いたいです。ボタンを押すと画面の横から現れるメニューのことで間違いないでしょうか。その場合、画面全体を利用する仕組みになるため、インラインフレームが使えないので、仕組みが複雑になります。最初に、下記の内容をテキストエディタ（メモ帳など）に貼り付けていただき、ファイル名の末尾を「.css」にして外部CSSファイルとして保存していただき、楽天GOLDにアップロードしてください。===== この下の行から ============#spFloatHeader {display: block;position: fixed;left: 0;top: 0;z-index: 999;width: 100%;}===== この上の行まで ============続いて、スマートフォンページ用の項目に下記のHTMLタグを貼り付けることで、「任意のHTMLソース」の部分を画面上部に固定表示させることができます。===== この下の行から ============

任意のHTMLソース

===== この上の行まで ============※任意のHTMLソースは、画面上に設置したいHTMLの内容に、　CSSファイルのURL、バナーのリンク先、バナーの画像URLは、実際のURLにご変更ください。「スマートフォンページ用の項目」は共通説明文でも構いませんが、ページ構築中の動作確認が必要な場合は、サーチ非表示に設定したダミーの商品ページをご用意の上、スマートフォン用商品説明文をご利用いただくことをオススメします。「任意のHTMLソース」の中で、スマートフォン向け項目で禁止されているHTMLタグを使う場合は、禁止タグのチェックを回避するためにタグ名の後ろに「 =""」とご記載ください。例）

　→　

上記の「任意のHTMLソース」と「外部CSSファイル」の中に必要なタグや規則を加えていくことで、メニューの見た目を調整してください。ドロワーメニューの動作については、下記ページで紹介されている仕組みを導入していただくことで実装することができます。http://kanri.nkdesk.com/homepage/sample3.phpまずは、上記の手順でご希望のHTMLを画面上部に固定していただくことから初めていただき、画像を3列・4列に表示、ドロワーメニューの設置、リンク先の設定など解決出来ない部分が出てまいりましたら、改めてご返答いただきますようお願いします。なお、２月２日よりガイドラインに追加された以下の改定内容において、スマートフォン用ページの共通ヘッダ部分を独自のフローティングヘッダーなどで隠す行為を禁止行為と定めております。--楽天市場が提供する共通コンテンツを隠す、または変更する行為を新たに禁止行為に追加します。楽天市場では、ユーザの利便性を鑑み、全店舗様共通のヘッダーやフッターを提供しております。ユーザにとって、より使いやすく、より楽しくお買い物をしていただくために、ご協力をお願いいたします。[重要]取扱禁止商材・禁止行為ガイドライン改定についてhttps://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=info_b/20170202-01.html&s=¶m2=22-（9）-31当社が全店舗に提供している共通コンテンツを隠す行為を禁止行為に新規指定　［禁止行為］　以下のような、当社が全店舗に提供している共通コンテンツの一部もしくは全部を隠す、または変更する行為　・「http://www.rakuten.co.jp/」または「http://item.rakuten.co.jp/」で始まるページにおける共通ヘッダ部分　（※GOLDページはこれに該当しません）--フローティングヘッダーで共通ヘッダ部分を隠さないようにするには、下記の1行の規則を外部CSSファイルに加えていただき、本来のページの内容を下にずらしてください。= この下の行から ====================body { padding-top: 移動量px; }= この上の行まで ====================※移動量は、フローティングヘッダーの高さを半角数字でご記載ください。

Answer

フローティングヘッダーは設置できました。ありがとうございます。ですがヘッダーの位置をずらすことができません。cssに下記の記載をしましたがどこが間違えていますでしょうか？body { padding-top: 100px;}#spFloatHeader {display: block;position: fixed;left: 0;top: 0;z-index: 999;width: 100%;}

Answer

時間を空けてみると出来ていました。ありがとうございました。

Answer

ECマスターズの田中です。無事作成できたようで何よりです。なお、私にて確認させていただいたところ、商品ページに設置されたヘッダーの「人気の商品！」欄により検索窓、メニュー等のボタン、およびショップ名が隠れた状態になっておりました。先述の通り、ガイドラインに定められた禁止行為に該当する可能性がありますので、改めて間隔の調整を行っていただきますようお願いいたします。

Answer

ご連絡ありがとうございます！現在はダミーの商品ページでテスト中です。また分からないことがありましたらお願い致します。

Answer

フローティングヘッダーを設置は出来ましたがカテゴリとその下にある画像バナーにどうしても隙間が出てします。隙間を消すのにはどうすればいいでしょうか？

Answer

ECマスターズの田中です。隙間の出る原因ですが、カテゴリ名の画像が横幅100%で設定されているため、横幅の広いスマホで見るとカテゴリ名画像の高さが大きくなり、大きくなったカテゴリ名画像によって画像バナーが押し下げられておりました。width="100%" ではなく、 height="20" のように枠の高さに合わせてサイズを決めていただくことによって、押し下げられることがなくなり、画像バナーとの間隔がなくなります。なお、前回指摘が漏れていたのですが、画面下部の固定バナーによって、「商品をかごに追加」「ご購入手続きへ」各ボタンが隠されております。こちらも、ガイドラインに定められた禁止行為に該当する可能性がありますので、予めお含みおきの上、バナーの削除についてご検討いただきますようお願いします。

Answer

改善されました！ありがとうございます。画面下部の固定バナーについてご指摘ありがとうございます。修正をするように致します。

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

カテゴリーから探す