WordPressのCSS変更が反映されない原因と対処法トップ3!これで解決

※記事内にプロモーションが含まれています。

悩める人
悩める人

ワードプレスサイトを運営しています。css変更をしたのですが、サイトに反映されません。なぜですか?

きつねコード
きつねコード

wordpressでcssのカスタマイズを行った際に、すぐに変更が反映されないケースは非常に多いです。チェックすべき項目はおよそ目星がつくので、解決していきましょう!

この記事でわかること

  • wordpressでcss変更が反映されない時の対処法
  • サクッと解決できるるようになるためのポイント

この記事を書いているきつねコードは、ワードプレスを触り始めてから10年以上、このブログを作ってからも毎日ワードプレスを触っています。

ワードプレスでCSSを扱えるようになると、カスタマイズの幅が広がって楽しくなりますよね。

しかし、css変更をしても上手く反映されないことはよく起こります。その原因と対処法をチェックしていきましょう!

あなたのブログをプロ仕様に!

初心者でも簡単に使えるWordPressテーマをチェック

※PV・売上アップを狙うなら

結論:なぜWordPressでCSS変更が反映されないのか

ワードプレスでCSSのカスタマイズを行なっていて、変更が反映されないことはよく起こります。

私自身も

あれ〜、変わってないぞ。なんでだよ。

ということは頻繁にあります。

その時にチェックすべき項目は大体限られますので、落ち着いて確認していきましょう。

特に初心者の方は、当記事で一つずつ理解を深めてマスターしていただければと思います。一度理解できれば、解決しやすくなると思います。

先に、結論です。

css変更が反映されない時の原因と対処法

  • キャッシュが原因
    • スーパーリロードでサイトを確認する
    • もしくは、管理画面でwordpressキャッシュをクリアする(可能な場合)
  • cssが読み込まれていないことが原因
    • そもそもファイルが読まれているか確認(子テーマでのカスタマイズが初の方)
    • css記述内容のお作法的にミスがないか確認
  • cssの記述内容が間違っていることが原因
    • cssの優先度を高くすることを検討
    • 別のcssの書き方で実現することを検討

私もいつもこの順番で、確認しています。

cssが反映されない時の原因は、大きく分けると大体3つです。

きつねコード
きつねコード

最初はややこしく感じるかもですが、一度覚えてしまえばサクッと解決できるようになりますよ!

WordPressでCSS変更が反映されない時①キャッシュが原因である

一つ目は、キャッシュの影響です。これが、最も多いです。

キャッシュとは、webページを読み込んだときに一部のファイルを自動的に保存しておいて次回のアクセス時に負荷を軽く(より早く)読み込めるようにする仕組みのことです。

データが勝手に保持されるので、同じページに2回目以降アクセスすると、キャッシュが働くことが多いです。cssファイルもよくキャッシュされるため、意図せずして「古いバージョンのcssファイルが参照されている」という状態はよく起こります。

cssを修正した直後にサイトを確認すると、キャッシュが残っていると最新状態は反映されないことが多いですよ。

cssは特にキャッシュの影響を受けやすいので、真っ先に疑いましょう。

解決するのは、カンタンです。

対処法1スーパーリロードでサイトを確認する

解決法としては、「スーパーリロード」をした状態でサイト確認をすれば良いだけです。

スーパーリロードとは、キャッシュの存在を無視してページを再読み込みするやり方です。

ページを開いた状態で、下のショートカットキーを押して確認してみましょう!
(パソコンの場合です。)

スーパーリロードのショートカットキー

  • Windows(chromeやedge)Ctrl + F5
  • Mac(chromeやFirefox)Command + shift + R
  • Mac(safari)Shift + ツールバーの再読み込み(リロード)ボタン
きつねコード
きつねコード

きつねコードは、macでchromeブラウザ使用なので、Command+ shift + Rでいつも確認するクセをつけています。毎回です。

これで、cssの変更が上手く反映されていれば解決です。

もちろん、「キャッシュクリア」を実行しても良いですよ。
キャッシュクリアは、その名の通りキャッシュの存在を削除する方法です。
(キャッシュクリアすると閲覧記録なども消えるのが私は面倒くさいので、いつもスーパーリロードだけ使っていますが…。)

ちなみに「スマホ」でもよくキャッシュは残ります。スマホでワードプレス運営している方は、キャッシュクリアを行いましょう。(スマホのキャッシュも、なんかいろいろあってややこしいけど…。)

関連記事
キャッシュクリアの方法。各ブラウザ、PC、スマホ。
webディレクターが教えるキャッシュクリアの方法・chrome/edge/mac/windows/iphone/androidでキャッシュを消去

キャッシュとは? キャッシュとは、パソコンやスマホで表示したwebページのデータを一時的に端末に保存する機能です。次回に同じページにアクセスしたときに、インター ...

もしスーパーリロードでも直らない場合は、おそらく他に原因があるので探っていきます。

対処法2管理画面でwordpressキャッシュをクリアする(可能な場合)

実は、キャッシュにも色々と種類が存在します。

上記で対応した内容は、主に「ブラウザキャッシュ」と呼ばれるお話です。

他に関しては、深く突っ込む必要はありませんが、

wordpressにキャッシュ系プラグインを導入している人は管理画面を確認してください。

wordpress内にもキャッシュが保持されていて、管理画面からキャッシュをクリアできるケースがあります。

例えば、以下のようなキャッシュ系プラグイン、SEO系プラグインを入れている場合は要確認です。

  • WP Super Cache
  • WP Fastest Cache
  • W3 Total Cache
  • WP Rocket(有料プラグイン)など

私の場合は有料のWP Rocketを入れているので、いつも下の2つのボタンをクリックしてキャッシュクリアを行なっています。

・Clear and preload cache
・Clear Used CSS

WP Rocketプラグインのキャッシュクリア機能

wordpressキャッシュをクリアすると、cssが反映されることも実際にあります。私もいつもここはチェックしますね。

他のプラグインの場合も、ワードプレス管理画面の一番上のメニューバー、もしくはプラグインの設定画面のどこかにキャッシュクリアできる項目がないか探してみましょう。

もしくはwordpressのテーマ機能として、キャッシュクリア機能が付いている場合もあります。

例えば、cocoonテーマでは、キャッシュ削除できる機能が元々ついているので試してみると良いでしょう。

cocoonテーマのキャッシュ削除機能

wordpressキャッシュを確認しても反映されていなければ、他の原因を探りにいきましょう。

対処法3(おまけ)他のサーバーキャッシュもあるが...

ここはおまけですので、読み飛ばしても構いません。

きつねコード
きつねコード

私自身もこれが原因だったことは今まで無いので、多分関係ないかと…。断言はできませんが。

他にもサーバー側に保持されている「サーバーキャッシュ」という存在もあります。

あなたが利用しているレンタルサーバーにもよると思いますが、例えばエックスサーバーだと下のような設定があります。

こちらはレンタルサーバーの管理画面にログインしている画面ですね↓。

管理画面から「サーバーキャッシュ」の項目を探します。

エックスサーバーのサーバーキャッシュ設定

ここで、下のようにキャッシュクリアすることも実は可能です。

エックスサーバーのサーバーキャッシュを削除

管理画面にログインして探してみると、おそらくどのレンタルサーバーでも似たような項目はあるはずですので、キャッシュ削除を試してみても構いません。

ただし、私もサーバーキャッシュをONにしている状態ですが、これが原因で不具合が出たり、CSSが反映されていなかったことはこれまでありません。

確認の優先度としては低いかなと思います。(もしココが原因だったら、マジですみません笑)

WordPressでCSS変更が反映されない時cssが読み込まれていないことが原因

反映されない原因の2つ目として、キャッシュを確認した次は、

CSSのコードが正常に読み込まれているかどうか

を疑いましょう。

検証ツールを使用して、そもそも書いたcssが読み込まれているのかを見てみます。

関連記事
検証ツールの使い方とショートカットキー
絶対覚えるべき「検証ツール」の基本の使い方とショートカットキー

ブログ運営、webサイトを運営している人は絶対に覚えておくべき機能です!簡単なので、早めにマスターしておきましょう。 検証ツールとは? 「検証ツール」とは、ブラ ...

もしcssが正常に読まれていない場合、

  1. ファイル自体が悪いのか
  2. css記述内容が悪いのか

2パターンあるので、それぞれで説明していきます。

対処法1style.cssファイルが正常に読まれているか確認

cssカスタマイズが初めての方は、ここは確認しておくと良いです。

もしstyle.cssファイル自体が正常に読まれていなければ、当然カスタマイズ内容は効きませんよね。

まず前提知識として、

wordpressにおいてファイルのカスタマイズを行うには、親テーマではなく、子テーマで行うのが基本となります。

きつねコード
きつねコード

私もcssカスタマイズを行う時は、管理画面「外観」≫「テーマファイルエディター」の「子テーマのstyle.css」に全てを記述しています。

まだ慣れていない方は、ざっと確認してみてください。

  • cssは、子テーマのstyle.cssに書いていますか?
  • 親テーマではなく、子テーマを「有効」にしていますか?
  • 子テーマを自作した人は、style.cssfunctions.phpの記述に誤りはありませんか?
きつねコード
きつねコード

「子テーマのstyle.css」ではなく、「追加CSS」機能を使っている人は、もちろんそれでも大丈夫ですよ!

もし「追加CSS」機能にcssカスタマイズを書いている人は、ファイル自体が読み込まれないということはないと思うので、別の原因を探っていきましょう。

関連記事
wordpressの親テーマと子テーマとは?
WordPress「親テーマ・子テーマ」とは?使い方,カスタマイズ,後から作成する方法も解説!【10分でわかる】

そもそもWordPress「テーマ」とは? wordpressには「テーマ」という概念が存在します。 テーマとは、wordpressサイト全体の「デザイン」や「 ...

関連記事
wordpress追加cssの使い方
WordPressの追加CSS・追加CSSクラスとは?使い方を覚えてカスタマイズしよう!

この記事でわかること wordpressの追加CSSの使い方 wordpressの追加CSSクラスの使い方 この記事を書いているきつねコードは、ワードプレスを触 ...

cssファイル自体が読まれてるか具体的に確認したければ、
シンプルなcssコードを試しに書いてみれば分かります

管理画面「外観」≫「テーマファイルエディター」を開いて、子テーマを選択した状態でstyle.cssを開きましょう。

事例として、下のようなシンプルなコードを入れてみます。
(各ページのh1タイトルが赤くなるので気をつけてください。あくまでテストなので後で戻してくださいね。)

h1{
    color: red;
}

子テーマのstyle.cssに書いて「ファイルを更新」をクリックします。

wordpress子テーマのstyle.cssでカスタマイズを記述

(スーパーリロードをして)ページを確認してみると、記事ページのh1タイトルが赤くなっていますね。ちゃんとcssが効いています。
(利用しているテーマやカスタマイズ内容によっては効かないこともあります。)

wordpressのstyle.cssでh1タイトルの色を変更

検証ツールを見てみると、cssが読み込まれているか否かが分かります。右クリックで検証を開きます。

検証ツールは、頻繁に使用するのでこの機会に確実に覚えましょう!すごく便利です。

検証ツールを開く

検証ツールを開いたら、画面上の方にある矢印ボタンクリックしてからサイトの変更をかけた部分にカーソルを当てて一度クリックしましょう。

検証ツールで変更した部分のcssをチェック

そうすると、該当する部分のHTMLコードとCSSコードを閲覧することができます。

検証画面が小さくて見えにくい時は、画面のフチの部分を持つと伸び縮みできますよ。

とにかく、上のように検証ツールのCSSの部分にカスタマイズした記述が出てきていれば、cssはきちんと読まれています(実際に効いているかどうかは別として)。

cssはよく重複して沢山かかっているため、取り消し線になっていることもありますが、まずはここに出てきていればOKです。

cssが読まれているのに、効いていない場合は別の原因なので引き続き見ていきましょう。

対処法2CSSのお作法にミスがないか確認

記述したcssが検証ツールに出てこなかった場合は、

cssの記述内容にミスがないか確認してください。

チェックリストとしては、下記の通りです。

CSS初心者によくあるお作法のミス

  • カッコ{  } の一部を消している
    • これらは始まりと終わりのセットなので一方を消したらダメです。
  • コメントアウト/*  */の一部を消している
    • これも始まりと終わりのセットを壊すとエラーがでます。(コメントアウトの書き方は複数あり)
  • 全角文字や、全角スペースが入っている
    • cssの地の文で全角は使えません!特に全角スペースはやりがちなので気をつけて!(目には見えないけど入ってるとダメ)
  • コロン :とセミコロン ; を間違えている、抜けている
    • color: red;
    • font-size: 16px;
    • 抜けないように気をつけましょう。
  • id名やclass名を間違えている
    • idは # です。
    • classは . です。
    • 一文字でも間違っていると効かないので、よく見ましょう。
  • 指定方法を間違えている
    • 親子要素を指定したり、複数クラスを指定したり、hover要素にかけたりと、cssの指定方法は色々あります。
    • この辺りはcssのお勉強になるので、それぞれ調べてください。
  • メディアクエリの書き方が違う
    • スマホやタブレットのレスポンシブ対応にはメディアクエリを使いますが、書き方はよく確認してください。
    • 指定した画面サイズ内で確認しないと、当然cssは適用されません。検証ツールで、スマホマークをクリックした状態で見てみましょう。

cssのお作法を確認してOKであれば、あとは書く内容の問題です。

対処法3(おまけ)SEO対策でcssファイル縮小している人は確認

ここは、該当しそうな人だけ確認してください。

seo対策の一つで「cssファイルを縮小化」等の設定をONにしている人は、それが悪さをしてcssの変更が反映されないこともたまにあります。

「cssファイルの縮小化」はSEO対策系のプラグインを導入している、もしくはテーマ機能に付いているケースがあり、その設定をONにしている人はチェックしてみましょう。

例えば私の場合だと、WP Rocketプラグイン(有料のSEOプラグイン)を入れていて、こんな感じです↓

wp rocketプラグインのcssファイル縮小化

SEO対策のため、cssファイルの縮小化cssの配信最適化(optimize css delivery)もONにしています。
ただし、cssカスタマイズ内容に干渉しないように子テーマのstyle.css除外設定にしている状態です↑。

このように、除外設定がもし可能なのであれば子テーマのstyle.cssを除外すれば解決することもあります。

除外設定が出来ない場合は、諦めてCSSファイルの縮小化をOFFにするしかないかなと思います。

WordPressでCSS変更が反映されない時cssの記述内容が間違っていることが原因

ここまで確認を終えたら、残りの原因はcssの記述内容」の問題です。

今の書き方ではcssが効いていないので、他の書き方を検討しましょう。

大きく二つの方向性が考えられます。

  1. cssの優先度を高くする
  2. 別の書き方を検討する

対処法1cssの優先度を高くすることを検討

webサイトの見た目を決定するのがcssの役割ですが、cssが重複してかけられていて、効いていないというのはよくある話です。

そもそも「カスタマイズ」とは、他の誰かが開発したものに対して追加や上書きをしようとしているわけですから、既存のcssとぶつかって上手く効かないことはよくあるわけですね。

これこそが、カスタマイズ作業で一番頭を悩ませる点と言っても過言ではないでしょう。

例えば…

  • 文字の大きさ、font-size: 16px;となっているところにfont-size: 20px;と変えたい
  • 余白の広さ、margin: auto;となっているところにmargin: 10px 20px;と指定したい
  • 要素の配置、display: block;となっているところにdisplay: flex;をかけたい

みたいな感じですね。

この時に、もし同じ場所に同じcssが重複してかかっていると、反映されるのは当然1つだけです。

cssには、優先順位なるものが存在します。指定の仕方、書き方、書く順番などによって、最終的に反映されるコードが決まります。

細かくマスターするには結構ややこしい話ですので、優先順位が存在することだけはまず覚えておいてください。


例えば、要素を直接書くタイプセレクタ h1class .id # の順番で優先順位が高くなります

ですから、同じcssコードをclassとidの両方にかけていた場合は、idの方が優先されるということです。

こんな感じですね↓。(あくまでご参考まで)

wordpressのstyle.css

実際に見てみると…↓

wordpressのstyle.cssでカスタマイズした際のでcss優先順位

青と赤は、cssコードとしては読み込まれていますが打ち消されているのがわかりますか?

wordpressは、カスタマイズしたい箇所によってはcssが複雑にかかっていることもあり、意図通りに反映させるのが大変なこともあります。

きつねコード
きつねコード

余談ですけど、だから「wordpressテーマ」によっても、実は「カスタマイズしやすいorカスタマイズしにくい」がありますよ。そのテーマがどのようなコードで作られているか、によります。

カスタマイズで自分がやりたいことを実現するには、正しく(=まずは優先順位で負けない状態で)cssを記述してあげる必要があるわけですね。


では、具体的に優先度をあげるためにどうするか?ですよね。

優先度のルールを全て覚えるのは大変なので、ざっくりと

cssで指定する詳細度合いが高いほど、優先度は高くなる

と覚えておくと良いでしょう。

私がいつもやっているのは、検証ツールで確認して「今cssがかかっている指定方法を流用する」ということをしています。

事例として2パターンご紹介するので、大体の感覚が伝われば嬉しいです。


  • 【指定をそのまま】

    一つ目の具体例として、
    「サイドバープロフィール部分の余白を変更したいとしましょう。

    wordpressサイトのサイドバープロフィールの余白

    検証ツールを開いて、HTMLのどの要素に、余白に関するcssかかっているのか(あるいはかかっていないのか)を確かめます。

    HTML構造は、よく入れ子の構造となっています。▶︎マークで開閉できるので、ポチポチと押しながら、cssをチェックしてみましょう。

    検証ツールでcssを探す

    上の画像をみると、今回はmarginとpaddingがそれぞれかかっている状態です↑

    これを検証ツール上で、数字を書き換えてみます↓
    これでもしきちんと変更が反映されてOKであれば、あとはstyle.cssに記述するだけです。

    検証ツールで余白のcssを変更する

    ここで重要なポイントですが、指定するときは

    今かかっているのと同じ指定方法(詳細度合い)で書いてあげると反映されやすいです。

    こんな感じです↓。(すなわち、指定部分は検証ツールからコピペすれば良い)

    style.cssにカスタマイズを記述。

    わかりますか?

    検証ツールで見て、今指定されているそのままのやり方で、cssを追加してあげる、ということです。

    もし同じ詳細度合いで書くと、「子テーマのstyle.css」の記述の方が優先されます。

    書く順番の観点でいうと、子テーマのstyle.cssに書いている時点で優先度的には上になります。子テーマのstyle.cssは、一番最後に読み込まれるからです。

    サイトを確認してみましょう。

    意図通りに、paddingの余白を小さくする追加コードが効いていることが分かります。

    wordpressのstyle.cssのカスタマイズが成功

  • 【指定の優先度をあげる】

    もう一つ、事例を見てみましょう。

    今回は、「プロフィールのテキストの色を変えたい」としましょう。

    プロフィールテキストの色を変えたい

    検証ツールを開いて、どのHTML要素において、色のcss効いているのかを探すのでしたよね。

    今回は、どうやらaタグに直接かかっている様子ですね。(青のカラー)

    検証ツールで色のcssを探す

    次は、検証ツール上で変更してみるのでしたよね。色を変えたいので、試しにグリーンにしてみます↓。そうすると変更は反映されました。

    しかし、今回の場合は a タグに対して色が指定されているので、このままstyle.cssに追加することはできません。
    (もし a タグに対して指定してしまうと、サイト全体で他のaタグも含め全て色が変わってしまいます。)

    検証ツールでcssの指定方法を探す

    ですので、このような場合にはHTML構造を見て、より詳細度合いが上がるように指定してあげます。
    上の画像を見てください。aタグの一つ上に.author-nameというclassが存在していますよね。これを追加してあげます。

    style.cssで詳細度合いを上げてcssを指定する

    これで、サイトを確認してみましょう。

    意図通りにテキスト色が反映されていることがわかりますね。

    wordpressでcssカスタマイズに成功

以上の2パターンがキホンの形です。

カスタマイズ箇所やテーマによっては、ややこしい部分は出てきますが沢山いじっている間に慣れてくるのでぜひ挑戦してみてください!


最後に、!importantについての解説を加えておきます。

color: green !important;
font-size: 20px !important;
position: relative !important;

のように、最後に!importantをくっつけるとcssの優先度は一番高くなります。

これだと解決方法としては非常に簡単なので、使ってもまあ悪くはないのですが、

!importantは最終手段である

と思ってもらうのが良いかなと思います。

特に初心者の場合には、!importantに頼りがちでどんどん増えていくことも多いですが、そうすると!important同士がぶつかり合うということが起きて、徐々に「カスタマイズしにくいサイト」が出来上がっていきます。

私の実体験からも、将来どうカスタマイズするかはなかなか読めないですし、気も変わるものなので、カスタマイズ性の観点から!importantの使用はできるだけ避けるのがおすすめです。

あとあと面倒くさくなります。

きつねコード
きつねコード

ま、別にいいや!って人は良いですけどね。

対処法2別のcssの書き方で実現することを検討

cssの優先度を一番高めても反映されないときや、表示が崩れてしまうときは、

そもそもcssの命令が間違っている、その記述では変更されない可能性が高いです。

別の書き方でやりたいことを実現できないか、を試行錯誤する必要があります。

ここはもうcssのお勉強の範疇になりますので、ケースバイケースということになるかなと思います。

例えば…

  • text-align: center;ではなく、margin:auto;を使うのが実は正解だった
  • position: relative;と、position: absolute;がセットで機能していない
  • HTML要素の入れ子構造(階層構造)において、cssをかける場所を間違えている

など、上手くいかないケースは様々出てきます。

この辺りは、cssがどのように機能するのか一つずつ理解して覚えていくことが近道になりますので、ググりながらやっていくしかないかなと思います。

時間をかけるほど知識は必ず増えていくので、根気よくやってみてください!

まとめ

まとめ

  • wordpressでcss変更が反映されない原因は、①キャッシュが原因cssが読み込まれていないcssの記述内容が違う、のいずれかであることがほとんど。
  • 対処法としては、①スーパーリロードしてサイトを確認cssのお作法にミスがないかを確認cssの優先順位や別の書き方を確認すればよい。

  • この記事を書いた人

きつねコード

webディレクター/プログラマー。 web系の経験が10年以上あり、webサービスの立ち上げやメディア運営などをやっていました。若い時に起業していた時期もあるので、守備範囲は結構広めです。パソコンが苦手な人からの質問も受けるので、参考になればとの想いで当ブログを始めました。

人気記事

wordpressのおすすめテーマはこれ 1

この記事を書いているきつねコードは、10年以上wordpressに触れており、自身でもブログを運営しています。 当記事で紹介する以外にも、多くのwordpres ...

おすすめのASP 2

登録必須のおすすめASP(ブログ初心者〜上級者) ブログやサイトを作成したら、まずASPヘの登録は行いましょう。 結論を言うと、初心者でも上級者でも下記の王道5 ...

ラッコキーワードの使い方を徹底解説! 3

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

cocoonからaffinger6への移行手順 4

他のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 結論:cocoonとaffingerどっちが良い?移行 ...

cocoonからswellに移行する全手順 5

他のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswellどっちが良い? ...

AFFINGERタグ管理マネージャーとPVモニター 6

この記事でわかること 初心者に、「タグ管理マネージャー&PVモニター」が良い理由 Affinger6の専用プラグイン「タグ管理マネージャー」の使い方 Affin ...

-ブログ・wordpress運営, 使い方・初期設定
-, , ,