広告による横揺れをきっちり修正

自分でやるをバックアップするソクラテツチップスのバナー画像

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

スマホの横揺れはアドセンスのレスポンシブ広告のはみ出しが原因?その修正方法を解説します。

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

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

広告サイズの確認

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

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

レスポンシブ広告確認手順

【確認の仕方】

  1. グーグルアドセンスを開く
  2. 左メニューの[広告]→[サマリー]
  3. タブの[広告ユニットごと]を選択 図①
  4. 既存の広告ユニットから確認したいユニットの鉛筆マークをクリック 図②

左にディスプレイ広告のプレビューが表示されたら、右側にある広告サイズのプルダウンが

レスポンシブ広告選択プルダウン
プルダウンメニュー
  • レスポンシブ
  • 固定

レスポンシブになっているか確認します。

広告コードのパラメータを確認

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

formatのパラメータ
rectangle レクタングル
horizontal 横長
vertical 縦長
auto 自動選択
レクタングルとは336×280、300×250といった正方形に近い長方形の広告サイズです。
responsiveのパラメータ
true 自動拡張有効
false 無効

パラメータ変更による試行テスト

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

No. format responsive 結果
auto true ×
auto false ×
rectangle true ×
rectangle false
スマホサイトでアドセンス広告がはみ出していることから、format(フォーマット)のパラメータは、レクタングルかautoのどちらかに限定しテストを行いました。
テストの結果

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

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

残念な結果にコメントする
まだはみ出てる…

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

CSSによる修正

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

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

パラメータを確認する
marginでは修正できないよ。広告が中央寄せにならないし

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

CSS
/* --------------------------
     スマホ端末用
-------------------------- */
.google-ads{max-width:320px}
/* --------------------------
     小型タブレット端末以上
-------------------------- */
@media only screen and (min-width: 481px) {
.google-ads{max-width:100%} 
}
                        
html
<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の記述を見直してみましょう

iframeのCSSが邪魔していることが原因の場合がある
CSSのiframeにmarginの設定をしているとグーグル広告に影響するヨ
PROFILE
SOCRATETSU featuring Medjed

職業:サラリーマン

生活に必要なサービスを消費者目線で精査。節制と何でも自分でやるのがライフスタイル。

ビジネスではない本音ブログで、プラスワンの生活を提案しています。
※本ページはプロモーションが含まれています。

アドセンス収入に限界を感じたら、アフィリエイトデビューがおススメです。

アフィリエイトサイト

ブログやサイトを運営しているなら、やらなきゃ損!会員登録無料、年会費もなし、やった人だけが得をするアフィリエイトに今すぐ参加しよう。

A8.net

A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。

会員登録無料・審査もなし、これを機に思い切ってアフィリエイターデビュー。これから何か新しく始めたい人や副業を考えているならSNSに貼ってみましょう

  • 有名ブランドから高額報酬がもらえる広告が掲載できる!
  • PCはもちろん、スマホからも広告作成・発行が可能!
  • もちろん会員登録は無料!その後も費用は一切かかりません!

お申し込みはコチラ↓

A8.net公式サイト
バリューコマースアフィリエイト

大手ECサイトから大手企業案件多数あり。

1,000円から振込みOK、手数料0円ですぐに結果が出る可能性も。セルフバックも充実しているので、普段購入しているものもおトクにゲットできちゃうものもあります。

  • スマホで簡単!「SNS掲載用の広告作成方法」をご紹介
  • Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
  • 成果が出やすい、稼ぎやすい広告や稼げる広告が多い

お申し込みはコチラ↓

VCアフィリエイト公式サイト
もしもアフィリエイト

アフィリエイトの基礎知識から、継続して稼ぐための考え方、手法など、アフィリエイト運営に役立つ「ステップアップガイド」「ステップメール」などご用意。会員登録無料だから初心者の方でも、安心してアフィリエイトが始められます。

  • スマホで簡単!「SNS掲載用の広告作成方法」をご紹介
  • Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
  • 成果が出やすい、稼ぎやすい広告や稼げる広告が多い

お申し込みはコチラ↓

もしもアフィリエイト公式サイト
TOP

関連記事
GoogleAdSense
googleアドセンス作業をイメージした画像

Googleアドセンスは稼げる?稼げない?どっち

キャリア10年以上でわかったこと、それは…

PC(HP)
Googleアドセンスを中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

画像の遅延読み込み実装でサイト表示高速化

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します