ラジオ配信@stand.fm(スタエフ)はじめました

【CSS】スマホのサイト表示で画面が左右にぶれる症状の修正方法

スマホ表示のグラグラを直すには?

普段ブログの記事はパソコンから投稿している私ですが、自分のブログやホームページはスマホからも逐一チェックしています。
ただ、そうしてスマホから見た時に以前から1つ気になっていたことが…。

それは
「左右に余分な余白があって、上下にスクロールしようとしても画面が左右にグラグラ動いてしまう」
こと。

最初のうちは「まぁええやろ」と気にしていなかったんですが、
なんせ、スクロールしようとする度に画面が横に動いてしまってうまく上下に動いてくれない。
さらに、一旦横に動いてしまうと横にずれたままの状態で上下にスクロールしてしまうので、端が切れてしまって記事も読みにくい。
そういったことが続いてくるうちに、自分自身でもだんだん我慢できなくなっていました(^^;

しかも、他のブログを拝見していてもそんなことになっているブログはほぼ皆無で、みんなスムーズにスクロールできる。

「これはなんとかしなければ!!」

と思い、Googleで検索。
結果あっさりと修正することができました(^^



CSSに「overflow:hidden;」を記述するだけ!

直し方は単純です!
(というか、調べた中で一番単純な方法を選びました(^^;)

↓こちらのサイトにその方法が載っています。

#wrapや#wrapperなど(任意)の大枠にあたる部分にoverflow:hidden;を記述することで解決可能。

引用元:[スマホサイト]左右に微妙にずれるのを解消するCSSメモ - ライフボックス

CSSの該当する箇所に「overflow:hidden;」と記述すれば直る、と。
ホントにたったそれだけで直るんですかっ!?

さっそく私も試してみました。

ブログのCSSの該当箇所に「overflow:hidden;」を追加。
スクリーンショット

ホームページのCSSにも足しました。
スクリーンショット

するとあら不思議、左右の余白が消えてスムーズなスクロールが実現しましたよ〜!
スマホでご覧の皆さん、今までご迷惑をお掛けしましたm(_ _)m

【追記】
現在このブログは「ストーク」という有料テーマを使っていますが、「ストーク」ではあらかじめCSSに「overflow:hidden;」が記述されているため、こちらで追加する必要はなく、画面のぐらぐらももちろん発生しません。

ストークはちゃんと書かれています

グラグラを直す方法は2つ。より簡単な方を採りました

どうやら、左右に余白が出てしまうのは記事の中の何かが横幅に収まり切らずにはみ出してしまっているからのようで、これを直すには

  1. はみ出ているものをはみ出さないように修正する。
  2. CSSではみ出ているものを強制的に無視させる。(←私が採った方法)

という2つの方法があるようです。

根治治療をしようと思ったら❶の方がいいんでしょうが、
「アドセンスなのかプラグインなのかSNSのウィジェットなのか何なんだ〜。」
と、はみ出ている原因を探しているうちに疲れてしまったので、今回はてっとり早い❷を選びました(^^;

スマホ表示のグラグラで困っている方はCSSに

overflow:hidden;

と記述!
是非試してみて下さい!


【関連記事】


このブログで使ってるWPテーマ&レンタルサーバー



ABOUT US
尾藤 武英
京都市左京区下鴨を拠点に活動する税理士です。
出身も左京区で、2年ほど大阪に住んでいた時期を除くとずーっと京都在住。
好きなコトやモノへのこだわりが強く、そんなこだわりを写真というフィルターを通じて表現するのを楽しんでいます。
【好きなコトモノ】カメラ・写真 / Apple製品 / 競馬(厩舎応援&一口馬主) / DEEN / イチロー / 地元京都の四季の風景
【詳しいプロフィールはこちら】
【運営している税理士事務所について】
相続税の申告や相続税対策、クラウド会計をお使いの個人事業主・法人様の確定申告支援を専門としています。
代表税理士が全ての業務を直接担当。元予備校講師の経験を活かしたわかりやすいアドバイスでお困りごとを解決します。
オンラインでもお受けしていますので、お住まいの地域問わずお気軽にどうぞ!
京都の税理士・尾藤武英税理士事務所ホームページ
京都の税理士・尾藤武英税理士事務所

【税金以外の提供サービス】
セミナー研修講師・執筆
ブログ運営など、単発のご相談もお受けしています
 
このブログへのご意見ご感想、セミナー開催要望はお問い合わせページよりどうぞ