更新日: 2016年4月12日
Web & IT

AdSense（アドセンス）でレスポンシブ広告ユニットのカスタマイズ

レスポンシブデザインでのアドセンス活用について調べていたら、レスポンシブ広告ユニットというのを使って広告コードをカスタマイズすると、レスポンシブデザインなウェブサイトに柔軟に対応できることを知りました。

レスポンシブ広告ユニットを作成する – AdSense ヘルプ

上記リンク先 Google の AdSense ヘルプのページに詳細が掲載されていますが、レスポンシブ広告ユニットを使うと限定的にコードの修正を行え、利用する広告の形状やサイズを指定できるそうです。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

まずはレスポンシブ広告ユニットを作成する

Google Adsense にログインして、まずはレスポンシブ広告ユニットを作成します。以下のような広告コードを取得できるはずです。

デフォルトのレスポンシブ広告ユニットのコード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- unit name -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****"
     data-ad-slot="*****"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-*****"

data-ad-slot="*****"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

このままでも動作しますが、デフォルトの状態だとレスポンシブデザインに合わせて色んなサイズの広告が表示されてしまう。コードを修正することによって、端末のサイズに合わせて、自分が使いたい広告ユニットの形状やサイズを指定することができます。

rectangle, vertical, horizontal など形状で指定

ヘルプの「横長の形状を指定する場合」に該当する指定方法です。ヘルプの例では横長の形状なので、horizontal が指定されていますが、ここでは rectangle（レクタングル：長方形）の広告が表示されるように変更してみます。上のデフォルトの広告コードを修正して、data-ad-format を “auto” から “rectangle” に変更することで実現できます。

rectangle なレスポンシブ広告ユニットのコード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- unit name -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****"
     data-ad-slot="*****"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-*****"

data-ad-slot="*****"

data-ad-format="rectangle"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

data-ad-format の値は “rectangle”（レクタングル）、”vertical”（縦長）、”horizontal”（横長）のいずれか、またはこれらをカンマで区切った組み合わせ（”rectangle, horizontal” など）を指定できます。

CSS で広告ユニットのサイズを指定

次に、ヘルプの「CSS を使って正確なサイズを指定する場合」に相当する方法です。ヘルプの例の通り、以下のようにコードを修正してみますと…

CSS でサイズを指定したコード

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="ca-pub-*****"
     data-ad-slot="*****" ></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

.adslot_1 { width: 320px; height: 100px; }

@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

</style>

<ins class="adsbygoogle adslot_1"

style="display:inline-block;"

data-ad-client="ca-pub-*****"

data-ad-slot="*****" ></ins>

広告コードを上記のように修正すると…

画面横幅のサイズが〜500px ： 320 x 100
500px〜800px ： 468 x 60
800px〜： 728 x 90

という風に画面サイズに合わせて、表示される広告ユニットのサイズが変わります。

実際に設定してみた広告コード

スマートフォン画面（横幅400px未満）では、レクタングル中（300 x 250)を表示させる。横幅 400px 以上のPC・タブレットなどの端末ではレクタングル大（336 x 280）を表示させるように設定してみました。

スマホでレクタングル中を表示させるコード

<style type="text/css">
.adslot_2 { width: 300px; height: 250px; }
@media (min-width:400px) { .adslot_2 { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_2"
     style="display:inline-block;"
     data-ad-client="ca-pub-*****"
     data-ad-slot="*****" ></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>