アドセンスのレスポンシブ広告ユニットのサイズを指定する方法と黄色い余白を非表示にして消す方法

アドセンスのレスポンシブ広告ユニットを使用していると、つぎのような問題があります。

 

▶︎スマホの場合に、レクタングルで表示してほしいときに小さいバナーになってしまうら

 

▶︎パソコンの場合に、コンテンツ幅よりも小さい広告になるとき、余白が黄色く表示されてしまいデザイン的に良くない

 

背景の黄色に関しては、ネットを探すと、CSSで、ins { background: #ff9}を変更する方法が見つかりますが、まだ使い勝手を向上させる方法があります。

 

それは、グーグルが公式に許可している方法で、サイズを指定してやると、いずれも解消できます。

 

support.google.com

 

サンプルコードを掲載します。コードには、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>

 

お役に立ちましたでしょうか。