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

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

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

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

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

１．広告コードを取得する

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

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

<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>

２．コードの追加

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

<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」の部分は任意の半角英数字。

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

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

３．広告コードの修正

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

<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>

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

完成形の広告コード

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

<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 サイトに貼り付けたら、広告が問題なく表示されるかを確認してください。