Google AdSenseレスポンシブル広告がレイアウトが崩れる・はまらない時の対処法

Google AdSenseレスポンシブル広告がレイアウトが崩れる・はまらない時の対処法

WordPressで運営するサイトでアドセンスのレスポンシブル広告がうまくはまらない事ってありませんか。私はlionBlogのテーマで数サイト運営しているのですが、引っかかる部分があり調整をしばらく行っていました。

ライオンブログのテーマはカスタマイズできる項目も多く非常に優秀なテーマです。最大限生かすための調整方法をまとめた。出てくる広告のサイズを調整して広告がしっかり表示される方法を忘備録的に残しておきます。

アドセンスのレスポンシブル広告とは

広告の種類は主に4つあります。ディスプレイ広告、インフィード広告、記事内広告、関連コンテンツとなります。

レスポンシブル広告はこの4つの中の広告種類の一つでディスプレイ広告の一つです。ページサイズや表示デバイスに合わせて広告サイズを自動的に調整してくれる優れものです。

HTMLやPHPなどの言語がわからず、コーディングできない人にとっては非常にありがたい広告のシステムです。Google側が意図したとおりに広告を出してくれればいいのですが、Googleが意図したサイズを認識していくれなかったり、レイアウトが微妙にはまらないといった場合は手動での調整が多少必要となります。

レスポンシブル広告のサイズは何で決まっているのか。

レスポンシブル広告のサイズが合わない時は何が起きているのでしょうか。レスポンシブル広告は利用可能なスペースを自動判別し広告サイズを自動調整して収益を得ることができます。この「利用可能なスペースを自動判別」の部分が少し癖があります。アドセンスのヘルプには下記記載があります。

技術的な注意事項
次のようなケースでは、レスポンシブ広告ユニットを正しく機能させるために追加の対応が必要となります。

  • サイトでサードパーティの JavaScript を使用している。たとえば、ページが完全に読み込まれるまで広告を非表示にするスクリプトをサイトが使用しており、このようなスクリプトがレスポンシブ広告コードより先に実行される場合は、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。このような場合は、コードを修正し、CSS メディアクエリを使って広告ユニットのサイズを設定する必要があります。詳しくは、レスポンシブ広告コードの修正方法をご覧ください。
  • 親コンテナに幅が設定されていない。幅が明示的に設定されていない親コンテナ(フローティング要素など)の中にレスポンシブ広告コードを配置している場合、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。このような場合には、コードを修正し、CSS メディアクエリを使って親コンテナのサイズを設定する必要があります。詳しくは、レスポンシブ広告コードの修正方法をご覧ください。
  • 親コンテナの高さが固定または制限されている。レスポンシブ広告はデバイスやブラウザの種類によって高さが異なるため、高さが固定または制限されているコンテナには設置しないでください。レスポンシブ広告の高さに制限を設ける必要がある場合、コードに変更を加え、CSS メディアクエリを使って親コンテナの高さを設定する必要があります。詳しくは、レスポンシブ広告コードの修正方法をご覧ください。
  • https://support.google.com/adsense/answer/9183362?hl=ja&ref_topic=9183242

主に原因になるのがこの部分ですがコーディングができないユーザーにとってはなかなか難しいです。これを見て解決できるようであれば次のステップは必要ありません。結局何すればいいの?という人だけ続きを読んでください。

アドセンスで意図した広告サイズだけを表示させる。

アドセンスの広告で右端が切れたり、しっかりと中央表示できていない時は主な原因は2つあります。

  1. 表示されている広告のサイズが大きすぎる
  2. WordPressテーマの設定でmargin(余白)設定で広告が隠れてしまっている。

この二つでどこに原因があるかで少し対処法が変わっています。今回はコーディングできないユーザー向けなので出てくる広告のサイズを調整して広告がしっかり表示される方法を説明します。

アドセンスのコードを書き換えて出てくる広告のサイズを調整する

アドセンスのコードは書き換えることは問題ない行為ですので、あまり心配せずに挑戦してみましょう。基本的にはGoogleアドセンスのヘルプを見ながら行えばできるはずです。ここでは調整するのにステップに分けてお伝えします。アドセンスのコードは簡単な作りになっていて、そこを書き換えることで出てくる情報を指定することができます。

表示される広告の種類を指定する方法(data-ad-format)

一般的な形状を3種類から指定することができます。「レクタングル」「横長」「縦長」の3種を意図的に選択することができます。ただしこの機能はPCのみが対象となります。正方形がほしい場所にビックバナーやワイドスカイスクレイパーなど出てしまうときに便利な機能です。
下記の場合は全種類から最適なものをGoogleが自動選択して表示してくれます。
data-ad-format=”auto”
しかし次のように値を変更することで。レクタングルのみ表示させることが可能です。
data-ad-format=”rectangle”
縦長の場合は”vertical”、横長の場合は”horizontal”と記載できますので、状況によって出し分けをしましょう。
参考URL:https://support.google.com/adsense/answer/9183460?hl=ja&visit_id=636993559545162854-274259836&rd=1

全幅サイズの広告を表示させない指定方法(data-full-width-responsive)

レスポンシブル広告では全幅サイズの広告を許可することで、収益を高めることができますが、状況によっては全幅広告が表示されるとデザインが崩れると行った自体が発生します。デザインが崩れてしまってはせっかくの広告がクリックされず、結果として収益源につながってしまいます。そこで全幅サイズの広告表示をさせない設定が可能です。
下記のパラメーターを”true”(全幅サイズ許可)と”false”(全幅サイズ禁止)で指定することができます。初期設定では許可担っているため下記のようにパラメーターが設置されています。
data-full-width-responsive=”true”
参考URL:https://support.google.com/adsense/answer/9183460?hl=ja&visit_id=636993559545162854-274259836&rd=1

画面サイズごとに出てくる広告サイズを指定する。(@media)

WordPressでスマホ対応のWEBサイトの場合、レスポンシブなテーマを使っている方がほとんどだと思います。非常に優れたシステムですが、画面サイズによってデザインが可変のため、広告枠のサイズが変わることがあります。そこでデバイスの画面サイズに合わせて広告サイズを指定することができます。コードに<style>タグを追加することで情報をGoogleAdSensに伝えることができます。

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

思ったと通りの広告を出すためのコードをご紹介していきます。表示させたい仕様は下記の4項目です。

  • レクタングルサイズの広告を表示
  • 全幅サイズの広告表示を許可
  • 画面幅 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″
data-ad-format=”rectangle”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

実装の際の注意点

example_responsive_1 のすべてのインスタンスを一意の名前に置き換えます。
ca-pub-XXXXXXX11XXX9 をサイト運営者 ID で置き換えます。
8XXXXX1 を広告ユニット ID で置き換えます。

参考URL:https://support.google.com/adsense/answer/9183363?hl=ja&ref_topic=9183242

上記を対応することで広告サイズをコントロールできます。広告もWEBサイトの要素なのでCSSで表現を変えることが出来るのです。あなたのサイトに合った広告サイズを確認し実装してみてください。