フローティングバナー設置方法

Question

スマホページ上部にある検索窓から他店への流出を防ぐためにフローティングバナーを設置したいと考えております。下記ページのようなフローティングバナーにしたいと思っております。http://item.rakuten.co.jp/e-zakkamania/32140-1003370設置につきまして２点質問がございます。◆スクロール時にバナーを半透明にする方法。◆バナーを２段にして、それぞれの段にカテゴリなどへのリンク先を設置する方法。お忙しい中お手数をお掛け致しますがよろしくお願い致します。

Answer

ECマスターズの田中です。＞◆スクロール時にバナーを半透明にする方法。バナーを半透明にするためには、フローティングバナーへのCSSに、透明度の指定を加えてください。まなさんの店舗の場合、https://forum.ec-masters.net/post_view.php?id=1576上記URLの回答と同じ方法をご利用されておりますので、CSSファイル内、「.spFixedBanner」への規則の中に、opacity: 0.9;という属性を加えていただければ結構です。（数字は、0（完全透明）〜1（不透明）の間の小数でご指定ください）この場合、「スクロール時に」という条件指定はできませんが、いただいた商品ページの場合も常に半透明になっており、本来ヘッダーにあるはずのパーツを画面外に追いやるCSSが適用されているためバナーの裏に何もないように見えております。本来のパーツを非表示にしたい場合は、CSS内にbody #ipnsh-header, body #rstTopSearch { visibility: hidden; }という規則をくわえてください。さらに、body #ipnsh-header { height: 100px }という規則を加えていただくことで、ページ上部に出来た空白の幅を拡げることができますので、バナーがページ内容に被った際にご利用ください。（100px の数字を上下させることで、幅を調整できます）＞◆バナーを２段にして、それぞれの段にカテゴリなどへのリンク先を設置する方法。

と

の間、バナー画像の直後に、タグを使って表を作っていただくことで設置できます。下記のような形式になります。===== この下の行から ================

カテゴリ1つ目

カテゴリ2つ目

カテゴリ3つ目

カテゴリ4つ目

===== この上の行まで ================

Answer

ご回答ありがとうございます！度々の質問で申し訳ございません。質問が２つございます。①下記のスマホページのように、ページ上部のオリジナル部分を、スクロールしたら見えなくするにはどのような設定が必要でしょうか？http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/②スマホページ上部にある楽天仕様のメニューと店舗名の２段も見えなくしたいのですがどのような設定が必要でしょうか？お忙しい中お手数をお掛け致しますがよろしくお願い致します。

Answer

ECマスターズの田中です。＞①＞下記のスマホページのように、ページ上部のオリジナル部分を、スクロールしたら＞見えなくするにはどのような設定が必要でしょうか？CSSファイル内、「.spFixedBanner」への規則の中にあるdisplay: fixed;をdisplay: absolute;にご変更ください。＞②＞スマホページ上部にある楽天仕様のメニューと店舗名の２段も見えなくしたいのですが＞どのような設定が必要でしょうか？下記規則を加えると、店舗名より上のパーツが全て非表示になります。body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }

Answer

設置できました！助かりました。ありがとうございます！

フローティングバナー設置方法

カテゴリーから探す