【WordPress】スマホ画面で謎の余白ができて横にズレる(ガクガク・グラグラする)原因と対処方法【ブログサイトのエラー対策】


Warning: A non-numeric value encountered in /home/meil/webcras.com/public_html/wp-includes/media.php on line 3517

こちらの記事では、WordPressのブログサイトをスマホ画面で見た時に、横にずれたり表示がガクガク・グラグラする原因と対処方法を解説しています。

記事の横に、謎の余白が発生しているとUXやUIが悪くなり、SEOに対しても悪影響を及ぼすので画面表示がおかしくなった時は、ぜひ参考にしてください。

スマホ画面で余白ができてズレる

サイトの表示がおかしい現象

画面が横にズレたりするのは、上記のようにスマホ画面でまっすぐスクロールできない状態になっているかと思います。

パソコンの編集画面やプレビュー画面では余白など見当たらないのに、スマホで見ると上下左右にできた謎の余白によって、記事が横や斜めにガクガク・グラグラすることがあります。

これらの現象は、サイトデザインを良くしようとして、CSSなどを編集したことのあるブロガーであれば必ず通る道で、問題点を修正すれば必ず解決するので安心してください。

 

スマホ画面で余白ができる原因

CSSによる余白の原因

ブログサイト全体に余白が出来る原因は、CSSによってメインコンテンツから要素がはみ出ている事が最も多いです。

▼余白が発生しやすい要素

  • 見出しがコンテンツ幅より大きい
  • テーブルがコンテンツ幅より大きい
  • テキストや画像がコンテンツ幅より大きい

CSSでは上記要素の周囲に、余計な「padding」「margin」「border」「position」を作り出していると、メインコンテンツからはみ出して、余白が出来る原因となります。

▼importantで固定されている

important」とは、命令文を最優先で実行させるコードで、CSSを弄った経験がある方は一度は見たことがあるかと思います。

CSSを多く使っていると「important」が同じ要素で重複している可能性があります。

importantの重複例

昔書いたCSS:main  {padding: 20px;}

最近書いたCSS:main  {padding: 30px !important;}

上記のように以前書いたCSSを忘れて、新たに同じ要素に「important」付きで書いた場合は、!importantがある方が優先されます。

そのため、同じ要素をCSSで書き換えていないか再度確認してみましょう。

▼サイドバーの%がメインより大きい

その他にも、メインコンテンツは余白ができる原因がなくても、サイドバー(ウィジェット)が原因でスマホ画面でずれる原因が起きます。

基本的にスマホ画面では、メインコンテンツの下にサイドバーが来ますが、メインとサイドの%を弄っていると画面がグラグラすることがあります。

サイドバーの%が大きい例

/*メインの幅*/
.l-main {width:70%;}

/*サイドバーの幅*/
.l-sidebar {width:40%;}

上記のようにメインとサイドバーの合計が100%を超えていると、スマホ画面で表示がズレることがあります。

 

HTMLによる余白の原因

特定の記事やカテゴリに余白が出来る場合は、HTMLが原因である可能性が高いです。

上記で解説したCSSだけでなく、記事内の要素「画像・動画・広告」などが、width100%以上になっているとコンテンツ外にはみ出す場合があります。

もしwidth100%以下だとしても、レスポンスシブ対応させていないとスマホ画面に切り替えた際に、そのままの要素のサイズで表示されたりします。

 

プラグインによる余白の原因

上記のCSSやHTML以外では、プラグインによって画面表示がズレる場合があります。

余白ができる原因となりやすいプラグインは、AMPプラグインや画像サイズをサイト内で編集するプラグインなどです。

余白が出来るきっかけになるプラグインを、一つずつオフにして確かめてみましょう。

プラグインをレンタルサーバーで消す方法もあるので、やり方を知りたい方は下記を参考にして下さい。

 

余白の原因と対処方法まとめ

画面表示がズレる原因を探す

余白が発生している場所の特定は「デベロッパーツール」を使うと、分かりやすいです。

それぞれの要素に影響を与えているCSSなども、判別することができるのでショートカットキーを覚えておきましょう。

 

関連記事

Web制作

ウェブ制作関連記事
ブログサイトの始め方 ドメイン取得方法
ドメイン取得~サイト作成手順 外観テーマ導入手順 
おすすめレンタルサーバー おすすめテーマ
記事内容(ジャンル)の選び方 SSL化の設定方法
固定ページをトップページ変更 おすすめプラグイン一覧 
サイト運営者ID確認 効率化ショートカットキー
不要なCSS・JS特定 ホームページの作り方
スパムコメント対策  

▼Googleアナリティクス

Googleアナリティクス関連記事
複数サイト管理方法 旧バージョン(UA)設定

 

Googleアドセンス・アフィリエイト

Googleアドセンス関連記事
アドセンス設置場所 広告単価の高い時期
広告クリック率確認  広告サイズ改善
アンカー広告の固定化 広告が表示されない原因 
ads.txtファイル問題の修正 ダブルレクタングル作成
リクエスト処理エラー Amazonアソシエイト
おすすめASP一覧 【クローズドASP】felmat依頼内容

サイトデザイン

関連記事
TOPページの割り当て padding設定方法
margin設定方法 border設定方法
記事上の余白原因と消し方 スマホ余白の原因と消し方
特定カテゴリー非表示 perタグ内の改行方法
▶が文字化けする原因対策 サイドバーのずれ修正
コメント欄に絵文字  サイドバータイトル非表示
CSSが反映されない原因 テーブル文字を上下中央揃え 

▼テーマ毎のデザイン

THE THOR (ザ・トール)
アイキャッチ画像を非表示 グローバルメニューの出し方

エラー対策

エラー対策の関連記事
style.cssエラー functions.phpエラー
画面表示がおかしい対処法 重大なエラー対処法
サーバーでプラグイン削除 エラーコード一覧
404エラー対策

PR記事一覧

 

Ads Blocker Image Powered by Code Help Pro

広告ブロックを検出しました!

ブラウザの拡張機能を使用して広告をブロックしていることが検出されました。

ブラウザの広告ブロッカーなどの機能を無効にして「更新」をクリックして下さい。