よこやま良平
テーマ修正で表示崩れが起きる理由は、ほとんどの場合「変更した場所」と「反映される場所」の関係を確認しないまま更新してしまうことにあります。
WordPressは、テーマ、子テーマ、追加CSS、プラグイン、ブロック設定、キャッシュが重なって画面を作ります。そのため、1か所だけ直したつもりでも、スマホ表示、投稿一覧、固定ページ、問い合わせフォームなど別の場所が崩れることがあります。
20年以上ITエンジニアとしてWordPressの制作・保守・復旧に携わっている、よこやま良平です。この記事では、テーマ修正で表示崩れが起きる典型原因と、更新前に確認すべきポイントを初心者向けに整理します。
- テーマ修正で表示崩れが起きる主な原因が分かる
- 更新前に確認すべきバックアップ・子テーマ・CSSの見方が分かる
- 崩れた時に、どこから戻すべきか判断できる
- 外注前に伝えるべき情報を整理できる
テーマ修正そのものは悪い作業ではありません。見た目を整える、余白を調整する、ボタンを目立たせる、スマホ表示を直すなど、運用中のサイトではよくある作業です。
問題は、修正前の状態を残さず、影響範囲を確認せず、本番サイトへ直接反映してしまうことです。小さなCSS変更でも、条件によってはトップページ全体の幅、メニュー、投稿本文、フォームの表示に影響します。
この記事では、専門用語をできるだけ減らしながら、表示崩れが起きる理由と更新前チェックを順番に解説します。
こんなお悩みはありませんか？
- ある朝、サイトを開いたら真っ白画面になっていた
- 管理画面にログインできなくなって手が止まった
- 身に覚えのない記事やページが勝手に増えていた
- プラグインを更新したらサイト全体が崩れてしまった
- 以前バックアップを取ったか自分でも覚えていない
累計1,000件以上のWordPressトラブル対応の経験から、「壊れる前に備える」ためのチェックリストを1冊にまとめました。
ログイン・本体・バックアップ・サーバー・運用の5分野を、50項目で「危険度・確認方法・対処法」まで解説しています。
セキュリティプラグイン・WordPressの教科書も含めた3大特典を、
今なら無料で受け取れます。
目次
テーマ修正で表示崩れが起きる理由
テーマ修正で表示崩れが起きる一番の理由は、WordPressの画面が複数の要素で組み立てられているからです。
たとえば、ヘッダーの見た目はテーマファイルだけで決まるとは限りません。テーマ設定、追加CSS、メニュー設定、プラグインの出力、キャッシュ、ブラウザ幅なども関係します。
親テーマを直接変更すると更新で消える
WordPress公式のテーマ開発資料でも、子テーマは親テーマを直接編集せずカスタマイズを分離する方法として説明されています。親テーマを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。
よくあるのは、管理画面のテーマファイルエディターやFTPで `style.css`、`functions.php`、テンプレートファイルを直接触ってしまうケースです。更新後に「昨日までのデザインが戻った」「一部だけ消えた」という相談は、このパターンが多いです。
- いま有効化されているテーマが親テーマか子テーマか
- 過去の修正が追加CSS、子テーマ、プラグインのどこに入っているか
- テーマ更新で上書きされるファイルを直接編集していないか
CSSの優先順位が変わると一部だけ崩れる
CSSは、後から読み込まれた指定や、より強い指定が優先されます。そのため、同じ色や余白を指定しても、テーマ更新、プラグイン追加、キャッシュ最適化で優先順位が変わることがあります。
初心者が混乱しやすいのは、追加CSSに書いた内容が「効くページ」と「効かないページ」に分かれることです。これは、対象のHTML構造やクラス名がページごとに違うためです。
.entry-content .button {
margin-top: 24px;
}
.top-page .button {
margin-top: 8px;
}このように似た指定が複数あると、どのページでどちらが効くのかを見ないと判断できません。見た目だけを見て上書きすると、別のページで崩れます。
テーマ修正前に必ず確認したい注意点
テーマ修正前は、作業そのものよりも「戻せる状態」を作ることが最優先です。
現場では、修正内容が難しいから復旧できないのではなく、作業前の状態が残っていないために復旧判断が遅れるケースがあります。
バックアップはファイルとデータベースの両方を見る
WordPressの見た目は、テーマファイルだけではなくデータベース内の設定にも保存されています。追加CSS、ブロック設定、ウィジェット、メニュー、テーマカスタマイザーの値などは、ファイルだけ戻しても復旧しない場合があります。
作業前には、最低限ファイル一式とデータベースのバックアップを確認してください。サーバー会社の自動バックアップがある場合も、復元範囲と復元日時を見ておくことが大切です。
- 作業前のスクリーンショット
- 変更したファイル名と変更箇所
- 追加CSSやプラグイン設定の変更内容
- バックアップ取得日時と復元方法
本番サイトで直接試さない
小さな修正でも、本番サイトで直接試すのは危険です。特にアクセスがあるサイト、広告から流入しているサイト、問い合わせフォームが動いているサイトでは、数分の表示崩れでも機会損失になります。
理想はテスト環境で先に確認することです。難しい場合でも、作業時間をアクセスの少ない時間にする、直前バックアップを取る、変更箇所を1つずつ分けるだけでリスクは下がります。
テーマ修正で崩れやすい場所
テーマ修正では、共通パーツとレスポンシブ表示が特に崩れやすいです。
共通パーツとは、ヘッダー、フッター、サイドバー、投稿本文、ボタン、見出し、フォームなど、複数ページで使い回される部分です。1ページだけ見て問題がなくても、他のページで崩れることがあります。
スマホ表示は最後ではなく最初に見る
パソコンではきれいに見えても、スマホではメニューが重なる、ボタンがはみ出す、画像が大きすぎる、余白が詰まることがあります。
いまはスマホから見られるサイトが多いため、スマホ確認を最後に回すのはおすすめしません。修正したら、パソコン、タブレット幅、スマホ幅の順に確認します。
- スマホメニューの開閉位置
- 固定ヘッダーと本文の重なり
- 画像とボタンの横幅はみ出し
- フォーム入力欄の幅や余白
- 投稿一覧カードの高さずれ
プラグイン出力部分はテーマだけでは直せないことがある
問い合わせフォーム、予約フォーム、会員機能、ショートコード、ランキング表示などは、テーマではなくプラグインがHTMLを出力している場合があります。
この場合、テーマ側のCSSだけで強引に直すと、プラグイン更新時にまた崩れることがあります。どのプラグインが出力しているかを確認し、プラグイン設定で直せるのか、CSSで調整するのかを分けて考えます。
テーマ修正後に表示崩れが起きた時の戻し方
表示崩れが起きた時は、焦って複数箇所を同時に触らず、最後に変更した場所から順番に戻すのが安全です。
よくないのは、原因が分からないままCSS、プラグイン、テーマ設定、キャッシュ削除を一気に試すことです。たまたま直ったように見えても、原因が分からないため再発します。
変更を1つずつ戻して原因を切り分ける
まずは、直前に入れたCSSやコードをコメントアウトします。次に、テーマ設定やプラグイン設定の変更を戻します。それでも直らない場合に、バックアップ復元や専門家への相談を検討します。
/* 直前の変更を一時的に無効化して確認する例
.site-header {
position: fixed;
}
*/このように、削除ではなく一時的な無効化にすると、後から戻しやすくなります。作業メモを残しておくと、誰かに相談する時も説明しやすくなります。
キャッシュを疑う前に変更箇所を確認する
表示が変わらない時にキャッシュを削除するのは大切ですが、キャッシュだけを疑うと原因を見落とします。変更したCSSがそもそも読み込まれていない、対象クラスが違う、別の指定に負けていることもあります。
キャッシュ削除は、作業の最後ではなく確認手順の1つです。ブラウザキャッシュ、サーバーキャッシュ、キャッシュプラグイン、CDNの有無を分けて確認しましょう。
テーマ修正 更新前チェックの具体的な手順
更新前チェックは、難しい専門作業ではなく「今の状態を記録し、変更後に同じ場所を見比べる」ための準備です。
初心者の方ほど、いきなり修正画面を開く前に、確認するページと戻し方を決めておくことが大切です。作業前に順番を決めておけば、崩れた時も冷静に戻せます。
- トップページ、投稿ページ、固定ページ、問い合わせページを開く
- パソコン表示とスマホ表示のスクリーンショットを残す
- 追加CSS、子テーマ、プラグイン設定のどこを触るか決める
- 作業前のコードや設定値を別ファイルにコピーする
- 1つ変更したら、主要ページを確認してから次へ進む
ヘッダー、ボタン、スマホメニュー、フォームの余白を同時に変更すると、どの変更で崩れたのか分からなくなります。作業は1項目ずつ区切り、確認してから次へ進めてください。
特に、`!important` を多用したCSSや、テーマファイル内へ直接書き込むPHP修正は注意が必要です。すぐに効くため便利に見えますが、後から別の場所で効きすぎたり、更新時に消えたりします。
安全に進めるなら、「追加CSSで済む軽微な調整」「子テーマで管理すべき調整」「プラグインやテーマ設定で直すべき調整」を分けます。この切り分けができるだけで、表示崩れのリスクはかなり下がります。
テーマ修正を依頼する前に整理する情報
テーマ修正を依頼する時は、「どこが崩れているか」よりも「いつ、何をした後に崩れたか」を整理すると解決が早くなります。
復旧対応の現場では、URL、発生日時、作業内容、変更前後の画像、ログイン情報の有無がそろっているほど、原因の切り分けが早くなります。
スクリーンショットと対象URLをセットで残す
「トップページが崩れた」だけでは、原因を特定しにくいです。実際には、トップページのどの部分か、スマホだけなのか、ログイン中だけなのか、特定のブラウザだけなのかで対応が変わります。
スクリーンショットを残す時は、対象URL、発生端末、ブラウザ、発生日時も一緒にメモしてください。これだけで、やり取りの回数を減らせます。
自分で触った場所を隠さない
依頼時に「自分で少し触った」と伝えるのは恥ずかしいことではありません。むしろ、原因特定に必要な重要情報です。
追加CSS、テーマファイル、プラグイン設定、キャッシュ設定、サーバー設定のどこを触ったか分かるだけで、確認範囲を大きく絞れます。
子テーマは親テーマ更新で変更が消えにくい方法ですが、絶対に安全という意味ではありません。書いたCSSやPHPに問題があれば、子テーマでも表示崩れやエラーは起きます。
小さな修正でも、本番で直接試すのは避けた方が安全です。最低でも直前のCSSをコピーして残し、スマホ表示と主要ページを確認してから反映してください。
まず、更新前のバックアップ、子テーマの有無、追加CSS、キャッシュを確認します。親テーマを直接編集していた場合は、更新で変更が消えた可能性があります。
原因がCSSだけなら短時間で済むこともあります。ただし、テーマファイル、プラグイン、サーバーキャッシュ、PHPエラーが絡むと調査範囲が広がります。
テーマ修正 表示崩れを防ぐ更新前チェックまとめ
テーマ修正で表示崩れを防ぐには、修正の上手さよりも、作業前の確認と戻せる準備が重要です。
- 親テーマを直接編集していないか確認する
- 子テーマ、追加CSS、プラグイン設定の役割を分けて見る
- ファイルとデータベースのバックアップを確認する
- スマホ表示、フォーム、投稿一覧、固定ページを確認する
- 変更箇所と作業前スクリーンショットを残す
表示崩れは、原因が分かれば直せることが多いです。反対に、原因が分からないまま触り続けると、復旧に必要な情報まで失われることがあります。
不安がある場合は、作業前にバックアップと現在の状態を残し、専門家に確認してから進めるのが安全です。
WordPressの表示崩れが自分で直せない時は
ワードプレスのWordPressエラートラブル解決をしたいなら
クイックレスキューが解決します。
・WordPressが真っ白画面
・WordPressがログインできない
・ホームページのマルウェアや乗っ取り
・サイトの表示くずれ
・エラーが表示されている
これらでお悩みなら最短30分ですぐに解決します！
いまなら期間限定で
・万一改善されない場合は全額返金保証で安心!
・30日間動作保証で安心!
・初期費・調査料 0円で安心!