【Labs】Google Adsenseがレスポンシブデザインに対応(CSS3版)

こんにちは（・∀・）

以前【Labs】Google Adsenseがレスポンシブデザインに対応しました...を投稿をしましたが、その時はJavascriptで広告サイズを変更する仕様でした。最近Google Adsenseのサイトを確認しましたらCSS3のメディアクエリで広告サイズを変更するコード(ベータ版)が出ておりましたので今日はそのご紹介です。

レスポンシブデザイン

ただし、レスポンシブと言ってもページを読み込んだ後にブラウザのサイズを変更しても広告サイズは自動では変更されず読み込み時点での広告サイズが表示されます。同様にモバイル端末でポートレート表示後にランドスケープにしても広告サイズは変更されませんがいづれ対応していくそうです。

レスポンシブ広告ユニットについて
レスポンシブ広告ユニットを作成する

【設置方法】

Google Adsenseのページで新しい広告ユニットをクリックします。広告サイズの中からレスポンシブ広告ユニットを選択して広告を作成します。

広告を作成しましたら、コードを取得します。コードには自動でサイズ変更するスマートサイズ(推奨)と自分でCSSのサイズ設定をするアドバンス(コード変更が必要)があります。

スマートサイズ(推奨)の場合、モードの中のスマートサイズ(推奨)を選択してコードを取得、そのコードをそのまま使用します。

広告コード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ広告ユニット -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="xx-xxx-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"
  data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告のタイプを指定する事もできます。

data-ad-formatの部分をdata-ad-format="horizontal"で横タイプ、data-ad-format="vertical"で縦タイプ、data-ad-format="rectangle"でレクタングル、data-ad-format="auto"で全指定、複数指定したい場合はdata-ad-format="horizontal, rectangle"の様にカンマで区切って指定します。

data-ad-format="horizontal"

アドバンス(コード変更が必要)の場合、モードの中のアドバンス(コード変更が必要)を選択してコードを取得、コードの中のメディアクエリのサイズ部分を変更して使用します。

広告コード

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ広告ユニット -->
<ins class="adsbygoogle my_adslot"
  style="display:inline-block"
  data-ad-client="xx-xxx-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

styleの部分を変更します。

画面横幅のサイズと広告のサイズをここで調整します。

スマートサイズ(推奨)の場合、親要素の横幅が指定されていないと広告が正しく表示されない様です。親要素のサイズを指定するかアドバンス(コード変更が必要)にすると広告が正しく表示されます。