フローティングバナーについて

Question

https://www.rakuten.ne.jp/gold/million-bell/
こちらのミリオンベル店舗さんのようにスマホ商品ページの上にカテゴリーを常に表示させたいのですがHTMLをお教え頂いて宜しいでしょうか？

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

カテゴリーへリンクするボタンの並んだヘッダーを
常に表示させたい、ということですね。
その際、下記URLで紹介されている「共通ヘッダ部分」を隠さない仕組みが
必要となりますので、それも含めた方法をご案内いたします。

[重要]禁止行為(共通コンテンツを隠す行為)に関する補足説明
https://www.rakuten.co.jp/shops/supportnews/info_b/20170518-03.html

最初に、ヘッダーとして表示したいHTMLを作成していただき、
楽天GOLDにアップロードしてください。

次に、スマートフォン用の商品ページ共通説明文に
以下の記述を加えていただくことで、
共通パーツの下から現れる固定ヘッダーとして
表示させることができます。
===== この下の行から ============


#spFloatHeader {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 2;
width: 100%;
}
#rstTopSearch, #ipnsh-header, #topFuncShopPopup {
position: relative;
z-index: 3;
background-color: white;
}

===== この上の行まで ============
※HTMLファイルのURLは、実際のURLにご変更ください。
※styleタグの内容は、外部CSSファイルを利用する形式に変えていただいても構いません。
※iframeタグをdivタグに変えると、ヘッダーの内容を直接HTMLで記載することができます。

ヘッダーの内容を作成できない、楽天GOLDの使い方がわからないなど、
不明な点がございましたらご返信ください。