【Yahoo】スマホサイトでのフローティングバナー設置について

Question

お世話になっております。
Yahooの商品ページに、
サイドバナーを取り付けたいと考えています。
他店様の過去質問にて、
スマホ用商品ページに貼り付けるタグを
参考にさせていただいたのですが



⇒うまくいかず、リンク切れの画像が
商品ページに差し込まれる形になってしまいます。
現在、当店の「ke-6」商品に適用しています。
アドバイスいただけたらと思います。
宜しくお願いいたします。

Answer

ECマスターズの田中です。

表示位置と横幅の設定はされておりますが、
高さ（height）の設定がされておらず、0とみなされた結果、
非表示に等しい状態となっております。

style属性に
height:120px;
のように、高さの設定を追加していただきますようお願いします。

Answer

お世話になっております。
ご回答ありがとうございます。




に変更してみましたが、表示されませんでした…
数値がおかしいのでしょうか。

Answer

ECマスターズの田中です。

私にて実際のページを確認したところ、
未だにheightの指定がされておりませんでした。
反映に時間がかかっている可能性がございます。

また、「sidebanner_09.png」は横幅120x高さ120（px）の画像ですが、
それに比べてタグの大きさが非常に小さくなっております。

小さい領域の中に画像を表示させるために、
background-size:cover;
のような指定を追記していただきますようお願いします。
https://developer.mozilla.org/ja/docs/Web/CSS/background-size

Answer

お世話になります。



上記のように修正し、
スマホ版プレビューで見ると
４分の１ほどに見切れた状態に更新されましたが
スマホで実際に見ると欠片も表示されず…です。

今更なのですが、追加する場所は
添付の場所で合っていますでしょうか？###HR######IMG02882d076a5b9bab91264017cdcbf5f6b.jpegIMG0######BR###

Answer

ECマスターズの田中です。

私にてただいま確認したところ、
最新のソースが反映され、
アイコンが４分の１ほど見切れた状態で表示されました。

改めて動作を確認したところ、
background-size の優先度を上げることで
初めて反映されることがわかりましたので、
cover の後ろに「 !important;」を追記して
background-size:cover !important;
と修正していただきますようお願いします。

> 今更なのですが、追加する場所は
> 添付の場所で合っていますでしょうか？
はい、追加場所は合っております。

Answer

お世話になっております。
教えていただいたタグで反映することができました。
迅速なご対応、ありがとうございました。