検索
検索をクリア
検索終了
Google アプリ
メインメニュー

広告コードの導入

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

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

重要:

この記事で説明されている例は、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_Page、front_page_123 など)で置き換えます。
      :
      • 固有の名前には英字(A~Z)、数字、アンダースコアのみ使用できます。最初の文字は英字にしてください。
      • サンプルコードをサイトに適用する際は、毎回異なる固有の名前を使用してください。
    • ca-pub-XXXXXXX11XXX9 をサイト運営者 ID で置き換えます。
    • 8XXXXX1 を広告ユニット ID で置き換えます。
  3. 画面の幅ごとに指定する広告ユニットサイズを決めます。
    • サンプルコードの既存の広告ユニットサイズを使用する場合は、何も変更を加える必要はありません。
    • 画面の幅ごとに異なる広告ユニットサイズを指定する場合:
      • 画面幅 500px 未満: 広告ユニットの幅 320px と高さ 100px を希望の幅と高さに置き換えます。
      • 画面幅 500px~799px: 広告ユニットの幅 468px と高さ 60px を希望の幅と高さに置き換えます。
      • 画面幅 800px 以上: 広告ユニットの幅 728px と高さ 90px を希望の幅と高さに置き換えます。
  4. 修正した広告コードをコピーし、広告を表示したいページの HTML ソースコードに貼り付けます。
    広告コードを配置したら、各種端末や画面で広告をテストして、レスポンシブ機能が正しく動作しているか確認することをおすすめします。

トップへ戻る

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

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できない場合は、広告コードを修正して、一般的な形状(横長、縦長、レクタングル)のいずれかを指定して使用するか、または正確な広告ユニットのサイズを CSS で指定して使用することができます。

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

一般的な形状を指定する場合

広告コードを修正して、一般的な形状(横長、縦長、レクタングル)のいずれかを指定することができます。修正方法は以下のとおりです。

横長の形状を指定する場合
レスポンシブ広告コードを修正して広告ユニットに一般的な横長の形状を指定する方法については、次の例をご覧ください。
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

デフォルトでは、レスポンシブ広告コードの data-ad-format タグには "auto" という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を "rectangle"(レクタングル)、"vertical"(縦長)、"horizontal"(横長)、またはこれらをカンマで区切って組み合わせた値("rectangle, horizontal" など)に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。

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

レスポンシブ広告コードを修正して、広告ユニットの幅の拡張範囲と高さの固定値を 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 ピクセル未満の場合は広告が表示されません。

このような柔軟な操作が可能ですが、広告の配置に関するポリシーに違反しないようにご注意ください。プログラム ポリシーでは、コードの修正は限定的にしか許可されていません

トップへ戻る

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。