WordPressのスマホ表示で画面が左右に動く症状の修正方法

AUTHORこのブログを書いている人

京都市左京区で開業している税理士です。 元税理士受験専門学校講師。相続税法が担当科目でしたので、税理士としても相続・贈与を得意分野にしています。 詳しいプロフィールはこちら
スマホをいじる自分

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

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

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

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

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

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


スポンサーリンク

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

直し方は単純です!
(というか、調べた中で一番単純な方法を選びました(^^;)
↓こちらのサイトにその方法が載っています。

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

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

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

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

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

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

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

より簡単な方を採りました

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

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

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

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

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

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

その他のWordPressカスタマイズネタは以下のカテゴリーにまとめてます。
カテゴリー「WordPressカスタマイズ」

スポンサーリンク

スマホ表示を意識するのは欠かせない

ブログやホームページを公開する上で、スマホからの見やすさに気を配ることは欠かせません。

開設当初はウチのブログもスマホの閲覧率が7割8割という感じでしたが、アクセス数が増えるにつれてデスクトップの割合が増えて、今はタブレットと合わせても半分弱ほどに留まっています。
けど、これも画面がぐらぐら左右に揺れていたからこれだけの割合に留まっていた、とも言えるかもしれませんよね。

今回の修正に合わせて、なるべく上下のスクロール幅が少なくなるように、
・関連記事の表示を1つだけにしたり
・コメント欄を表示しないようにしたり
といった辺りも変えました。

あとはもっと表示スピードが早くなれば、ですが、どうすれば早くなるのかよくわからないのでここは今後の課題です…。

あとがき

昨日は同級生の士業と仕事の相談を。
回答が的確だったのにも助かりましたが、それよりも感心したのがレスポンスの早さ。
資料を共有してからものの30分でしっかりとした回答が返ってきたのには正直ビックリでした。

あれだけ素早く動いてくれたら「次も頼もう」って思いますよね。
レスポンスの早さは武器になることを改めて実感しました。


京都市左京区下鴨の「尾藤武英税理士事務所」

相続税・贈与税に関してお困りの方や、個人事業主・フリーランスの皆様のサポートに力を入れている税理士事務所です。
税理士プロフィール
事務所のホームページ
サービスメニュー
相続税・贈与税の申告
相続税の試算(生前からの対策提案)
税務顧問、決算申告
単発個別相談・個別コンサルティング
セミナー・研修講師、執筆

同じカテゴリーの人気記事

Twitterで