固定されないスマホのフローティングバナー

Question

お世話になります。

楽天ECコンサルタントより、下記スマホ用フローティングバナー用htmlタグを
「ブランクもそのままコピー＆ペーストして下さい」といただきました。

ところが、各商品ページの下部に貼り付いてはいるのですが固定されません。
他の店舗さんは出来ているのにうちだけが出来ていないそうです。
試行錯誤で""を付けたり外したりしてみるのですが結果は同じです。
過去の質問を拝見しましたがわかりません。
何が原因であるのか教えていただけるでしょうか。
よろしくお願い致します。

Accepted Answer

ECマスターズの田中です。

固定部分の高さが45ピクセルに固定されているものの、
画像ファイルの縦横比が、想定されていた縦の割合より大きかったため、
画面の下にはみ出していることが原因なので、

タグに高さ45ピクセルの指定をしてください。


↓


なお、このようにすると、45ピクセルに高さをおさめようとして
画像が横に延ばされたような状態になります。

画像の引き伸ばしを最小限におさえるために、
縦90ピクセル、横640〜720ピクセル程度の画像ファイルを
改めてご用意いただきますようお願いします。

Answer

ECマスターズの田中です。

※注：
ECコンサルタントから渡されたHTMLソース、および下記内容は
楽天RMSの、禁止タグを入力できるバグを利用しておりますので、
今後、RMSの改修により、使用できなくなる可能性があります。

「floatfooter.css」を拝見したところ、
「#floatFooter」の中に記載されたタグに対しての指定が行われておりました。

いただいたHTMLソースを、

と

で囲むことで、バナーが固定されるようになります。

Answer

田中様

いつもありがとうございます!
バナーの固定はできました。

が、あらたな問題としまして、バナーの下半分が切れてしまいました。
かろうじてクリックは出来るのですが･･･

これは、どのようにすればいいでしょうか？

Answer

田中様

先ほどコンサルタントから電話がありフローティングバナーについて話して
いたのですが、今月26日から"買い物かごはこちらへ"というフローティングバナーに
差し替えられるそうなので、今回は元の様に普通のバナーとして残しておきます。

でも、HTMLソースや方法がわかり、次回から使えると思います。
ありがとうございました!