アドセンスのレスポンシブ広告はデフォルトでは、スマホと表示を切り替える設定がいらない代わりに、自由度が低いと思っていました。
けれどレスポンシブ広告は名称通り、設定することで端末ごとに自由に表示される広告を設定できることがわかりました。
参照:AdSense ヘルプ「レスポンシブ広告コードを修正する方法」
アドセンスのレスポンシブ広告でできること
- 形状を指定できる
- 画面幅ごとに表示させたい広告のサイズを指定できる
- 端末によって広告を表示させないことができる
レスポンシブ広告はカスタム広告のような使い方をしたり、条件分岐タグを使用せずとも端末によって任意のサイズの広告を表示させることができるのでとても便利だと思います。
形状を指定する
レスポンシブ広告ではパソコンでレクタングルを表示させたいのに、横長の468×60のバナー広告が表示されてしまうようなことが多いと思います。
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-○○"
data-ad-slot="△△△△"
data-ad-format="auto"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
「data-ad-format=”auto”」と、デフォルトではautoと設定されているので、形状を指定すれば任意の形状を表示させることができます。
例えばverticalで縦長、horizontalで横長、rectangleでレクタングルを表示させることを指定できます。
けれど次の項目のような表示させるサイズを指定すれば、形状を指定するより細かい設定ができると思います。
端末ごとに任意のサイズを指定する
レスポンシブ広告は形状をしてするだけでなく、カスタム広告のように任意のサイズの広告を表示させることができます。
さらに、「レスポンシブ」なので端末ごとに表示させる広告を設定できるので、これほど使い勝手のいい広告タイプはないと思います。
設定方法
<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>
「example_responsive_1」は広告の固有の名称で、「アルファベット・数字・-」を使用して広告の名前を付けます。
「ca-pub-」「data-ad-slot」はそれぞれ運営者ID、広告ユニットIDのことで、作成したレスポンシブ広告のコードに記述されています。
任意の名称と運営者ID・広告ユニットIDを記述したら端末ごとに任意のサイズを表示させるコードの設定は終了です。
表示するサイズの指定方法
<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; } }
この部分で端末ごとに表示する広告サイズを指定します。
「@media(min-width: 800px)」は800px以上の画面幅でPC、@media(min-width: 500px)は500〜799pxの画面幅でタブレット、そして１番上はそれ以下画面幅（スマホ）です。
「min-width」は任意の画面幅を指定できますが、基本的にはこの設定で大丈夫だと思います。
ここではカスタム広告と同じように任意のサイズを指定できます。例えば、記事タイトルの上にバナー広告を表示させたいけれど、記事幅は680px。
ビックバナーは横幅が728pxなのではみ出してしまいます。けれど468pxのバナー広告では小さすぎるという時に、660px×90pxという広告サイズを指定することもできます。
そしてタブレットでは468×60のバナー広告、スマホでは320×100のラージモバイルバナーを表示させたい時は以下のように記述すれば設定できます。
<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: 660px; height: 90px; } }
</style>
これで柔軟なサイズ指定が可能になりますが、カスタム広告の規定に違反したサイズの広告は指定できません。
矢印右AdSenceヘルプ「カスタム広告ユニットについて」
特定の端末で広告を非表示にする
表示させたくない画面幅で「display: none;」と指定すれば、その端末で広告を表示させないことができます。
たとえばスマホでその位置に表示させると規約違反になってしまう場合、以下のように記述すればスマホ画面で表示させないことができます。
.example_responsive_1 { display: none; }
まとめ
レスポンシブ広告を利用すればテーマを編集して条件分岐タグを使用せずとも、端末ごとに表示させる広告を指定できます。
そのため記事本文中やウィジェットのテキストにアドセンスのコードを記述する場合でもPC表示とスマホ表示を切り替えられます。
スマホ対応が必須の現在、レスポンシブ広告は柔軟な指定ができるのでとても便利だと思います。
さらに詳しい設定方法はアドセンスヘルプに書かれています。
AdSense ヘルプ「レスポンシブ広告コードを修正する方法
今日のたつじんへの一歩
たつじんｗ スマホ対応させる必要があるのはテーマだけじゃないので大変です（笑）
