Googleアドセンスのレスポンシブ広告ユニットをディズプレイサイズごとにサイズ指定する方法

f:id:quoqlishkun:20150922102248p:plain

はてなブログのカスタマイズが面白くてしょうがない、くぉ（@QuoQlish）です。

先日もカスタマイズをしていたのですが、昔管理画面から出来たレスポンシブ広告ユニットをサイズ指定する方法が現在も可能だったので紹介します。

何をどうするのか？

以前、Googleアドセンスにレスポンシブ広告ユニットが登場した際には管理画面からサイズ指定したコードを書き出すことが出来ました。

しかし、現在では管理画面からその設定をすることが出来ません。ですが、以下のGoogleのサポートページに可能だと言うことが書かれていましたので試してみます。

support.google.com

サイズ指定するコード

通常のレスポンシブ広告ユニットは以下のようなコードになります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot=“5678"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>

それを下記のように書き換えます。説明は後ほどしていきましょう。

<style type="text/css">
.adslot_1（広告の名前） { width: 300px; height: 250px; }
@media (min-width:680px) { .adslot_1（広告の名前） { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_1（広告の名前）"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || ).push({});</script>

まず、追加されたコードは1行目から4行目にあたる部分です。これは、CSS 3のメディアクエリ機能を使った物で画面サイズごとに適応するCSSを変更するものです。

次に、括弧書きで「広告の名前」と書いた部分です。ここでは「adslot_1」になっていますが、自分で設定した広告の名前を入れましょう。

上記のコード記述であれば、画面横幅が680以上あれば336×280pxの広告が表示され、それ以下であれば300×250が表示されるようになります。