RMSでの追従型グローバルナビゲーションの設置について

Question

お世話になっております。


楽天市場での出店で、追従型グローバルナビゲーションの作成についてご相談があります。


トップページと商品ページの一番上にナビゲーションを追従させたいのですが、楽天市場で表示されるデフォルトのヘッダーの下（top:56px）にナビゲーションを置き追従させたところ、トップページでデフォルトのヘッダーが追従しないため、スクロールするとナビゲーションの上部にデフォルトヘッダー分56pxの隙間が生じます。（商品ページではデフォルトのヘッダーが追従します。）

goldでナビゲーションページを作成しifreamで貼り付ける方法も試したのですが、RMS内でjsが使用できないため追従させることができませんでした。

また、jsを使用するためにトップページをgoldで作成したページに設定すると、デフォルトのヘッダーが表示されません。スマートフォンでも同様の現象が起こります。


トップページと商品ページに追従型グローバルナビゲーションを表示させるには、どのような方法を取ればよろしいでしょうか。

また、デフォルトのヘッダーの表示は必須なのでしょうか。必須の場合、goldで作成したトップページでデフォルトのヘッダーを表示させるにはどのようにすればよろしいでしょうか。###HR######IMG0be2eb5f0f829d04f65a591290703bfc6.pngIMG0###

Accepted Answer

ECマスターズの田中です。

いただいたページでは、JavaScriptは利用されておりません。
画面上に固定される追従ナビゲーションの上に、
ページ上端のヘッダーを重ねることで、
このような動作を実現しております。
以下、詳しくご説明いたします。

ヘッダーを作る前に、
ヘッダーの横幅をページ全体に拡げる必要がございます。
解説および具体的な方法は下記フォーラムにて返信しておりますが、
https://forum.ec-masters.net/post_view.php?id=8105
注意書きのとおり、楽天本来のレイアウトをわざと崩す必要があるため
ページ崩れの原因になる可能性がございますことを
予めお含みおきください。

ページ読み込み直後に表示される
「商品一覧」「お支払い・送料」などのリンクから
黒帯のナビボタンまでの内容は、
ヘッダーコンテンツの先頭に

として設置されております。

この #rms-header に対して margin-top: -88px; を指定することで、
ヘッダーコンテンツの始まる位置から88ピクセル上に移動、
つまり、楽天本来のヘッダーの直下に移動させております。

固定値で設定しておりますため、
今回のお買い物マラソンのように、
楽天本来のヘッダー直下のコンテンツが増えると
位置がずれる可能性がございますので、
コンテンツが増減していないかどうか、常に気を配っていただく必要がございます。

ページをスクロールすると
#rms-header の下から表示される
追従ナビゲーションは、
同じくヘッダーコンテンツの先頭に

として設置されております。

この #global-menus に対して
position:fixed; top:55px; と設定して
楽天本来のヘッダー直下に配置した上で、
#rms-header, #global-menus それぞれにz-indexの値を調整して設定することで、
#global-menus の上に #rms-header が重なった状態を
作ることができます。

このように、難易度が高い方法となりますので、
ご設置いただく際は、上記を念頭に入れていただいた上で、
構造を把握しつつタグを作成していただきますようお願いします。

また、不可能であるような表現をしてしまい、失礼いたしました。
先の返信につきまして、一部表現を修正させていただきます。

Answer

ECマスターズの田中です。


> トップページと商品ページに追従型グローバルナビゲーションを表示させるには、どのような方法を取ればよろしいでしょうか。

■PC用商品ページ（20/1/9 16:32 表現を修正）
実装していただくことはできますが、
楽天本来のレイアウトを崩す必要がある、
楽天の仕様変更によって内容の重なり/余白が発生する可能性がある、など、
難易度の高い方法となっております。
（詳しい構造は、後の返信をご参照ください）

■PC用トップページ
楽天GOLDで作成したトップページの中に実装していただく必要がございます。
（スマートフォン用含め、デフォルトのヘッダーに関しては後述します）

■スマートフォン用商品ページ
実装していただくことができます。

本来、楽天市場のスマートフォン用項目では
JavaScriptもCSSも利用が禁止されているのですが、
RMSのバグを利用して、禁止タグのチェックを回避することができます。

https://forum.ec-masters.net/post_view.php?id=12364
上記質問にてご返信差し上げたように、
既存ヘッダーの下に差し込む方法がよく使われておりますので
参考にしていただければ幸いです。

■スマートフォン用トップページ
楽天GOLDで作成されている・いないに関わらず、実装していただくことができます。
楽天GOLDで作成されていない場合は、
商品ページ用の仕組みを応用していただく形になります。


> jsを使用するためにトップページをgoldで作成したページに設定すると、デフォルトのヘッダーが表示されません。スマートフォンでも同様の現象が起こります。

はい、表示されない仕様となっております。

楽天GOLDは、一般的なホームページ作成サービスと同様、
ホームページの作成に必要なファイルを
自由に設置できる仕組みであり、
楽天本来のヘッダー含め、フッター・右下のクーポンなど、
共通で表示されるパーツは一切表示されません。


> デフォルトのヘッダーの表示は必須なのでしょうか。

楽天GOLDで作成されていない場合は
https://www.rakuten.co.jp/shops/supportnews/info_b/20170518-03.html
上記ページのとおり、表示されているヘッダーを改変してはなりませんが、
楽天GOLDで作成されている場合は、
同じヘッダーをご設置いただく必要はございません。

その代わりに、
https://navi-manual.faq.rakuten.net/rule/000010002
上記ガイドラインに記載されている
(1)　物販（役務サービスを含む）を行う場合の必須コンテンツならびにナビボタン
を配置していただきますようお願いします。
（各ページへのリンク、およびTOPへ戻るボタン）

Answer

ご回答いただきありがとうございます。

追従型グローバルナビゲーションの設置やデフォルトのヘッダーの表示について、承知いたしました。


> ■PC用商品ページ
> JavaScriptが使えないため、実装していただくことはできません。


PC用商品ページでの追従ナビゲーションにつきまして、

https://item.rakuten.co.jp/wakasugi/mizutaki2-3/

こちらのページを参考にしたいのですが、こちらは JavaScriptは使用されていないのでしょうか？


ページ構築に関して不慣れなため、重ね重ねお手数をお掛けしてしまい申し訳ございません。

大変恐れ入りますが、ご教示のほどどうぞよろしくおねがいいたします。

Answer

お忙しい中、丁寧なご回答をいただきまして誠にありがとうございます。

JavaScriptは使用していない旨と、追従ナビゲーションの設置方法について、承知いたしました。

タグ作成の際にこちらを参考にさせていただきます。

この度は迅速かつ的確にご回答いただき、本当にありがとうございました。