CSS修正で表示崩れを直す方法｜WordPressでよくある原因と対処法

CSSを少し直しただけなのに、WordPressの表示崩れが別の場所に広がって焦っていませんか？
ヘッダー、ボタン、余白、スマホ表示などは、1行の指定でも大きく崩れることがあります。

特に事業用サイトでは、見た目の崩れがそのまま問い合わせ減少や信頼低下につながります。
ただし、原因を切り分けずにCSSを追加し続けると、あとから戻すのが難しくなります。

この記事では、CSS修正でWordPressの表示崩れを直す時に、まず見るべき原因と安全な対処法を整理します。

よこやま良平

ITエンジニアとして20年以上WordPressに携わってきたよこやま良平です。わたしの現場経験をもとに、CSS修正で表示崩れを悪化させない確認手順を解説します。

CSS修正の表示崩れは、原因の順番を決めて確認すれば安全に戻せることがあります。
反対に、原因不明のまま指定を重ねると、パソコンでは直ってもスマホで崩れるなど別の問題が起きます。

まずは「どのCSSが、どの画面で、いつから効いているか」を確認しましょう。

CSS修正でWordPressの表示崩れが起きる主な原因

CSS修正でWordPressの表示崩れが起きた時は、追加したCSSだけでなく、テーマ側のCSS、キャッシュ、プラグイン、画面幅の条件まで確認する必要があります。
見えている症状は同じでも、原因は1つとは限りません。

たとえば「ボタンの位置がずれた」という症状でも、余白指定、横幅固定、親要素の幅、テーマ更新、キャッシュの残り方で対処が変わります。
まずは原因候補を広く見て、危険度の低い順に切り分けるのが安全です。

追加CSSが広い範囲に効いている

WordPressの「追加CSS」に書いた指定は、サイト全体へ効くことがあります。
特定のページだけ直したつもりでも、同じクラス名を使っている別ページまで変わるケースがあります。

CSSは「どこに効かせるか」を絞るほど安全です。
ページ固有のクラス、ブロック固有のクラス、親要素を含めた指定にすると、巻き込みを減らせます。

キャッシュが古いCSSを読み込んでいる

CSSを直したのに表示が変わらない、または一部の人だけ崩れて見える時は、キャッシュが原因になることがあります。
WordPress、プラグイン、サーバー、ブラウザ、CDNのどこかに古いCSSが残っている状態です。

この場合、CSSの内容を何度も変える前に、キャッシュ削除と別ブラウザ確認を行ってください。
古いCSSと新しいHTMLが混ざると、実際より複雑な表示崩れに見えることがあります。

テーマ更新でHTML構造が変わっている

テーマ更新後にCSS修正が効かなくなった場合は、テーマ側のHTML構造やクラス名が変わった可能性があります。
以前は効いていた指定でも、対象のクラスがなくなっていれば当然反映されません。

子テーマでテンプレートを上書きしている場合は、親テーマの更新内容と合わなくなることもあります。
CSSだけで直す前に、テーマ更新前後の差分も確認しましょう。

CSS修正で表示崩れを直す前に確認する順番

CSS修正で表示崩れを直す時は、いきなり新しいCSSを書き足さず、現在の状態を保存してから原因を絞ります。
戻せる状態を作っておくことが、最短で安全に直す近道です。

特に本番サイトでは、見た目を急いで直すほど作業履歴が残りにくくなります。
修正前のCSS、スクリーンショット、発生ページを残してから作業してください。

追加CSSを一度に全部消さない

原因を探すために追加CSSを全部消すと、別の表示まで変わってしまい、何が原因だったのかわからなくなります。
まずは直前に追加した部分だけをコメントアウトして、症状の変化を見ます。

/* 一時的に停止して原因を確認する
.site-header {
  height: 120px;
}
*/

このようにコメントアウトすれば、削除せずに一時停止できます。
原因ではなかった場合も、すぐ元に戻せます。

検証ツールで効いているCSSを確認する

ブラウザの検証ツールを使うと、どのCSSが実際に効いているか確認できます。
追加CSS、テーマCSS、プラグインCSSのどれが上書きしているのかを見ることで、無駄な修正を減らせます。

Chromeなら崩れている場所を右クリックして「検証」を開きます。
取り消し線が付いたCSSは上書きされているため、そこを変えても表示が変わらないことがあります。

わたしの実務では、CSSを足す前に「今どの指定が勝っているか」を見ます。ここを飛ばすと、修正が積み重なって原因が見えにくくなります。

CSS修正でスマホ表示だけ崩れる時の対処法

CSS修正でスマホ表示だけ崩れる時は、横幅固定、余白、画像サイズ、メディアクエリを優先して確認します。
パソコンでは問題なく見えても、スマホでは幅が足りずに要素がはみ出すことがあります。

スマホ崩れは、単に文字を小さくするだけでは直らないことが多いです。
親要素の幅、画像の最大幅、ボタンの折り返し、余白の取り方まで見直す必要があります。

固定幅と固定高さを疑う

width: 1200px; や height: 400px; のような固定指定は、スマホで崩れる原因になりやすいです。
画面幅より大きい要素があると、横スクロールや重なりが起きます。

画像とボタンは最大幅を指定する

画像やボタンが親要素からはみ出す場合は、最大幅の指定を確認します。
画像はテーマ側で調整されていることも多いですが、独自CSSで上書きしていると崩れることがあります。

.custom-section img {
  max-width: 100%;
  height: auto;
}

.custom-section .button {
  max-width: 100%;
  white-space: normal;
}

ただし、この例をそのまま全サイトへ貼るのではなく、対象範囲を絞って使ってください。
テーマ全体のボタンや画像に効かせると、別ページのデザインが変わることがあります。

CSS修正でやってはいけない危険な対処法

CSS修正で表示崩れを直す時に一番危険なのは、原因不明のまま強い指定を重ねることです。
一時的に見た目が戻っても、更新や別端末で再び崩れる可能性があります。

特に !important の多用、親テーマファイルの直接編集、ネットで見つけたCSSの丸写しは避けるべきです。
あとから専門家が確認する時にも、原因の追跡が難しくなります。

親テーマのファイルを直接編集しない

親テーマのCSSファイルを直接編集すると、テーマ更新で変更が消えることがあります。
また、どこを直したのか管理しにくくなり、次回の不具合調査が難しくなります。

基本は子テーマ、追加CSS、カスタムCSS用プラグインなど、変更履歴を管理しやすい場所で対応します。
本番サイトで直接試す場合も、先にバックアップを取ってから進めてください。

一時的に直っても全ページ確認する

CSS修正は、問題のページだけ見て完了にすると危険です。
ヘッダー、フッター、ボタン、カード、画像などは複数ページで同じ部品を使っていることがあります。

最低限、トップページ、問題ページ、投稿ページ、固定ページ、スマホ表示を確認しましょう。
問い合わせフォームや購入導線がある場合は、その画面も必ず見てください。

CSS修正を依頼する前に整理したい情報

CSS修正を依頼する時は、症状と直前の作業を整理しておくと復旧が早くなります。
「何となく崩れています」だけでは、調査範囲が広くなり、原因特定に時間がかかります。

崩れている場所、正常な見本、発生した時期、触ったCSS、使っているテーマ名をまとめておきましょう。
これだけでも、CSSだけで済むのか、テーマやプラグインまで見るべきか判断しやすくなります。

症状: トップページのボタンと画像がスマホで重なる
発生時期: 追加CSSを編集した直後から
問題のURL: https://example.com/
正常表示の参考: 下層ページのボタンは崩れていない
確認端末: iPhone Safari、Windows Chrome
直前の作業: ボタンの余白と横幅を追加CSSで変更
使用テーマ: SWELL
バックアップ: サーバー自動バックアップあり

スクリーンショットは、崩れている画面だけでなく、正常に見えている画面もあると便利です。
「本来どう見せたいか」がわかると、修正の方向性を決めやすくなります。

CSS修正の表示崩れは小さく切り分けて直す

CSS修正でWordPressの表示崩れを直すには、追加CSS、キャッシュ、テーマ更新、スマホ条件を順番に確認することが大切です。
いきなりCSSを足すのではなく、効いている指定を見てから最小限の修正を行いましょう。

自分で触るほど状態が悪化している、スマホだけ直らない、テーマやプラグインの影響が疑われる場合は、早めに相談した方が安全です。
現在のCSSと症状を残しておけば、復旧作業も進めやすくなります。

CSS修正で表示崩れが起きたら最初に何を確認しますか？

直前に追加・変更したCSS、キャッシュ、崩れているページ、スマホとパソコンの差を確認します。修正前のCSSを保存してから、直前の変更だけを一時停止すると切り分けやすいです。

追加CSSを消しても表示崩れが直らない原因は何ですか？

ブラウザやプラグインのキャッシュ、テーマCSS、プラグインCSS、子テーマのテンプレート、サーバー側の最適化が関係している可能性があります。CSSだけで判断せず、順番に確認してください。

スマホだけ表示崩れする時はどこを見ればよいですか？

固定幅、固定高さ、余白、画像サイズ、メディアクエリを確認します。パソコンだけで直したCSSがスマホにも効いていると、横スクロールや重なりの原因になります。

CSS修正後の表示崩れが自分で直せない時は

WordPressのCSS修正・表示崩れ・スマホレイアウト崩れでお困りなら、
クイックレスキューが原因調査から安全な修正まで対応します。

原因がわからないCSS修正の表示崩れも、現在の状態確認からご相談いただけます。
急ぎの復旧もまずは症状をお知らせください。