2021/09/10 (更新日: 2021/12/02)

WordPressのCSSが反映されない4つの原因と12のチェックリスト

ブログ

※本ページにはプロモーションが含まれている場合があります。

本記事がおすすめの方

・WordPressでCSSを編集したのに反映されない！！
┗(全く反映されない・一部が反映されないどっちもOK)
・12のチェックリストで漏れなく確実に解決したい！
・画像でわかりやすく対処法を知りたい！

本記事の内容

WordPressでCSSが反映されない4つの原因
12のチェックリスト
それぞれの対処法(画像と図で解説)

CSSをいじったのにデザインが反映されない。。。反映される場所と反映されない場所がある。。。

WordPressでブログをしている人なら誰でも一度はこの壁にぶつかると思います。

「CSSなんて細かいことは全くわからないし、WordPressも初心者でお手上げ！」

という方も多いと思いますが、

こんな方でも、CSSを無事に反映させることは実はとっても簡単です。

というわけで本記事では、WordPressの「追加CSS」に記述したCSSや子テーマのCSSが反映されない時の4つの大きな原因と12のチェックリスト・対処法をご紹介します。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

本記事を読むと、初心者でもCSSでのカスタマイズが無事反映されるようになるだけでなく、WordPressのカスタマイズのためのCSSの理解もぐんと深まります。

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

WordPressでCSSが反映されない！4つの原因と12のチェックリストを解説
WordPressでCSSが反映されない原因：CSSの優先度
WordPressでCSSが反映されない原因：文法の間違いとスペルミス
WordPressでCSSが反映されない原因：CSSファイルを読み込めていない
- ⑩子テーマのstyle.cssを読み込めていない
WordPressでCSSが反映されない原因：キャッシュが残っている
WordPressのCSSが反映されない問題はこれで解決！

WordPressでCSSが反映されない！4つの原因と12のチェックリストを解説

WordPressでCSSが反映されない原因は大きく4つあり、さらに12のチェックリストに分けることができます。

CSSの優先度
- ①後ろのCSSに上書きされている
- ②セレクタの優先度の順番で負けている
- ③セレクタの詳細度が負けている
文法の間違いとスペルミス
- ④セレクタが間違っている
- ⑤プロパティが間違っている
- ⑥値が間違っている
- ⑦コロン(:)やセミコロン(;)が全角・書き忘れ
- ⑧中カッコ(})が全角・書き忘れ
- ⑨全角の空白が入っている
CSSファイルを読み込めていない
- ⑩子テーマのstyle.cssを読み込めていない
キャッシュが残っている
- ⑪ブラウザキャッシュが残っている
- ⑫サーバーキャッシュが残っている

4つの原因と12のチェックリスト・そのチェックリストに対する対処法をそれぞれ順番に解説していきます。

⇡目次へ戻る

WordPressでCSSが反映されない原因：CSSの優先度

CSSがうまく反映されない1つ目の原因は、自分が使いたいCSSのコードよりも他のCSSのコードが優先されていて、自分のコードが打ち消されていることです。

優先？

CSSのコードには優先順位があるんだ♪

CSSのコードには優先順位があり、具体的には以下の3つがポイントになります。

CSSの優先度の3つのポイント

後から読み込まれたCSSが優先される
ID・クラス・要素の順で優先度が高い
詳細に指定するほど優先度が高い

それぞれ順に解説していくよ♪

①後ろのCSSに上書きされている

CSSは後から読み込まれたコードの方が優先されます。

例えば、以下のようにCSSを記述している場合

h2{
  font-size:18px;
}

h2{
  font-size:24px; /* こっちが反映される */
}

後ろに書かれたCSSが優先されて、前に書かれたコードは打ち消されるので、

この場合h2のフォントサイズは24pxになります。

memo

子テーマのCSSや外観>カスタマイズにある「追加CSS」のCSSは、親テーマのCSSよりも後に読み込まれるので、親テーマのCSSよりも優先されるという仕組みになています。

②セレクタの優先度の順番で負けている

そもそもCSSでは上の画像のように、以下の3つを使ってデザインを指定します。

セレクタ：どこの
プロパティ：何を
値：どうするのか

どこにデザインを適用するかを指定するための箇所をセレクタと呼びますが、このセレクタは次の順番で優先されます。

id
class
要素

つまりclassで指定するよりもidで指定する方が優先されるということ！具体例で解説するね♪

セレクタの優先度の具体例

例えば、以下のような見出しのHTMLコードとCSSコードがあった場合

<h2 id="test" class="test">これは見出しです</h2>

#test{ /* idで指定 */
  font-size:18px;
}

.test{ /* classで指定 */
  font-size:22px;
}

h2{ /* 要素で指定 */
  font-size:24px;
}

この場合、idで指定(#test)している最初のCSSが優先されて、18pxが適用されます。

memo

同じセレクタで指定している場合は後ろに書かれたCSSが優先されますが、idやクラスなど異なるセレクタで指定している場合はセレクタの優先度が適用されます。

③セレクタの詳細度が負けている

セレクタの優先度は

「id・クラス・要素のどれを使うか」

だけでなく、

「どれだけ細かく指定しているか」

でも優先度が変わり、細かく指定すればするほど優先されるようになります。

例えば！！

次のようなHTMLとCSSがあった場合

<div>
  <h2 id="test" class="test">これは見出しです</h2>
</div>

div h2#test{ /* 「div」の中の、idが「test」の「h2」 */
  font-size:18px;
}

h2#test{ /* idが「test」の「h2」 */
  font-size:22px;
}

#test{ /* idが「test」のもの全て */
  font-size:24px;
}

この場合、

「#test」というidだけで指定している3番目のCSSよりも、

「h2」という要素と「#test」のidの2つで指定している2番目のCSSよりも、

「div」という要素と「h2」という要素と「#test」のidの3つで指定している1番目のCSSが最も優先されて、18pxが適用されます。

ポイント

※セレクタを半角スペースで区切ると「~~の中の」という意味(子孫要素)。セレクタをスペースなしで並べると「AND条件」になります。詳しくは後ほど「対処法③セレクタを詳細に指定する」の見出しで解説します。

これがとっても大事！！この優先度でデザインが反映されないことが多いよ！

参考

>> CSSの詳細度

対処法：CSSの優先度を上げよう

それでは、他のCSSが優先されていることが原因でCSSが反映されない場合の対処法を解説します。

以下の2ステップで進めましょう。

まずはブラウザのツールを使ってCSSの優先度を確認する
確認した優先度に合わせて優先度を上げる

順番に解説するよ♪簡単だから安心してね♪

まずはツールでCSSの優先度をチェック

まずはどのCSSに優先度が負けているのかを確認しましょう。

まずは確認したいページをブラウザで開き、CSSがうまく反映されない箇所にカーソルを合わせて右クリックします。

※ブラウザはGoogle Chromeを使って解説しています。

「検証」をクリックします。

上記のように、「デベロッパーツール」というものが開かれます。

デベロッパーツールとは

ページのHTMLコードやCSSをはじめとして様々なデータを確認することができるツール。

デベロッパーツールの下の方に、選択した要素に適用されているCSSの一覧が表示されています。

ここの表示で、

横線で消されているCSS：優先度が低くて打ち消されているCSS
打ち消されていないCSS：優先度が高くて適用されているCSS

です。

何に打ち消されているのかを把握しよう！！

ここで、何に優先度で負けているのかを確認できたら、それに合わせて次の4つの対処法から選んで改善しましょう。

同じセレクタなのに打ち消されている
→対処法①CSSを後ろの方に書く
idやclassなどの優先度で負けている
→対処法②優先度の高いセレクタを使う
詳細度で負けている
→対処法③セレクタを詳細に指定する
最終手段
→対処法④「!important」を使う

対処法①CSSを後ろの方に書く

同じセレクタで指定して後ろのCSSに負けている場合は、CSSを後ろに移動させるだけでCSSが反映されるようになります。

追加CSSにたくさんCSSを書きすぎて、自分で自分のコードを上書きしていることも多いため、一番下に移動させてみましょう。

対処法②優先度の高いセレクタを使う

より確実に反映させるには、優先度の高いセレクタを使いましょう。

優先度の順番は次の通りです。

id
class
要素

例えば、要素で指定したCSSがclassで指定したCSSに負けている場合は、idで指定することで優先度を上げることができます。

memo

idは#で指定、classは.で指定できます。

対処法③セレクタを詳細に指定する

さらに確実に優先度を上げるには、より詳細にセレクタを指定するのがおすすめです。

詳細に指定するためには以下の2つを使いましょう。

子孫要素
セレクタのAND条件

子孫要素

子孫要素とは

あるタグの中に入っているタグのこと。

例えば以下のHTMLの場合、

<div>
  <div>
    <h2>サンプルの見出しです。</h2>
    <p>サンプルのテキストです。</p>
    <p>サンプルの<span>テキスト</span>です。</p>
  </div>
</div>

一番外側(上の階層)のdivの中にある要素は、

・1つ中にあるdivも、
・その中のh2やpも、
・さらにその中のspanも

divの子孫要素です。

子孫要素の使い方

セレクタを空白で区切ることで、子孫要素を指定することができます。

例えば以下のHTMLのpタグを指定したい場合は以下のようにCSSを記述します。

<div>
  <p id="sample">サンプルのテキストです。</p>
</div>

div p{
  font-size:1.1rem;
}

セレクタのAND条件

空白ではなくセレクタをくっつけて並べることで、AND条件にすることができます。

AND条件とは

『idが「sample」のpタグ』というように複数の条件でセレクタを指定すること。

例えば以下のHTMLのpタグを指定したい場合は以下のようにCSSを記述します。

<div>
  <p id="sample">サンプルのテキストです。</p>
</div>

p#sample{
  font-size:1.1rem;
}

memo

子孫要素とAND条件をいくつも組み合わせて、できるだけ細かく指定しよう！

対処法④「!important」を使う

優先度を上げる最後の手段としてはCSSのプロパティの後に!importantを付けることです。

p#sample{
  font-size:22px !important;
}

memo

!importantを付けることで、そのCSSは最優先されます。ただし、いくつも!importantを使っているといろんなコードがぶつかってわからなくなるので、頻繁に使うことはおすすめしません。

⇡目次へ戻る

WordPressでCSSが反映されない原因：文法の間違いとスペルミス

CSSが反映されない2つ目の大きな原因は、CSSの文法の間違いやスペルミスです。

チェックリストは以下の6つ！！

セレクタが間違っている
プロパティが間違っている
値が間違っている
コロン(:)やセミコロン(;)が全角・書き忘れ
中カッコ(})が全角・書き忘れ
全角の空白が入っている

ちなみに基本の形はこの画像の通り！これを踏まえて、6つのチェックリストについて順番に解説していくよ♪

④セレクタが間違っている

セレクタのミスはかなりよくある原因です。

よくある4つのパターンを解説します。

id・class・要素のミス
子孫要素と子要素のミス
子孫要素とAND条件のミス
「:first-child 」と「:first-of-type」・「:last-child」と「 :last-of-type」のミス

それぞれ順番に解説するよ♪

id・class・要素のミス

id・class・要素はそれぞれ次のように指定します。

<p id="sample-id" class="sample-class">テキストのサンプルです。</p>

p{
  color:red;
}

#sample-id{ /*idは「#」で指定する */
  padding:0;
}

.sample-class{ /*classは「.」で指定する */
  margin:0;
}

memo

idを「.」で指定していたり、classを「#」で指定しているとCSSは正しく反映されません。これがよくある間違いです。

子孫要素と子要素のミス

子孫要素は、ある要素の下の全ての階層の要素に適用しますが、

子要素は、ある要素の直下の階層の要素しか適用しません。

例えば

div p{ /* 子孫要素：半角スペースで区切る */
  font-size:1.2rem;
}

div>p{ /* 子要素：「>」で区切る */
  font-size:1.2rem;
}

memo

「>」を使っていると子(直下の要素)しか反映されないので注意です。子孫要素のつもりで誤って子要素を使っているのがよくある間違いです。

子孫要素とAND条件のミス

AND条件とは

複数のセレクタを指定し、どちらも当てはまる要素に対してCSSを適用する指定方法。

例えば

classが「sample」の「div」要素

を指定したい場合は以下のようにdivと#sampleをつなげて指定します。

div#sample{ /* 正しいAND条件の書き方 */
  font-size:1.2rem;
}

div #sample{ /* 間違い：子孫要素になっている */
  font-size:1.2rem;
}

memo

間に空白のスペースを入れてしまうと、AND条件ではなく子孫要素の指定になってしまうので注意です。

「:first-child 」と「:first-of-type」・「:last-child」と「 :last-of-type」のミス

4つ目は、以下の使い分けの間違いです。

:first-childと:first-of-type(最初の子要素を指定)
:last-childと:last-of-type(最後の子要素を指定)

:first-childと:last-childは、全ての要素を含めての最初/最後の子要素ですが、
:first-of-typeと:last-of-typeは、その要素だけで数えて最初/最後の子要素を表します。

例えば以下の場合

<div>
　<span>サンプルのテキストです</span>
  <p>1つ目のpです。</p>
  <p>2つ目のpです。</p>
  <p>3つ目のpです。</p>
  <p>4つ目のpです。</p>
　<span>サンプルのテキストです</span>
</div>

1つ目のpを指定するには、
div p:first-childではなくdiv p:first-of-typeで指定します。

4つ目のpを指定するには、
div p:last-childではなくdiv p:last-of-typeで指定します。

理由は、divの中の最初も最後もspanがあるので、:first-childと:last-childはそれぞれ最初/最後のspanを含めてカウントするからです。

⑤プロパティが間違っている

プロパティを間違えているとCSSが正しく反映されません。
プロパティのミスは次の2つがあります。

そもそもスペルミスをしている
その要素に使えないプロパティを使用している

例えばimgタグにはtext-align:center;を使えないなど、その要素に使えるプロパティと使えないプロパティがあるので気を付けましょう。

参考

>> CSSリファレンス

⑥値が間違っている

値が間違っている場合もCSSが正しく反映されません。

次の2つのミスがあります。

そもそもスペルミスをしている
値の指定の仕方が間違っている

例えばプロパティtext-alignはcenterやrightで指定しますが、middleなどの間違った値を指定してしまう間違いなどがあります。

⑦コロン(:)やセミコロン(;)が全角・書き忘れ

コロン(:)とセミコロン(;)は次の2つに気を付けましょう。

コロンとセミコロンの位置
全角ではなく半角を使う

コロンは次のようにプロパティの後に、セミコロンは値の後に指定します。

p{
  font-size:18px;
}

また、コロンやセミコロンは必ず半角にしましょう。

注意

コピペで使えるデザインをネットで検索してコードをコピーしてきた場合は、貼り付けると全角になることがあります。半角になっているか必ずチェックしましょう。

これが意外と多い！

⑧中カッコ(})が全角・書き忘れ

中カッコ(})は次の2つに注意しましょう。

閉じ忘れに注意
必ず半角にする

中カッコの閉じ忘れは意外に多いミスです。

また、ネットで検索してコピーしてきたCSSはコロンとセミコロンと同様、全角になっていることがあるので注意です。

⑨全角の空白が入っている

実はこれもかなり重要！！

見た目では全く間違いがないのにCSSがうまく反映されないなら、コードのどこかに全角の空白が入っていないかを疑ってみましょう。

注意

ネットで検索してコピーしてきたCSSコードをそのまま貼り付けるとよく起こります。

特によくある場所としては、

コメントアウトの前後
プロパティの前

などに全角の空白が入っていることが多いです。

⇡目次へ戻る

WordPressでCSSが反映されない原因：CSSファイルを読み込めていない

3つ目の原因は、CSSのファイル自体を読み込めていないことです。

そんなことあるの？

テーマによっては、子テーマのstyle.cssを読み込むためのコードを自分で追加する必要があったりするんだ♪

⑩子テーマのstyle.cssを読み込めていない

「外観」→「カスタマイズ」→「追加CSS」

にCSSを記述している場合は関係ありませんが、

子テーマのstyle.cssに記述している場合はそもそもstyle.cssを読み込めていない場合があります。

子テーマのstyle.cssが読み込めているか確認する方法

まずは次の手順で、style.cssを読み込めているかいないかを確認しましょう。

ページをGoogle Chromeで開いたら、画面上で右クリックをして「検証」をクリックします。

上の画像のようにデベロッパーツールが表示されるので、

「Source」をクリックします。

・wp-content > theme/テーマ名
・wp-content > theme/テーマ名 > css

のどちらかにstyle.cssがあるはずです。

memo

ここにstyle.cssが表示されていない場合は、そもそも子テーマのstyle.cssが読み込まれていない可能性が高いので、次の手順で読み込むための設定を行いましょう。

対処法：子テーマのstyle.cssを読み込むようにする

注意

style.cssを読み込ませるにはfunction.php変更します。function.phpを変更する前には、以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

子テーマのstyle.cssを読み込ませるためには、WordPressの管理画面から

外観 > テーマエディター > function.php

を開き、function.phpに以下のコードを記載するだけでOKです。

add_action( 'wp_enqueue_scripts', 'func_load_style_child' ); 

function func_load_style_child() { 
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

上記のコードをfunction.phpに追記して、保存して読み込めば設定は完了です。

⇡目次へ戻る

WordPressでCSSが反映されない原因：キャッシュが残っている

4つ目の原因は、古いキャッシュが残っていてCSSを変更する前のページのデータが表示されていることです。

キャッシュとは

一度表示されたページのデータをブラウザやサーバーに保存しておき、同じページを2回目以降に表示する際には保存しておいたデータを表示することで、読み込み時間を省略して高速でページを表示するための機能。

つまり、古いキャッシュが残っているためにそのキャッシュのページがそのまま表示され、せっかく変更したCSSが読み込まれない、ということがデザインが反映されない原因です。

古いキャッシュを削除すれば、無事にCSSが反映されるようになります。

次の2種類のキャッシュを削除しましょう。

ブラウザキャッシュ
サーバーキャッシュ

それぞれ順番に解説します。

キャッシュについては以下の記事で詳しく解説しています。
>> WordPressでキャッシュを削除する方法！カスタマイズが反映されない時はキャッシュ削除で解決！

⑪ブラウザキャッシュが残っている

ブラウザキャッシュは名前の通り、ブラウザに保存されているキャッシュです。

ブラウザのキャッシュは削除よりもスーパーリロードの方が簡単なので、

キャッシュを削除したページを開いたら、以下のショートカットキーでスーパーリロードをしましょう。

Chromeでのスーパーリロード

Windowsの場合：「Shift」+「F5」
Macの場合「command」+「shift」+「R」

Safariでのスーパーリロード

Macの場合：「command」+「R」

ブラウザキャッシュの削除の仕方については以下の記事で詳しく解説しています。
>> WordPressでキャッシュを削除する方法！カスタマイズが反映されない時はキャッシュ削除で解決！

⑫サーバーキャッシュが残っている

サーバーキャッシュは、サーバー上に保存されているキャッシュです。

※W3 Total Cacheなどのキャッシュプラグインや、Autoptimizeなどのファイル最適化プラグインを利用している場合に限ります。

上記のプラグインを利用している場合は、それらのプラグインの機能でキャッシュの削除をすることでCSSが反映されるようになります。

各キャッシュプラグインでのキャッシュの削除方法は以下の記事で詳しく解説しています。

>> WordPressでキャッシュを削除する方法！カスタマイズが反映されない時はキャッシュ削除で解決！

WordPressでキャッシュを削除する方法！カスタマイズが反映されない時はキャッシュ削除で解決！ WordPressのカスタマイズや外観・スタイルの変更が反映されない時はキャッシュを削除しましょう。そもそもキャッシュとは何か・WordPressで削除すべき「ブラウザキャッシュ」と「プラグインのキャッシュ(サーバーキャッシュ)」についても解説。キャッシュの削除方法はブラウザごと・プラグインごとに詳しく解説しています。

キャッシュプラグインって何？という方は以下の記事で詳しく解説しています。
>> 【2021年最新】WordPressのキャッシュプラグインおすすめ8選【比較表付き】

補足：CSSファイルの読み込みURLにパラメータを付ける

「毎回自分でキャッシュを削除するのはめんどくさい！！」

という方は、CSSを更新する度に自動で勝手にキャッシュが削除されるようにすることも可能です。

memo

正確にはキャッシュを削除するというよりは、CSSファイルを読み込むときのURLが自動で変更されるようにします。

CSSファイルのURLが変わっていれば、キャッシュを使わずに新しいURLでCSSファイルを読み込むので、キャッシュではなく最新のCSSが読み込まれるという仕組みです。

CSSファイルのURLにパラメータをつける手順

WordPressの管理画面 > 外観 > テーマエディター > header.php
※テーマによってはheader.phpではないこともあります。

で、style.cssを読み込んでいる記述を探します。

例えば以下の通り。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css"/>

これを以下のように変更します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?<?php echo date("ymdHis",filemtime( get_template_directory_uri()."/style.css")); ?>" type="text/css"/>

memo

これで、読み込むCSSのURLの後に、CSSファイルを変更した日付の数値がパラメータとして付与されるようになり、CSSを更新した際もキャッシュの影響を受けずに反映させることができます。

⇡目次へ戻る