iscle [イズクル] - あなたの生活に役立つネタを!

AdSenseでレスポンシブ広告のサイズ指定をする方法と手順

竹中文人
執筆者:
[最終更新日]2016/10/19
[カテゴリ]アドセンス

Google AdSenseでは広告コードを改変することが禁止されており、改変すればポリシー違反となってしまいます。しかし一部の広告に関しては広告コードを改変(修正)することが許可されているものがあります。その一つが『レスポンシブ広告ユニット』です。

レスポンシブタイプの広告ユニットは、貼り付けたスペースの横幅等に合わせて自動で広告サイズが変わるようになっています。しかし自分の思ったような広告サイズが表示されるとは限らず、例えばサイドバーに 336 x 280 の『レクタングル(大)』を表示したいのに 468 x 60 の細長い『バナー広告』が表示されることがあります。

このような場合だと収益性も低くなる可能性があります。逆に適切なサイズの広告が表示されれば収益性を高めることが可能です。このページでは意図したサイズが表示されるように広告コードを修正する方法をご紹介致します。

レスポンシブ広告を修正してサイズ指定

1.広告コードを取得する

最初は通常と変わらずレスポンシブ広告ユニットを作成します。
レスポンシブ広告ユニットの作成

広告スタイル等はいつもと同じように設定・作成し、広告コードを取得してください。下記のようなコードになると思います。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サイトA-レスポンシブ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

スポンサーリンク

2.コードの追加

“1”で作成したコードのに、下記のコードを追加します。

<style>
.responsive-test { width: 320px; height: 100px; }
@media(min-width: 470px) { .responsive-test { width: 468px; height: 60px; } }
@media(min-width: 730px) { .responsive-test { width: 728px; height: 90px; } }
</style>

※「responsive-test」の部分は任意の半角英数字。

上記の場合だと、下記の広告が表示されるようになります。

  • 画面横幅 470px 未満:320×100の『ラージモバイルバナー』
  • 画面横幅 470px~729x:468×60『バナー広告』
  • 画面横幅 730px 以上:728×90『ビッグバナー』

広告サイズや画面の横幅は任意でカスタマイズしてください。

3.広告コードの修正

“1”で作成したコードの一部を修正します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サイトA-レスポンシブ -->
<ins class="adsbygoogle responsive-test"
style="display:inline-block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3箇所を修正してください。

  • 「adsbygoogle」の後ろに半角スペースを開けて“2”で記載したコードを追加。※「.」は不要。
  • 「display:block」を「display:inline-block」に修正。
  • 「data-ad-format=”auto”」を削除。

完成形の広告コード

上記の手順で作成したコードです。

<style>
.responsive-test { width: 320px; height: 100px; }
@media(min-width: 470px) { .responsive-test { width: 468px; height: 60px; } }
@media(min-width: 730px) { .responsive-test { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サイトA-レスポンシブ -->
<ins class="adsbygoogle responsive-test"
style="display:inline-block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

画面横幅に対応する広告サイズ等はご自身のサイトに合わせて修正をしてください。また実際に広告をWebサイトに貼り付けたら、広告が問題なく表示されるかを確認してください。

関連記事(一部広告含む)