CSS修正が反映されない原因｜キャッシュ・優先順位・記述ミスを確認

CSS修正をしたのにWordPressの表示が変わらない場合、原因はコードの間違いだけとは限りません。ブラウザやサーバーのキャッシュ、CSSの優先順位、読み込み場所、セレクタの指定ミスなど、いくつかの原因が重なっていることがあります。

大切なのは、反映されないからといってCSSをむやみに足さないことです。まず「古いCSSを見ているのか」「別のCSSに上書きされているのか」「そもそも指定が届いていないのか」を順番に切り分けます。

よこやま良平

20年以上ITエンジニアとしてWordPressの制作・保守・復旧に携わっている、よこやま良平です。この記事では、現場でよく相談される「CSSを直したのに反映されない」問題を、原因別に切り分ける方法として整理します。

CSSは、書いた瞬間に必ず画面へ反映されるように見えます。しかし実際のWordPressでは、テーマ、プラグイン、ブロック、キャッシュ、CDN、ブラウザが関係します。

この記事では、初心者の方でも安全に確認できるように、最初に見るべき場所から順番に解説します。サイトを壊さないためにも、強い指定を足す前に原因を絞り込みましょう。

【無料プレゼント】
WordPress緊急チェック50

「自分のサイトは今、安全なのか？」
自信を持って答えられますか？

こんなお悩みはありませんか？

• ある朝、サイトを開いたら真っ白画面になっていた
• 管理画面にログインできなくなって手が止まった
• 身に覚えのない記事やページが勝手に増えていた
• プラグインを更新したらサイト全体が崩れてしまった
• 以前バックアップを取ったか自分でも覚えていない

累計1,000件以上のWordPressトラブル対応の経験から、「壊れる前に備える」ためのチェックリストを1冊にまとめました。
ログイン・本体・バックアップ・サーバー・運用の5分野を、50項目で「危険度・確認方法・対処法」まで解説しています。

セキュリティプラグイン・WordPressの教科書も含めた3大特典を、
今なら無料で受け取れます。

今すぐ無料ダウンロードする →

※登録後すぐにメールで特典をお届けします

CSS修正が反映されない時は原因を順番に切り分ける

CSS修正が反映されない時は、最初からコードを疑うのではなく、表示確認の経路から順番に切り分けるのが安全です。

理由は、WordPressでは「正しいCSSを書いたのに古い表示を見ている」ケースも多いからです。反対に、キャッシュを消しても変わらない場合は、優先順位や記述場所の問題へ進めます。

まず変更が保存されているか確認する

最初に確認するのは、CSSが保存されているかどうかです。追加CSSを開きっぱなしで保存していない、子テーマの別ファイルを編集していた、FTPで別の環境へアップしていた、という基本的なミスは珍しくありません。

特に本番環境とテスト環境を分けている場合、見ているサイトと編集しているサイトが違うことがあります。管理画面のURL、テーマ名、ファイルパスを確認してください。

一度に複数の原因を直そうとしない

反映されない時に、キャッシュ削除、CSS追記、プラグイン停止、テーマ編集を一気に行うと、何が効いたのか分からなくなります。復旧対応の現場でも、同時変更は原因調査を難しくします。

まずは保存確認、次にキャッシュ確認、その次に優先順位確認というように、1つずつ進めてください。変更した内容はメモに残しておくと、戻す時にも役立ちます。

CSS修正の基本｜WordPressの見た目を安全に調整する方法

CSS修正が反映されない原因1：キャッシュが古い表示を残している

CSS修正が反映されない原因として最も多いのは、古いCSSがキャッシュに残っていることです。

キャッシュは表示速度を上げるために便利ですが、修正確認の時には混乱の原因になります。ブラウザ、WordPressプラグイン、サーバー、CDNのどこかが古いファイルを返していると、変更したCSSが見えません。

ブラウザキャッシュを先に確認する

最初に試すのは、シークレットウィンドウや別ブラウザでの確認です。いつものブラウザだけで見ていると、古いCSSや画像を読み続けていることがあります。

パソコンでは変わらないのにスマホでは変わっている、またはその逆の場合もあります。端末ごとにキャッシュが違うため、複数環境で確認すると切り分けやすくなります。

WordPressやサーバー側のキャッシュも見る

ブラウザ側を確認しても変わらない場合は、WordPress側のキャッシュを確認します。キャッシュプラグイン、最適化プラグイン、サーバーの高速化機能、CDNを使っている場合は、それぞれ削除が必要です。

CSSやJavaScriptを結合・圧縮する機能を使っている場合、元のCSSを直しても結合済みファイルが更新されていないことがあります。表示速度改善系の設定を使っているサイトでは特に注意してください。

Webページがうまく表示されない？キャッシュ削除で解決！

CSS修正が反映されない原因2：優先順位で上書きされている

キャッシュを消しても反映されない場合は、CSSの優先順位で別の指定に上書きされている可能性があります。

CSSには、どの指定を優先するかというルールがあります。後から読み込まれたCSS、より具体的なセレクタ、インラインスタイル、!importantなどが関係します。

セレクタが弱いと別のCSSに負ける

たとえばボタンの色を変えたい時、単にクラス名を1つだけ指定しても、テーマやブロック側のより具体的な指定に負けることがあります。開発者ツールで見ると、指定に取り消し線が入っている場合があります。

この場合は、やみくもに!importantを付ける前に、対象要素の親クラスやブロッククラスを含めて、必要な範囲だけ具体的に指定します。

/* 効きにくい例 */
.button {
  background: #2f80ed;
}

/* 対象を絞った例 */
.entry-content .wp-block-button .wp-block-button__link {
  background: #2f80ed;
}

!importantを最初から使わない

反映されない時に!importantを付ければ一時的に変わることがあります。しかし、強制指定を増やしすぎると、後から別の修正が効かなくなります。

特にテーマ全体やブロック共通パーツへ!importantを使うと、別ページの表示崩れにつながります。どうしても使う場合は、対象ページや対象ブロックを絞って最小限にしてください。

テーマ修正のやり方｜WordPressでデザインを安全に変更する方法

CSS修正が反映されない原因3：記述ミスや指定場所が違う

キャッシュでも優先順位でもない場合は、CSSの記述ミス、セレクタ違い、指定場所の違いを確認します。

CSSは1文字の違いで効かなくなることがあります。全角記号、閉じ忘れ、プロパティ名の間違い、クラス名の打ち間違い、メディアクエリの範囲違いなどを見落としやすいです。

クラス名と対象ページを取り違えていないか見る

見た目が同じボタンでも、ページによってクラス名やHTML構造が違うことがあります。トップページで効いたCSSが投稿ページでは効かない、固定ページだけ反映されない、というケースもあります。

対象要素を右クリックして、開発者ツールで実際のクラス名を確認してください。見た目の名前ではなく、HTMLに出力されているクラス名を見ることが大切です。

【※画像挿入※ Chrome開発者ツールで対象要素のクラス名と適用CSSを確認している画面】

CSSの閉じ忘れや全角記号に注意する

CSSでは、波括弧、セミコロン、コロン、括弧の閉じ忘れで後続の指定まで効かなくなることがあります。日本語入力のまま全角記号が混ざると、見た目では気づきにくいこともあります。

/* 閉じ括弧がない例 */
.sample-box {
  padding: 24px;
  background: #f7fbff;

/* プロパティ名の入力ミス */
.sample-title {
  font-siz: 20px;
}

追加CSSに貼った後で効かない場合は、一度小さなCSSだけに分けて確認してください。1つずつ効くか確認すると、どの行で止まっているか分かりやすくなります。

スマホ用CSSの条件が合っているか確認する

スマホ表示だけ反映されない場合は、メディアクエリの条件が合っていない可能性があります。たとえば、画面幅の条件が狭すぎる、別のブレイクポイントで上書きされている、スマホ用CSSが後から読み込まれているなどです。

@media (max-width: 767px) {
  .sample-card {
    width: 100%;
    margin-bottom: 16px;
  }
}

パソコンとスマホで別々の指定がある場合、どちらを直しているのかを確認してください。スマホだけ崩れているのに、パソコン用のCSSを直しても反映されません。

WordPress修正でサイトが壊れる原因とは？安全に直す考え方

CSS修正が反映されない時の確認手順

CSS修正が反映されない時は、次の順番で確認すると原因を絞り込みやすくなります。

この順番は、現場での切り分けでもよく使います。簡単に確認できるものから進めることで、不要なテーマ編集や強制指定を避けられます。

開発者ツールで読み込みと上書きを見る

CSSが反映されているかを確認するには、ブラウザの開発者ツールが役立ちます。対象要素を選ぶと、どのCSSが効いているか、どのCSSが上書きされているかを確認できます。

CSSが表示されていないなら読み込み場所やキャッシュの問題、表示されているのに取り消し線があるなら優先順位の問題、そもそも対象要素を選べていないならセレクタの問題を疑います。

変更前の状態に戻せるようにしておく

原因を調べる途中でCSSを何度も追加すると、修正前より状況が悪くなることがあります。追加CSS、子テーマ、テーマファイルのどこを触ったかを必ず残してください。

作業前のバックアップやスクリーンショットがあると、原因調査の途中でも戻せます。特に本番サイトで作業する場合は、戻せる状態を作ってから進めるのが基本です。

WordPress修正の依頼前チェックリスト｜原因を切り分ける方法

CSS修正が反映されない時に依頼した方がよいケース

CSS修正が反映されない原因を自分で切り分けられない場合は、作業を重ねる前に依頼した方が安全です。

理由は、CSSだけの問題に見えても、テーマ構造、プラグイン出力、キャッシュ設定、PHPテンプレートが関係していることがあるからです。CSSを足すだけでは一時的に見た目を隠すだけになることがあります。

複数ページで崩れている場合

トップページ、投稿ページ、固定ページ、スマホ表示など複数箇所で崩れている場合、共通テンプレートやテーマ設定が関係している可能性があります。

この場合、1ページずつCSSを足すより、共通の原因を直した方が安全です。場当たり的なCSSを増やすと、後から保守しづらくなります。

テーマ更新やプラグイン更新後に変わった場合

テーマやプラグイン更新後にCSSが効かなくなった場合、クラス名やHTML構造が変わった可能性があります。以前のCSSをそのまま強くしても、正しく直らないことがあります。

更新後の構造を確認し、必要なCSSだけを書き直す方が安全です。管理画面に不具合が出ている、PHPエラーも出ている、フォームが動かない場合は、CSS以外も確認してください。

CSS修正が反映されない時のよくある質問

CSS修正が反映されない原因は焦らず確認すれば見つけやすい

CSS修正が反映されない時は、焦ってコードを足すのではなく、保存、キャッシュ、優先順位、記述ミス、スマホ条件の順に確認することが大切です。

特に、キャッシュと優先順位はよくある原因です。表示が変わらないからといって!importantを増やす前に、どのCSSが読み込まれているか、どの指定に上書きされているかを確認しましょう。

小さな表示調整でも、WordPress全体の見た目に影響することがあります。自分で切り分けが難しい場合は、変更を重ねる前に現在の状態を残し、原因調査から進めてください。

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

WordPress保守・不正アクセス対策・マルウェア駆除・WordPressクイックレスキュー365

ワードプレスのWordPressエラートラブル解決をしたいなら
クイックレスキューが解決します。

これらでお悩みなら最短30分ですぐに解決します！

いまなら期間限定で