スマホ固定バナーの件（上部）

Question

お世話になっております。

スマホの全商品ページ上部にリンク付き固定バナーを
貼り付けたくて以前の質問を拝見したのですが
一番上部に設置したい場合、「画面下からの距離」
の数値は幾つが適切でしょうか？

よろしくお願いします。

===== この下の行から ============
 .spFixedBanner {
 display: block;
 position: fixed;
 right: 0;
 bottom: 画面下からの距離px;
 z-index: 999;
 width: 画像の横幅px;
 height: 画像の縦幅px;
 }
 ===== この上の行まで ============
※画面下からの距離、画像の横幅、画像の縦幅は、実際の値（半角数字）にご変更ください。

Answer

ECマスターズの田中です。

画面上端に固定される場合は、
bottom: 画面下からの距離px;
を
top: 0px;
に変更することで、「画面上端から0ピクセル」という指定をすることができます。

Answer

早々のご返信ありがとうございました！

Answer

お世話になっております。

固定バナーを上下に設置したいのですが、
上下に設置する為の下記cssファイルをそれぞれ作成して
ゴールドページにアップし、

===== この下の行から ================
 .spFixedBanner img{
 display: block;
 position: fixed;
 right: 0;
 bottom: 0px;
 z-index: 999;
 width: 100%;
 }
 ===== この上の行まで ================


===== この下の行から ============
 .spFixedBanner {
 display: block;
 position: fixed;
 right: 0;
top: 0px;
 z-index: 999;
 width: 100%;
 }
 ===== この上の行まで ============

下記HTMLをスマホ商品ページ設定の該当箇所に張り付けて
やってみたのですが、上部にしか表示されませんでした。
どのようにすれば上下に表示されますか？
よろしくお願いします。

------------------------------------------------------

Answer

ECマスターズの田中です。

いただいたタグの場合、
上端用のタグにも下端用のタグにも
全く同じスタイルシートが適用されてしまいますので、
それぞれ分けて指定されるようにしてください。

HTMLタグに含まれる class="spFixedBanner" のうち、
1つ目を class="spBottomFixedBanner"
2つ目を class="spTopFixedBanner"
にご変更いただくと、
それぞれのclassに別々の指定ができるようになりますので、
CSS内の
.spFixedBanner img{ を .spBottomFixedBanner img { に、
.spFixedBanner { を .spTopFixedBanner img { に
ご変更いただくことで、
上下それぞれへの指定がかかるようになります。

なお、 smp-bana.css と smp-bana-top0.css の内容は、
どちらか１つのファイルにまとめていただいても結構です。

Answer

いつもご丁寧にお答え頂きありがとうございます。
先ほど設定が完了しました。

Answer

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