Cocoonでアドセンスのスマホ広告の左右が切れる場合の対処法

CocoonでGoogleアドセンスの広告が、スマホ表示時に左右端が切れて表示されない問題の対処法です。

スマホで広告の左右が切れてしまう

Cocoonでアドセンスの広告を表示するとPCでは問題ありませんが、スマホでは左右が切れて表示されてしまいます。

以下が左右が切れて表示されている状態。左右の広告枠線が表示されていません。

以下が正常に表示されている状態。画面端に接触するまでいっぱいに表示されています。

左右が切れる原因

広告は大きく表示したほうが効果的だと言われています。

そのためアドセンスの広告はスマホ表示でコンテンツ幅を超えて画面幅いっぱいまで大きく表示（全幅レイアウト）しようとします。

しかしCocoonはCSSでコンテンツ幅を超えた部分は非表示にする設定になっており、左右が切れてしまうのはそれが原因です。

広告の左右が切れないようにする方法

対処法は「CocoonのCSSを変更」と「アドセンスの広告コードを変更」の2つです。

CocoonのCSSを変更する方法

切れている部分を表示できるようにするCSSを追加する方法です。

こちらのメリットは一度設定するだけでいい、広告が（わずかに）大きく表示されるなどです。

.ad-area {
    overflow: visible;
}

変更方法は上記のCSSを追加するだけです。

WordPress管理画面の「外観→カスタマイズ→追加CSS」からCSSを貼り付けてください。

アドセンスの広告コードを変更する方法

全幅レイアウトを無効にする変更です。これはGoogleが案内する正規の対処法です。

メリットは、広告だけ大きく表示されるよりはコンテンツ幅に収まるので見た目がいい？ことです。

デメリットは複数の広告コードを使用する場合はコード毎に変更する必要があることです。

変更方法は広告コードの以下の部分をtrueからfalseに書き換えるだけです。

data-full-width-responsive="true"
↓↓↓
data-full-width-responsive="false"