ヤフー（スマホページ）で一番下に固定バナーを設置したい

Question

お世話になっております。

ヤフーのスマートフォン商品ページで
画面の最下部に固定されるバナーを貼りたいのですが
以下のタグでは表示されませんでした。（※エラーは出ないが何も表示されない）

お手数ですが直すところを教えて頂きたいです。


通常のブラウザ版とアプリと両方表示することは可能でしょうか？

よろしくお願いいたします。

Answer

ECマスターズの田中です。

> お手数ですが直すところを教えて頂きたいです。

確認したところ、横幅（width）と画面下部からの距離（bottom）は
指定されておりましたが、
高さ（height）と画面左右からの距離（left もしくは right）が
指定されておりませんでした。

どんな高さで、もしくは、どの位置に、
表示するかの指定が足りず、表示できていない可能性がございますので、
それぞれスタイルシートに指示の追加をお願いします。

画面横幅問わず、横幅いっぱいに表示する形式であれば、
高さはvw単位でご指定いただくことで、
（横幅からの割合、1vwで横幅の1%）
画面横幅の変化に合わせて伸縮させることができます。
横長すぎる画面で表示した場合に備え、最大値を設定しておくことをオススメします。
例）height:16vw;max-height:100px;

また、左右からの距離はなくなりますので、
left:0px; もしくは right:0px; をご指定ください。

> 通常のブラウザ版とアプリと両方表示することは可能でしょうか？

アプリの商品ページのファーストビューでは、
HTMLの記載できない商品情報のみ掲載される関係から、
バナーを表示させることはできません。
（「商品情報をもっと見る」を押した後のページで表示される可能性はございます）

Answer

ご返信いただきありがとうございます。
アプリ版の画面だと見えないこともあるのですね。承知しました。

ご指摘いただいた部分のタグを編集してみたところ、バナーが横幅100%にならず、画面からはみ出してしまいました。左下を起点にして、横幅に合わせてズームしてほしいのですが…（画像の幅は616ピクセルです）

現在以下のタグをページに入れていますがどの部分が修正が必要でしょうか？
お手数をおかけしますがご教示頂きたいです。よろしくお願いします。

Answer

ECマスターズの田中です。

失礼いたしました、
このままの状態ですと、タグのサイズにかかわらず、
画像ファイルが元のサイズのまま表示されてしまいます。

画像をタグの中におさめるよう、style属性の中に
background-size: contain;
を追記していただきますようお願いします。

Answer

ありがとうございます、微調整して幅ピッタリに置けました。ご助言いただき助かりました。
フォーラム含め今後共参考にさせて頂きます。