現在のレスポンシブ広告コードでご希望どおりの広告ユニットを作成できない場合は、レスポンシブ サイトのニーズに応じて広告コードをご修正ください。この記事の例では、こうした修正を正しく行う方法を示しています。
準備:
- CSS メディアクエリのご使用や広告コードの変更の経験が初めての場合は、画面の幅ごとに正確な広告ユニットサイズを指定する場合の例を使って修正してください。
- CSS メディアクエリのご使用や広告コードの変更に精通されている場合は、レスポンシブ広告コードの高度な機能の例を使って修正してください。
注: この記事で説明されている例は、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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>このサンプルコードをサイトに適用するには:
- AdSense アカウントでディスプレイ広告ユニットを作成します。その際、[広告サイズ] セクションの [レスポンシブ] は選択したままにします。レスポンシブ広告コードから次の情報をメモします。
- パブリッシャー ID（例: ca-pub-1234567890123456）
- 広告ユニット ID（
data-ad-slot）（例: 1234567890）
- サンプルコードで次を行います。
example_responsive_1のすべてのインスタンスを一意の名前（Home_Page、front_page_123 など）に置き換えます。注:- 固有の名前には英字（A～Z）、数字、アンダースコアのみ使用できます。最初の文字は英字にしてください。
- サンプルコードをサイトに適用する際は、毎回異なる固有の名前を使用してください。
ca-pub-1234567890123456をパブリッシャー ID に置き換えます。8XXXXX1を広告ユニット ID で置き換えます。
- 画面の幅ごとに指定する広告ユニットサイズを決めます。
- サンプルコードの既存の広告ユニットサイズを使用する場合は、何も変更を加える必要はありません。
- 画面の幅ごとに異なる広告ユニットサイズを指定する場合:
- 画面幅 500px 未満: 広告ユニットの幅
320pxと高さ100pxを希望の幅と高さに置き換えます。 - 画面幅 500px～799px: 広告ユニットの幅
468pxと高さ60pxを希望の幅と高さに置き換えます。 - 画面幅 800px 以上: 広告ユニットの幅
728pxと高さ90pxを希望の幅と高さに置き換えます。
- 画面幅 500px 未満: 広告ユニットの幅
- 修正した広告コードをコピーし、広告を表示したいページの HTML ソースコードに貼り付けます。
ヒント: 広告コードを配置したら、各種のデバイスや画面で広告をテストして、レスポンシブ機能が正しく動作しているか確認することをおすすめします。
レスポンシブ広告コードの高度な機能の例
Google のレスポンシブ広告コードで、ご希望どおりの広告ユニットを作成できない場合は、広告コードを修正し、広告ユニットの正確なサイズを CSS で指定できます。
注: この機能は、広告コードを修正する十分な技術をお持ちの場合にのみご利用ください。
幅の拡張範囲と高さの固定値を指定する
レスポンシブ広告コードを修正して、広告ユニットの幅の拡張範囲と高さの固定値を CSS で指定できます。次の例で修正方法をご確認ください。
幅の拡張範囲と高さの固定値を指定する場合の例
次の例は、レスポンシブ広告コードを修正して高さを 90 ピクセルに固定し、幅が 400～970 ピクセルの範囲で変わるように指定する方法を示すものです。
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></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:block;"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
この例の
@media ルールは CSS3 構文で、すべての最新ブラウザでサポートされています。なお、外部スタイルシートで CSS を使って広告ユニットのサイズを設定することは、正式にはサポートされていません。広告ユニットを隠す
小型のモバイル デバイスなどで、広告をまったく表示しないようにしたいときは、パラメータに CSS メディアクエリを設定し、広告リクエストが作成されないようにして、広告が表示されないようにします。次の例で修正方法をご確認ください。
特定の画面サイズのときに広告を隠す場合
決まった画面サイズにのみ広告を表示するには、CSS3 メディアクエリを使用して特定の画面サイズで広告を隠すように広告コードを変更します。変更方法については、次の例をご覧ください。
<style type="text/css">
.adslot_1 { display: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-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
この例では、画面の幅が 400 ピクセル未満の場合は広告が表示されません。
