CONTENTS / ARTICLE MAP目次20項目
WordPressの表示崩れは、CSSを足して見た目だけを押し戻す前に、崩れるURL、画面幅、ブラウザ、ログイン状態、直前の更新、最初にはみ出す要素を揃えると安全に直しやすくなります。PCでは正常でもスマホだけ崩れる場合や、更新後・キャッシュ削除後だけ崩れる場合では、確認すべき原因が異なります。
ANSWER FIRST
表示崩れは「症状が再現する条件を固定し、最初に崩れた要素を最小範囲で直す」のが基本です。
overflow-x: hiddenで横スクロールだけを隠したり、広い範囲へ!importantを重ねたりすると、原因を残したまま別の端末で操作不能になることがあります。変更前の状態へ戻せるようにして、CSS、固定幅、画像、文字、キャッシュの順に確認します。
最初に記録する6つの再現条件
- 対象URL
トップページ全体ではなく、崩れているページとセクションまで特定します。 - 画面幅と向き
端末名だけでなく、CSSピクセルの幅と縦・横向きを記録します。 - ブラウザとログイン状態
Safari、Chrome、管理者ログイン中、未ログイン、シークレット表示を分けます。 - 発生時刻と直前の変更
テーマ、プラグイン、WordPress、PHP、画像、文章、キャッシュ設定の変更時刻を残します。 - 再現操作
ページを開くだけか、メニュー、モーダル、スライダー、フォーム操作後かを記録します。 - 正常だった比較対象
別端末、別ブラウザ、キャッシュ削除前、更新前のスクリーンショットを保存します。
スクリーンショットだけでなく、問題が起きる直前からの短い画面録画があると、固定ヘッダー、スクロール、アニメーション、モーダルの重なりも再現しやすくなります。
WordPressの表示崩れで多い原因
| 原因 | よくある症状 | 確認する場所 |
|---|---|---|
| CSSの優先順位 | 一部だけ色・幅・余白が戻る、管理者時だけ違う | 読み込み順、セレクタ、インラインCSS、追加CSS |
| 固定幅・最小幅 | スマホで横にはみ出す、2カラムが潰れる | width、min-width、grid、flexの子要素 |
| 画像・動画・表 | 本文幅より大きい、縦横比が崩れる | 実寸、幅・高さ属性、object-fit、埋め込み要素 |
| 長い文字列 | URL、英単語、ボタン文言だけ枠外へ出る | 折返し、最小幅、文字サイズ、言語別フォント |
| キャッシュ・最適化 | 更新が反映されない、人によって表示が違う | ブラウザ、WordPress、サーバー、CDN、CSS結合 |
| JavaScript・状態 | 開閉後だけ位置がずれる、閉じるボタンが押せない | コンソールエラー、class切替、固定配置、スクロール制御 |
安全な確認順
1. 同じ条件で再現する
開発者ツールの端末プリセットだけでなく、可能であれば実機でも確認します。画面幅を少しずつ変え、どの幅から崩れるかを記録します。特定の端末名へ例外CSSを足すより、レイアウトが破綻する幅をブレークポイントとして扱う方が保守しやすくなります。
2. 最初にはみ出す要素を探す
ページ全体の横スクロールは、内側の一要素が親幅を超えた結果であることが多いため、画像、表、長いURL、固定幅のカード、絶対配置要素を順に確認します。overflow-x: hiddenをページ全体へ指定すると、原因要素だけでなく必要な操作やフォーカス表示まで隠す可能性があります。
3. CSSがどこから来たか確認する
テーマ本体、子テーマ、追加CSS、ブロック設定、プラグイン、ページビルダー、最適化済みCSSのどれが最終値を決めたかを確認します。見つけた指定を消す前に、ファイル名、行、セレクタ、計算済み値を記録します。
4. 変更は一つずつ、狭い範囲へ入れる
原因の要素に対して、流動幅、最大幅、折返し、グリッド列、配置のいずれが適切かを選びます。複数箇所を同時に変えると、どの修正が効いたか、何が新たに崩れたかを判断できません。
5. キャッシュを層ごとに確認する
ブラウザだけを更新しても、WordPressプラグイン、サーバー、CDN、ビルド済みCSSが古い場合があります。どの層を削除したか記録し、未ログイン状態と別回線でも新しいファイルが配信されているか確認します。キャッシュ削除を繰り返すだけで原因のCSSは直りません。
PC・スマホ・タブレットで確認する場所
| 領域 | 確認内容 |
|---|---|
| ヘッダー | メニュー開閉、ロゴ、管理バー有無、固定時の高さ |
| 見出し・本文 | 日本語の改行、長い英字、本文幅、行間、リンク |
| 画像・図表 | 縦横比、切れ、キャプション、表の横操作 |
| フォーム | 入力欄、エラー、キーボード表示、送信ボタン |
| モーダル | 閉じるボタン、背景スクロール、上下の安全領域 |
| 固定CTA | ブラウザ下部に隠れない、本文や同意欄を覆わない |
| 操作後 | 開閉、横スワイプ、送信、戻る操作後も配置が保たれる |
iPhone SEのような狭い画面、一般的なスマートフォン、iPad mini相当の縦幅、タブレット横向き、ノートPC、大型PCを含めて確認し、端末名だけでなく検証した幅を記録します。
更新後に崩れたときの注意
STOP CONDITION
本番でプラグインやテーマを一括して旧版へ戻す、追加CSSを全削除する、データベースを直接置換する作業は、復元できるバックアップと変更履歴がない状態では進めないでください。フォーム、決済、会員、予約へ影響する場合は受付を一時停止して調査範囲を限定します。
更新が引き金に見えても、原因は古い独自CSS、廃止されたHTML構造、キャッシュの混在、PHPやJavaScriptのエラーである場合があります。更新前後の差分とエラーログを見てから、戻すか修正するかを判断します。
修正を依頼するときに伝える情報
- 崩れているURLと正常な比較URL
- 画面幅、端末、OS、ブラウザとバージョン
- 再現までの操作手順
- 発生時刻と直前に行った更新・編集
- ログイン中だけか、未ログインでも起きるか
- スクリーンショットまたは画面録画
- テーマ・子テーマ・ページビルダー・キャッシュの構成
- 公開中サイトで変更できない時間帯や重要機能
- 直したと判断する端末・幅・操作の完了条件
パスワードを通常の本文へ書かず、必要になった権限だけを期限付き・個別アカウントで共有します。調査後は不要な権限を無効にします。
よくある質問
スマホだけ崩れるのはレスポンシブCSSが原因ですか？
可能性はありますが、固定幅の画像や表、長いURL、JavaScriptで追加された要素、ブラウザ下部の安全領域なども原因になります。崩れる幅と最初にはみ出す要素を先に特定します。
キャッシュを消せば直りますか？
古いCSSが配信されている場合は見た目が更新されますが、原因の指定そのものは直りません。どのキャッシュ層を削除したか記録し、削除後も再現するかを確認します。
!importantを使えば早く直せますか？
緊急の限定修正で使う場面はありますが、広いセレクタへ重ねると後の変更が効かなくなります。元の優先順位と影響範囲を確認したうえで、必要な箇所だけに使います。
PCで問題なければ公開してよいですか？
スマートフォンではメニュー、フォーム、モーダル、固定ボタンが操作できない問題が起きやすいため、PCだけでは判断できません。主要な画面幅と実際の操作を確認します。
まとめ：隠す修正ではなく、原因と完了条件を揃える
表示崩れは、見えているずれだけを押し戻すと別の幅や操作で再発します。再現条件を固定し、最初に崩れた要素を見つけ、変更を一つずつ入れ、PC・スマホ・タブレットで操作まで確認します。公開後も修正したファイル、理由、検証幅、戻し方を残すと、次の更新で同じ問題を防ぎやすくなります。
LAYOUT REVIEW
崩れる条件と修正範囲を整理します。
対象URL、スクリーンショット、端末・画面幅、直前の変更をお送りください。サイト内のテキストメッセージで、再現確認から影響の小さい修正、端末別の確認範囲までご案内します。
参考にした公式情報
- Google Search Central「モバイルファースト インデックス登録のおすすめの方法」
- WordPress.org「Site Health screen」
- WordPress Developer Resources「Common WordPress errors」
公式情報の最終確認日：2026年8月26日。ブラウザやWordPressの仕様、管理画面名は更新される場合があります。
