Google AdSenseのレスポンシブ広告ユニットのサイズや形状をCSSを用いて指定する方法

Google AdSenseのレスポンシブ広告ユニットは、表示されている端末(画面)の機能に応じて、自動でサイズを調整してくれるので便利ですが、ここはどうしても長方形で表示させたい、若しくはどうしても縦長で表示させたくない…といったこともあると思います。

レスポンシブ広告ユニットの場合、以下公式サイトにあるように、サイズを指定するなど修正を加えてもポリシーには反しません。

https://support.google.com/adsense/answer/3543893?vid=1-635755850896601588-7906886932018929671#adv

では、サイズや形状をを指定してみましょう。
主に以下2通りがあります。

1・形状を指定する

通常のレスポンシブ広告ユニットのコード
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle' 
data-ad-client='ca-pub-*********' 
data-ad-format='auto'
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
この中の「data-ad-format」で形状を指定できます。
auto : 自動
rectangle : 長方形
horizontal : 横長
vertical : 縦長

(例)横長を指定する場合
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle' 
data-ad-client='ca-pub-*********' 
data-ad-format='horizontal' 
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2・細かくサイズを指定する

上記の場合、形状の指定だけで、細かいサイズの指定はできません。
そんなときはCSSを使用します。

まず、通常のレスポンシブ広告ユニットのコードに「class名」をつけましょう。
adsbygoogleの後に半角スペースを空け、任意のクラス名を記述(今回は例として「test01」を記述)。
また、サイズはスタイルシートで指定するので、青字にしたdata-ad-formatは削除しても構いません。
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle test01' 
data-ad-client='ca-pub-*********' 
data-ad-format='auto'
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
次にスタイルシートを書きます。

広告サイズの指定はGoogleが指定するサイズのみなので、以下のサイトからお好みのサイズを選びましょう。

https://support.google.com/adsense/answer/6002621?hl=ja

今回は例として300×250を指定しました。

CSS

<style type="text/css">
.test01 { width: 300px; height: 250px; }
</style>




最後に応用編として、メディアクエリを用いてデバイスごとにサイズを指定する方法もあります。

(例) デバイスの画面横幅が480px未満の場合は広告サイズ320×100を表示し、画面横幅がそれ以上の場合は広告サイズ336×280を表示する場合。
<style type="text/css">
.test01  { width: 320px; height: 100px; } /* デフォルトのサイズ */
@media (min-width:480px) { .test01 { width: 336px; height: 280px; } } /* 画面横幅480px以上の場合のサイズ */
</style>

メディアクエリについては以下の過去記事を参照。
http://bloggercustoman.blogspot.com/2015/08/blogger-2.html

Related Posts

Previous
Next Post »