WordPressでCSSを変更したのに反映されないときの対処法

ということで、WordPressでCSSを変更したのに反映されないときの対処法を解説していきます。

WordPressでCSSを変更したのに反映されないときの対処法

この場合、考えられる原因は、

1.CSSの優先順位によって反映されていない 2.キャッシュが読み込まれているため

の2つがあります。

それぞれの解決方法を見ていきましょう！

CSSの優先順位によって反映されていない

こちらは、追加したCSSの優先順位が低いため、反映されていないという場合です。

例えば、以下のように『.box』のcolorを変えたい場合

//追加したCSS
.box__text {
color: blue;
}

//box要素のcolorを変更したい
.box {
color: red;
padding: 10px;
}

この場合は、追加したいCSSを『.box』の前に置いているため、

優先順位が『.box』より低くなり、反映されないということです。

なので、以下のように追加した『.box__text』を『.box』より後ろに書くことで、優先順位をあげるようにしましょう！

//box要素のcolorを変更したい
.box {
color: red;
padding: 10px;
}

//追加したCSS
.box__text {
color: blue;
}

また、優先順位をあげる方法として以下のように『!important』をつける方法があります。

.box {
color: red !important;
}

しかし、『!important』は、詳細度つまり優先順位を上げすぎてしまうため、

レイアウトに変更が出た場合を考えると、なるべく使用しないことをおすすめします！

キャッシュが読み込まれているため

CSSの優先順位も正しい場合は、キャッシュを削除してみましょう！

キャッシュの削除方法

1.Google Chromeを開き、右クリックでメニューを出し『検証』をクリック

2.以下の画像の記号を右クリックし、『キャッシュの消去とハード再読み込み』をクリックする

これで、キャッシュが消去されました!

まとめ

WordPressで、CSSが反映されない場合は、

1.CSSの優先順位によって反映されていない 2.キャッシュが読み込まれているため

の順番で試してみましょう！

それでは、最後まで読んでいただきありがとうございました。