AdSenseの記事内レスポンシブ広告を配置する事で起る「スマホページ記事の表示が左右にずれる・動く」原因と解決方法

はてなブログを始めてから今までの間ずっと「レスポンシブデザイン」でやってきましたが

今回PCページとは別で独立したスマホページを新たに作り直して運営する事にしました。

スマホページへの移行には様々な理由がありましたが、移行へ踏み切った最大の理由は

検索流入がPCからではなく、スマホからの検索流入が「70％以上」を占めていた事が大きかったです。

レスポンシブデザインのままではPC表示と同様にスマホページにも同じように表示されるので

PCページに修正を加えるよりはデザインも新たに流動的で少しでも見やすいページに

作り直したいという思いから単独のスマホページへの移行を決意したわけです。

重すぎる腰を上げて、やっとスマホページへ移行したわけですが、記事を書いていて

アドセンス（レスポンシブ広告）を記事内に配置した時に思わね問題が発生したんですよね。 

表題にも書きましたがアドセンスのレスポンシブ広告を記事内に配置して記事を確認してみると

記事本文の表示全体がアドセンス広告ごと左右にずれる（動く）現象が発生したんです。

これを解決する為に先人達の残した情報を色々調べて試しましたが何をしても全く解決できず、

３日間ほど格闘して、やっとの思いで「記事本文・アドセンス表示のずれ」を対処して

解決する事ができたので、僕と同じような現象が起きている人達に向けて

「記事全体の左右のずれが生じた場合の解決方法」をご紹介したいと思います。

記事内・レスポンシブ広告の配置で記事全体が左右にずれる（動く）

はてなブログのスマホページに「レスポンスブ広告」を配置したところ記事全体が左右に横ゆれして

上記のような状態に。PC表示の場合は記事本文にGoogle AdSense（レスポンシブ）を

配置してたとしてもレスポンシブデザインに対応していないサイトでもレイアウトの

表示がずれたり動いたりする事はほとんど無いと思います。

ですが単独でスマホページを運営する場合、記事内にレスポンシブ広告を配置する事で

記事本文の表示全体が左右に横揺れするというトラブルがスマホページで起きてしまったんですよね。

この横揺れにはサイトの環境とテーマなどAdSenseとの相性がよくない時に起こる現象らしいですが

アドセンスの横幅サイズなども関係してくるという見解も見受けられますので、どれが正解なのかは

一概には言えないところだと思いますので、取り敢えず出来ることは全てやってみて解決策を見つけましょう。  

レスポンシブ広告の記事内配置で左右にずれるトラブルを防ぐ解決策

結論から言うとイエローマーカーに記載されているコードを追加・変更する事で

記事内全体の左右のずれを全て解決する事ができました。

コードの挿入もしくは変更をする

追加コード：【data-full-width-responsive="false"】

ちなみにAdSenseのレスポンシブ広告をスマホページの記事内に記載したい場合は

コードが既に記載されていますので、マーカー最後の「""」で囲まれている部分の

コードを変更するだけでOKです。

Googleヘルプ：記事内広告の全幅レイアウトについて

レスポンシブ広告・記事内の左右のずれを解決させるにはコードを変更

レスポンシブ広告のレクタングルで、表示のずれが生じている場合は

既存のコード（マーカー部分）を「false」に変更するだけで表示のずれが解決します。

既存：【data-full-width-responsive="true"】

変更：【data-full-width-responsive="false"】

あれだけ悩んでいた記事全体の左右のずれも簡単なコード１つ変更を加える事で

綺麗にスマホ画面の枠に収まるようになりますので、僕と同じような症状がある場合は

一度こちらのやり方も試してみてください。

何をやっても表示のずれが解決しない場合はレクタングルを選択

冒頭の方法でも記事内の表示のずれが解決しない場合はレスポンシブから

レクタングルへ広告のサイズを変更する事で表示のずれは解決するはずです。

レクタングル「300×250」「336×280」のサイズをそれぞれ「i Phone X」で

試してみましたが、記事内の左右のずれ（動き）は確認できませんでした。

レスポンシブで何をやっても問題が解決しない場合はレクタングル広告の「300×250」を選択すれば

画面幅の狭いスマホ端末でもずれる事なく表示しますので、最終的に何をやっても解決できない場合は

レクタングルを選んで掲載してみて下さいね。

スマホを横にした時タブレットで見た時の広告（レクタングル）の表示

ちなみにレクタングルを選択するとレスポンシブのように画面の幅に合わせて自動調整ができないので

レクタングルでは指定のサイズ表示となりスマホを横に向けて観覧するときやタブレットで

観覧している場合は広告が小さく見えてしまいます。 

スマホを横にした時タブレットで見た時の広告（レスポンシブ）の表示

レスポンスブの場合は記事枠に合わせて自動でサイズ調整してくれるので、余分な余白が無くなります。

これはタブレットでも同様の表示がされるので記事枠いっぱいに広告を表示したい場合は

「レスポンシブ」を選択しコードを入れて調整します。

広告の表示については、どのように見せたいのかで設定する広告が変わってくると思いますが

これはブログ運営者様の判断次第なのでお好みで設定してみて下さい。 

端末の古いスマホだとレクタングル（大）は広告がはみ出る可能性も

これはそれぞれが使っているスマホのサイズにも関係ある事ですが、型の古いスマホは

新しいスマホと比べて画面のサイズがあきらかに小さいですよね。

i phone 5などの画面の小さい端末を使用している場合、レクタングル（大）「336×280」の広告だと

スマホ画面から広告がはみ出てしまいます。

i phone 6以降はレクタングル（大）でも広告の見切れは、ほぼないみたいですが

もし広告がはみ出るような事があるのならば広告サイズを「300×250」に設定する事で

i phone 6以前のスマホ端末でも広告のはみ出しを防ぐ事ができると思います。

広告収益を意識するならレクタングル（大）レスポンスブがおすすめ

上記でも話したようにAdSense広告（レクタングル）には同じレクタングルでも 

サイズの大きなレクタングル（大）の方がクリック率も高く、更に広告単価も高いと言われています。

しかしタブレットやスマホを横にして見た時に両端に余白ができてしまう為サイト運営者によっては

枠いっぱいに広告を納めたいと考える方もいるのではないでしょうか。

そんな時に設定をおすすめするのが端末によって広告サイズを自動調整してくれる「レスポンシブ」です。

レクタングル（大）ではIphone 5などの画面の小さな端末では広告が見切れてしまいますが

レスポンシブを選択する事でこのような悩みは一切考える必要がありませんので

各端末状況を幅広く対応させるならレスポンシブがおすすめです。

最後に

自身が運営するはてなブログのスマホページで起きた記事内にレスポンシブ広告を配置した事による

スマホページ記事全体の左右のずれ（横揺れ）。ヘッターやフッター部分は何も異状がないのに

記事本文だけが全体的に左右に動く現象が発生しました。

散々調べた結果、何をしても解決できず途方にくれていましたが、意外と簡単な方法で

解決する事ができましたので、記事内のレスポンシブ広告を配置した事が原因で記事全体が

左右に動くような現象が起きて困っている場合は、上記で述べた方法をぜひ試してみて下さいね。