レスポンシブ広告がはみ出す場合の対処法-スマホサイトの横揺れ回避-

今まで何ともなかったスマホサイトがいつのまにか横揺れしてしまっている場合、GoogleAdSence広告（グーグルアドセンス広告）が原因であることがあります。

レスポンシブに設定していても、はみ出しているグーグル広告によって、スマホサイトが横にグラグラ揺れる！そんな症状に悩まされているなら、アドセンス広告を調整して本来のレイアウトを取り戻しましょう( ´ ▽ ` )ﾉ

レスポンシブ広告ユニットとは、デバイスの画面サイズにあわせて自動で調整表示してくれる設定です。

広告ユニットがレスポンシブになっているか下記手順に従って確認します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"></script>
     <!-- Unit Name -->
     <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>

広告コードはだいたいこんな感じになっているかと思います。

formatのパラメータには、広告ユニットの形状を指定します。autoの場合、レスポンシブ広告ユニットが自動で切り替わります。

responsiveは指定しなくても構いませんが、画面いっぱいに広告を拡張することで、収益アップが見込めるとグーグルアドセンスが告知しているので、やっておきます。

GoogleAdsenseヘルプページにあるレスポンシブ広告のタグパラメータの使用方法を参考にパラメータを変更し、はみ出して表示される広告の修正を試みます。

効果のあった組み合わせは、４番の組み合わせ「レクタングル」と「オート」のみでした。

しかし、タブレットやPC表示でもレクタングルサイズになってしまうという残念な結果に。これでは修正できたとは言えませんね…。

結論として広告コードのパラメータをあれこれやってもダメだったということです。

広告コードのパラメータの変更によるデザイン修正はできませんでしたが、広告のはみ出しによる横揺れはサイト訪問者の離脱につながるため、あきらめるわけにはいきません。

Googleアドセンスヘルプにある レスポンシブ広告コードを修正する方法を参考に、メディアクエリで広告サイズを指定してみることにします。

スマホサイトではみ出す広告は、レクタングル（大）と呼ばれる336×280のサイズのものです。それをスマホサイトで表示させないように指定します。サンプルは下記の通り。

/* --------------------------
     スマホ端末用
-------------------------- */
.google-ads{max-width:320px}
/* --------------------------
     小型タブレット端末以上
-------------------------- */
@media only screen and (min-width: 481px) {
.google-ads{max-width:100%} 
}
                        

<div class="google-ads">/*←広告コードを囲む*/
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"></script>
     <!-- Unit Name -->
     <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
     </div>

はみ出した自動広告というのは、スクロール時に横揺れしてしまうためユーザビリティの悪いサイトとされます。離脱率は上がるし、収益は下がるしいいことはひとつもありません。

CSSのメディアクエリでサイズ指定することで、ひとまず横揺れは修正できたかと思いますが、将来的にまたいつはみ出してしまうことがあるかもしれません。たまにはエゴサチェックが必要ということですね。

ということで、以上いつも何かがはみ出しているソクラテツがお送りしました( ´ ▽ ` )ﾉ。

iframeはアフィリエイト広告を装飾することが出来ます。グーグル広告にも影響しますので、CSSでiframeの記述を見直してみましょう

CSSを見直して、きっちりレイアウト

CSSではみ出しを修正！３つのポイント