広告ユニット

レスポンシブ広告コードを修正する方法

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブ サイトの要件を満たすように広告コードを修正してください。次の例に従うと、広告コードを正しく修正することができます。

重要:

: この記事で説明されている例は、AdSense 広告コードの許可されている変更方法です。こうした方法でレスポンシブ広告コードを修正した場合、AdSense プログラム ポリシーに違反することはありません。

画面の幅ごとに正確な広告ユニットサイズを指定する場合の例

この例ではレスポンシブ広告コードを修正し、広告ユニットサイズをモバイル、タブレット、パソコンの 3 種類の画面の幅に合わせるように設定します。CSS メディアクエリを使用したことや、AdSense 広告コードを修正したことがなくても、この例を使って修正することができます。

画面の幅ごとに正確な広告ユニットサイズを指定する広告コードの例:

  • 画面幅 500px 未満: 広告ユニット 320×100
  • 画面幅 500px~799px: 広告ユニット 468×60
  • 画面幅 800px 以上: 広告ユニット 728×90
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } } 
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このサンプルコードをサイトに適用するには:

  1. AdSense アカウントでディスプレイ広告ユニットを作成します。その際、[広告サイズ] セクションの [レスポンシブ] は選択したままにします。レスポンシブ広告コードから次の情報をメモします。
    • サイト運営者 ID(例: ca-pub-1234567891234567
    • 広告ユニット ID(data-ad-slot)(例: 1234567890
  2. サンプルコードで次を行います。
    • example_responsive_1 のすべてのインスタンスを一意の名前(Home_Pagefront_page_123 など)に置き換えます。
      :
      • 固有の名前には英字(A~Z)、数字、アンダースコアのみ使用できます。最初の文字は英字にしてください。
      • サンプルコードをサイトに適用する際は、毎回異なる固有の名前を使用してください。
    • ca-pub-XXXXXXX11XXX9 をサイト運営者 ID で置き換えます。
    • 8XXXXX1 を広告ユニット ID で置き換えます。
  3. 画面の幅ごとに指定する広告ユニットサイズを決めます。
    • サンプルコードの既存の広告ユニットサイズを使用する場合は、何も変更を加える必要はありません。
    • 画面の幅ごとに異なる広告ユニットサイズを指定する場合:
      • 画面幅 500px 未満: 広告ユニットの幅 320px と高さ 100px を希望の幅と高さに置き換えます。
      • 画面幅 500px~799px: 広告ユニットの幅 468px と高さ 60px を希望の幅と高さに置き換えます。
      • 画面幅 800px 以上: 広告ユニットの幅 728px と高さ 90px を希望の幅と高さに置き換えます。
  4. 修正した広告コードをコピーし、広告を表示したいページの HTML ソースコードに貼り付けます。
    : 広告コードを配置したら、各種のデバイスや画面で広告をテストして、レスポンシブ機能が正しく動作しているか確認することをおすすめします。

レスポンシブ広告コードの高度な機能の例

Google のレスポンシブ広告コードで、ご希望どおりの広告ユニットを作成できない場合は、広告コードを修正し、広告ユニットの正確なサイズを CSS で指定できます。

: この機能は、広告コードを修正する十分な技術をお持ちの場合にのみご利用ください。

幅の拡張範囲と高さの固定値を指定する

レスポンシブ広告コードを修正して、広告ユニットの幅の拡張範囲と高さの固定値を CSS で指定できます。次の例で修正方法をご確認ください。

幅の拡張範囲と高さの固定値を指定する場合の例
この例ではレスポンシブ広告コードを修正し、高さの固定値を 90 ピクセル、幅の拡張範囲を 400~970 ピクセルに指定しています。
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

画面の幅ごとに正確なサイズを指定する

レスポンシブ広告コードを修正して、正確な広告ユニットのサイズを CSS で指定することができます。修正方法は以下のとおりです。

画面の幅ごとに正確なサイズを指定する場合の例
各種デバイスでのレスポンシブ サイトに最適な広告ユニットのサイズがわかれば、CSS3 メディアクエリを使ってレスポンシブ広告ユニットのサイズを設定することができます。CSS3 メディアクエリを使用するよう広告コードを修正する方法については、次の例をご覧ください。
<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-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
この例の @media ルールは CSS3 構文で、すべての最新ブラウザでサポートされています。古いブラウザ(Internet Explorer 7 以前など)でも正しく表示されるようにするには、最初にデフォルトのサイズを指定することをおすすめします。そうすれば、メディアクエリがサポートされていない場合でも広告が表示されます。なお、外部スタイルシートで CSS を使って広告コードのサイズを設定することは、正式にはサポートされていません。

広告ユニットを隠す

小型のモバイル デバイスなどで、広告をまったく表示しないようにしたいときは、パラメータに CSS メディアクエリを設定し、広告リクエストが作成されないようにして、広告が表示されないようにします。次の例で修正方法をご確認ください。

特定の画面サイズのときに広告を隠す場合
決まった画面サイズにのみ広告を表示するには、CSS3 メディアクエリを使用して特定の画面サイズで広告を隠すように広告コードを変更します。変更方法については、次の例をご覧ください。
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@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"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

この例では、画面の幅が 400 ピクセル未満の場合は広告が表示されません。

コードはこのように修正できますが、必ず広告の配置に関するポリシーに準拠するようにしてください。なお、広告コードの変更プログラム ポリシーにより制限されていますのでご注意ください。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。