- 更新日: 2016年4月12日
- Web & IT
AdSense(アドセンス)でレスポンシブ広告ユニットのカスタマイズ
レスポンシブデザインでのアドセンス活用について調べていたら、レスポンシブ広告ユニットというのを使って広告コードをカスタマイズすると、レスポンシブデザインなウェブサイトに柔軟に対応できることを知りました。
レスポンシブ広告ユニットを作成する – AdSense ヘルプ
上記リンク先 Google の AdSense ヘルプのページに詳細が掲載されていますが、レスポンシブ広告ユニットを使うと限定的にコードの修正を行え、利用する広告の形状やサイズを指定できるそうです。
まずはレスポンシブ広告ユニットを作成する
Google Adsense にログインして、まずはレスポンシブ広告ユニットを作成します。以下のような広告コードを取得できるはずです。
デフォルトのレスポンシブ広告ユニットのコード
1 2 3 4 5 6 7 8 9 10 |
<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> |
このままでも動作しますが、デフォルトの状態だとレスポンシブデザインに合わせて色んなサイズの広告が表示されてしまう。コードを修正することによって、端末のサイズに合わせて、自分が使いたい広告ユニットの形状やサイズを指定することができます。
rectangle, vertical, horizontal など形状で指定
ヘルプの「横長の形状を指定する場合」に該当する指定方法です。ヘルプの例では横長の形状なので、horizontal が指定されていますが、ここでは rectangle(レクタングル:長方形)の広告が表示されるように変更してみます。上のデフォルトの広告コードを修正して、data-ad-format を “auto” から “rectangle” に変更することで実現できます。
rectangle なレスポンシブ広告ユニットのコード
1 2 3 4 5 6 7 8 9 10 |
<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> |
data-ad-format の値は “rectangle”(レクタングル)、”vertical”(縦長)、”horizontal”(横長)のいずれか、またはこれらをカンマで区切った組み合わせ(”rectangle, horizontal” など)を指定できます。
CSS で広告ユニットのサイズを指定
次に、ヘルプの「CSS を使って正確なサイズを指定する場合」に相当する方法です。ヘルプの例の通り、以下のようにコードを修正してみますと…
CSS でサイズを指定したコード
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
広告コードを上記のように修正すると…
画面横幅のサイズが 〜500px : 320 x 100
500px〜800px : 468 x 60
800px〜 : 728 x 90
という風に画面サイズに合わせて、表示される広告ユニットのサイズが変わります。
実際に設定してみた広告コード
スマートフォン画面(横幅400px未満)では、レクタングル中(300 x 250)を表示させる。横幅 400px 以上のPC・タブレットなどの端末ではレクタングル大(336 x 280)を表示させるように設定してみました。
スマホでレクタングル中を表示させるコード
1 2 3 4 5 6 7 8 9 10 |
<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> |
上記のコードで、スマホ(400px 未満)ではレクタングル中(300 x 250)、それ以上ならレクタングル大(336 x 280)と、表示される広告ユニットのサイズが自動で対応されます。コードを修正する際には、AdSense のポリシー違反にならないように注意する必要があります。
- Web & IT の関連記事
- レバテックフリーランスでImagictを紹介して頂きました!
- Amazonブラウズノード一覧
- IT/WEBエンジニアの転職サイト!年収アップ期待のエージェント特集
- Googleドライブ容量が無料で増える、セキュリティ診断でプレゼント
- 初心者でもプログラミング学習!オンラインスクール講座&ITブートキャンプ特集
- フリーランスやフリーエンジニアの仕事探し!高報酬の求人案件エージェント特集
- 新世紀エヴァンゲリオンの漫画をAmazon Kindleの1冊50円セールでまとめ買いした
- アマゾンKindleストア3周年記念セールで技術書など電子書籍が50%以上OFF
- Google Adsenseで表示させたくない広告をブロックする
- Amazon Kindle本ストアでのポイント使用方法
- 初回公開日: 2015年4月8日
Leave Your Message!