昔の情報ですが、改めて。
アドセンスのレスポンシブ広告ユニットを使用していると、つぎのような問題があります。
▶︎スマホの場合に、レクタングルで表示してほしいときに小さいバナーになってしまうら
▶︎パソコンの場合に、コンテンツ幅よりも小さい広告になるとき、余白が黄色く表示されてしまいデザイン的に良くない
背景の黄色に関しては、ネットを探すと、CSSで、ins { background: #ff9}を変更する方法が見つかりますが、まだ使い勝手を向上させる方法があります。
それは、グーグルが公式に許可している方法で、サイズを指定してやると、いずれも解消できます。
サンプルコードを掲載します。コードには、CSSのmedia queries(メディアクエリ)を使用しています。
この指定の仕方では、デバイスの表示幅が481px未満ではレクタングル（300×250）、表示幅が481pxから768pxではバナー中サイズ（468×60）、表示幅が769px以上ではバナー大サイズ（728×90）となります。
数値を変えることで、サイトに合わせた表示設定が可能となります。
▼サンプルコード
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 広告ユニット名 –>
<style type=”text/css”>
.adslot_1 { width: 300px; height: 250px; }
@media (min-width:481px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:769px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class=”adsbygoogle adslot_1″
style=”display:inline-block;”
data-ad-client=”ca-pub-ユーザID”
data-ad-slot=”広告のID”></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
お役に立ちましたでしょうか。