wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

   

こんにちは、管理人@SS_mshpです。

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたはいいけど、『ずれる』みたいな問題が見つかったので、対処してみます。

レスポンシブでpc/sp同じhtmlを使うので、一部の要素が横幅オーバーしていると予測できました。さっそく、どういう状況になっていたかをみてみましょう。

スマホで横にずれる・ディスプレイ領域の外にはみ出る現象とは?


管理人が以前制作した、コミックや映画・ドラマのブログです。WPフリープランにつき、スマホアクセス時は広告がでますが、この広告が曲者でした。スマホの横幅より大きいバナーが出てしまい(自分で貼ったものなら、タグもレスポンシブに切り替えたりできます)、スクロール時に右側に指が動いたときに、このようにずれてしまいます。こういう状況が、ネット上でもいくつか確認されました。

サイトを見れないというわけではないのですが、ずれるたびいちいち直さなければならなく、ユーザーに余計な操作をさせてしまうのが難点です。

とはいえ、これに遭遇していたから、他の自分所有のサイトでにたような現象が起きたときに『バナー横幅がオーバーしてるんじゃないか?』というような予測ができるようになりました。次の段落では、管理人が遭遇した、この状況に対処してみます。

管理人が最近確認した、スマホレスポンシブが横にずれる原因(主に広告タグ)

原因はCSSやサイズ設定ミスなどいろいろあるようですが、ここでは管理人が自社運営サイトで遭遇した例を紹介いたします。原因がわかっていると、対処しやすくなります。主に、アドセンスなどの広告タグ古いバージョン・横幅オーバー・余計なマージンorパディングなどが原因となるようです。

例1:アドセンス広告タグ古いバージョンで、横幅がwidth:728pxになっていた

<ins class=”adsbygoogle”
style=”display:inline-block;width:728px;height:90px”
data-ad-client=”ca-pub-○○○”data-ad-slot=”○○○”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のコードは、アドセンスの古いバージョンです。最近では自動広告やレスポンシブ広告が出ていますが、古いバージョンではバナーサイズが指定されています。
PCビューのみで使用する場合は問題がありませんが、これが貼ってあるままだと、『スマホアクセス時にデバイスの横幅よりオーバーする』ので、その分横にずれるようになってしまいます。

対処方法としては『自動広告やレスポンシブ広告』、または『スマホでも表示できるサイズにする』などです。

例2:バナーや画像のサイズが大丈夫でも、マージンが余計だと横にずれる

<div style=”margin-left:90px;”>
<script type=”text/javascript”>
<!–google_ad_client = “ca-pub-○○○”;
/* .smartphone.footer */
google_ad_slot = “○○○”;
google_ad_width = 336;
google_ad_height = 280;//–>
</script>
</div>

サイズに336と書いてありますが、これ単体ではズレが発生しませんでした。しかし、管理人がPCビューにmargin-left:90px;をつけてちょっとずらし、それをつけたままレスポンシブ化してしまったため、『マージンが加わって横幅オーバー → スクロール時に、横にずれる』という状況に。

対処は『このdivを単純にカット』『メディアクエリで、横幅が広いデバイスのときだけマージンが出るようにする』などがあります。

あとがき&サイズオーバーしている要素発見のしかた・Chromeなどのデベロッパー・ツールを使う


横ズレには、横幅オーバーしている要素が関係していることがわかりましたが、心当たりが無い場合は、原因の発見が困難です。その場合はF12キーを押して、ディベロッパーツールを立ち上げ、各要素を検証します。(管理人のブラウザはvivaldiです)この画像のように、各要素のサイズがどのようになっているかも確認できます。

開発者用ツールなので少しややこしいですが、細かく要素を検証していけば、原因究明できる可能性が高くなるので、ぜひこちらも使ってみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - サイトのモバイル対応 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

今回は、fc2ぶろぐの検索タグを、スマホ向けで使える簡単な方法を行ってみ …

【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応

今回は、WordPress(4.9などの新しいバージョン)の管理画面で、 …

【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする

今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/ …

【WPの仕組み】スマホとかに対応するレスポンシブ化(デバイスに応じてレイアウト変動)ってどうなってるの?

今回は、よくある疑問『wordpressのスマホ対応とかレスポンシブの仕 …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

お知らせ:楽曲受付サイトをレスポンシブ・スマートフォン対応にしました。しなかった場合考えられるリスクは?効果は?

今回は音楽制作ではなく、管理人がお仕事サイト(アトリエss)をスマートフ …