Note私生活から趣味まで・・・何でもない日常をそのままに。AdSenseの記事内レスポンシブ広告を配置する事で起る「スマホページ記事の表示が左右にずれる・動く」原因と解決方法2018-11-20AdSenseの記事内レスポンシブ広告を配置する事で起る「スマホページ記事の表示が左右にずれる・動く」原因と解決方法ブログ運営TwitterFacebookHatenaPocketはてなブログを始めてから今までの間ずっと「レスポンシブデザイン」でやってきましたが今回PCページとは別で独立したスマホページを新たに作り直して運営する事にしました。スマホページへの移行には様々な理由がありましたが、移行へ踏み切った最大の理由は検索流入がPCからではなく、スマホからの検索流入が「70%以上」を占めていた事が大きかったです。レスポンシブデザインのままではPC表示と同様にスマホページにも同じように表示されるのでPCページに修正を加えるよりはデザインも新たに流動的で少しでも見やすいページに作り直したいという思いから単独のスマホページへの移行を決意したわけです。重すぎる腰を上げて、やっとスマホページへ移行したわけですが、記事を書いていてアドセンス(レスポンシブ広告)を記事内に配置した時に思わね問題が発生したんですよね。表題にも書きましたがアドセンスのレスポンシブ広告を記事内に配置して記事を確認してみると記事本文の表示全体がアドセンス広告ごと左右にずれる(動く)現象が発生したんです。これを解決する為に先人達の残した情報を色々調べて試しましたが何をしても全く解決できず、3日間ほど格闘して、やっとの思いで「記事本文・アドセンス表示のずれ」を対処して解決する事ができたので、僕と同じような現象が起きている人達に向けて「記事全体の左右のずれが生じた場合の解決方法」をご紹介したいと思います。端末の古いスマホだとレクタングル(大)は広告がはみ出る可能性も広告収益を意識するならレクタングル(大)レスポンスブがおすすめ最後に記事内・レスポンシブ広告の配置で記事全体が左右にずれる(動く)はてなブログのスマホページに「レスポンスブ広告」を配置したところ記事全体が左右に横ゆれして上記のような状態に。AdSense(レスポンシブ)を配置してたとしてもレスポンシブデザインに対応していないサイトでもレイアウトの表示がずれたり動いたりする事はほとんど無いと思います。単独でスマホページを運営する場合、記事内にレスポンシブ広告を配置する事で記事本文の表示全体が左右に横揺れするというトラブルがスマホページで起きてしまったんですよね。この横揺れにはサイトの環境とテーマなどAdSenseとの相性がよくない時に起こる現象らしいですがアドセンスの横幅サイズなども関係してくるという見解も見受けられますので、どれが正解なのかは一概には言えないところだと思いますので、取り敢えず出来ることは全てやってみて解決策を見つけましょう。結論から言うとイエローマーカーに記載されているコードを追加・変更する事で記事内全体の左右のずれを全て解決する事ができました。コードの挿入もしくは変更をする追加コード:【data-full-width-responsive="false"】ちなみにAdSenseのレスポンシブ広告をスマホページの記事内に記載したい場合はコードが既に記載されていますので、マーカー最後の「""」で囲まれている部分のコードを変更するだけでOKです。Googleヘルプ:記事内広告の全幅レイアウトについてレスポンシブ広告・記事内の左右のずれを解決させるにはコードを変更レスポンシブ広告のレクタングルで、表示のずれが生じている場合は既存のコード(マーカー部分)を「false」に変更するだけで表示のずれが解決します。変更:【data-full-width-responsive="false"】あれだけ悩んでいた記事全体の左右のずれも簡単なコード1つ変更を加える事で綺麗にスマホ画面の枠に収まるようになりますので、僕と同じような症状がある場合は一度こちらのやり方も試してみてください。冒頭の方法でも記事内の表示のずれが解決しない場合はレスポンシブからレクタングルへ広告のサイズを変更する事で表示のずれは解決するはずです。X」で試してみましたが、記事内の左右のずれ(動き)は確認できませんでした。レスポンシブで何をやっても問題が解決しない場合はレクタングル広告の「300×250」を選択すれば画面幅の狭いスマホ端末でもずれる事なく表示しますので、最終的に何をやっても解決できない場合はレクタングルを選んで掲載してみて下さいね。スマホを横にした時タブレットで見た時の広告(レクタングル)の表示ちなみにレクタングルを選択するとレスポンシブのように画面の幅に合わせて自動調整ができないのでレクタングルでは指定のサイズ表示となりスマホを横に向けて観覧するときやタブレットで観覧している場合は広告が小さく見えてしまいます。スマホを横にした時タブレットで見た時の広告(レスポンシブ)の表示レスポンスブの場合は記事枠に合わせて自動でサイズ調整してくれるので、余分な余白が無くなります。これはタブレットでも同様の表示がされるので記事枠いっぱいに広告を表示したい場合は「レスポンシブ」を選択しコードを入れて調整します。広告の表示については、どのように見せたいのかで設定する広告が変わってくると思いますがこれはブログ運営者様の判断次第なのでお好みで設定してみて下さい。端末の古いスマホだとレクタングル(大)は広告がはみ出る可能性もこれはそれぞれが使っているスマホのサイズにも関係ある事ですが、型の古いスマホは新しいスマホと比べて画面のサイズがあきらかに小さいですよね。5などの画面の小さい端末を使用している場合、レクタングル(大)「336×280」の広告だとスマホ画面から広告がはみ出てしまいます。6以前のスマホ端末でも広告のはみ出しを防ぐ事ができると思います。広告収益を意識するならレクタングル(大)レスポンスブがおすすめ上記でも話したようにAdSense広告(レクタングル)には同じレクタングルでもサイズの大きなレクタングル(大)の方がクリック率も高く、更に広告単価も高いと言われています。タブレットやスマホを横にして見た時に両端に余白ができてしまう為サイト運営者によっては枠いっぱいに広告を納めたいと考える方もいるのではないでしょうか。そんな時に設定をおすすめするのが端末によって広告サイズを自動調整してくれる「レスポンシブ」です。5などの画面の小さな端末では広告が見切れてしまいますがレスポンシブを選択する事でこのような悩みは一切考える必要がありませんので各端末状況を幅広く対応させるならレスポンシブがおすすめです。最後に自身が運営するはてなブログのスマホページで起きた記事内にレスポンシブ広告を配置した事によるスマホページ記事全体の左右のずれ(横揺れ)。ヘッターやフッター部分は何も異状がないのに記事本文だけが全体的に左右に動く現象が発生しました。調べた結果、何をしても解決できず途方にくれていましたが、意外と簡単な方法で解決する事ができましたので、記事内のレスポンシブ広告を配置した事が原因で記事全体が左右に動くような現象が起きて困っている場合は、上記で述べた方法をぜひ試してみて下さいね。検索プロフィール書いている人:Taka(id:tm_ordinary)私生活から趣味まで何でもない日常をそのままに・・・。Note」に残しています。生活の中で感じる疑問など日々の出来事も時々呟いたたりも。基本的には気になったWebサービスや生活に役立つ情報中心に更新中。グーグルアドセンス合格に至るまでに取り組んだこと2017-11-17はてなブログ開設から20日2017-10-28「はてなブログ」始めました。はてなブログをはじめよう!tm_ordinaryさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。