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

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

スポンサーリンク

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

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

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

左右が切れている状態

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

正しく表示された状態

左右が切れる原因

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

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

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

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

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

CocoonのCSSを変更する方法

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

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

.ad-area {
    overflow: visible;
}

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

CSSを変更しても何かしらの致命的な問題にはなりません。追加した部分を消せば完全に元に戻ります。

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

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

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

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

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

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


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

コメント

タイトルとURLをコピーしました