WordPressではテーマが使えるから自分でデザインするということはほとんどありません。でも自分でCSSを書いてカスタマイズする方もいるはずです。
そういう時にCSS自体は間違っていないはずなのに正しく表示されない、ということが起こると原因を自力で見つけるのは大変ですよね
そこでWordPressでCSSが効かないときに確認したい３つのことと反映させるための解決策についてまとめました。
CSSが動かない原因と解決策
WordPressでCSSが文法的に間違っていないにもかかわらず効かない原因として考えられるのは次の３つです。
- 編集画面に直接CSSを書いてしまっている
- ブラウザのキャッシュが残っている
- セレクタの優先順位の問題
この３つの原因とスタイルを反映させるための解決策について順に解説します。
１．編集画面にCSSを書いてしまっている
WordPressでCSSが効かない原因として一番多いのがこれ
なぜ編集画面に直接書くと効かなくなってしまうかというと投稿ページのエディタの自動補完機能により余計なタグが入ってしまうからです。
例えば投稿ページの編集画面で「テキスト」タブを開き、次のようにテキストエディタ上でCSSを書いたとしましょう。
この時点でテキストエディタを開いたまま投稿を保存すれば正常にCSSは機能します。
問題なのは次のように「ビジュアル」タブをクリックしてビジュアルエディタを開いた場合
上画像のようにビジュアルエディタを開いた後、もう一度テキストエディタに戻ると自動補完によりstyleタグ内に余計なタグが入ってしまいます。
こういう風に編集画面で直接CSSを記述してしまうとタグ補完が働いてしまうのでスタイルが反映されなくなります。
なのでもし編集画面でCSSを書きたいなら次記事で紹介した「Script n Styles」プラグインを使うのがおススメです。
これを使うとエディタとは切り離してCSSやスクリプトが書けます。
また全てのページ共通でヘッダーなどにCSSを埋め込みたい場合は次記事で紹介した「Simple Custom CSS & JS」プラグインも使いやすいです。
もし編集画面からCSSを埋め込みむなら直接書かず、これらのプラグインを使って埋め込みましょう。
２．ブラウザのキャッシュが残っている
ブラウザでは一度表示したページを次回高速で表示するために次のようなデータがキャッシュとして保存されています。
- 画像ファイル
- 動画ファイル
- .jsや.cssなどの外部ファイル
キャッシュにはcssファイルも含まれているのでもしブラウザがページのキャッシュを保存しているとCSSを変更しても反映されない訳です。
なのでその対処法はブラウザのキャッシュをクリア(削除)すること
Chromeブラウザを使っている場合は次記事で紹介した「Clear Cache」を使うとワンクリックでキャッシュを削除できて便利です。
もしCSSが反映されない場合はまずブラウザのキャッシュを疑ってみましょう。
３．セレクタの優先順位の問題
CSSではセレクタを使ってそれに該当する要素にスタイルを指定できますが、このセレクタには次のような優先順位がありそれがCSSが効かない原因になることがあります。
id・クラスセレクタ > タイプセレクタ
まずセレクタは次のようにid・クラスセレクタとタイプセレクタの２つに分けられます。
- id・クラスセレクタ
idの場合は「#example」、クラスの場合は「.example」で表されるセレクタ
- タイプセレクタ
「h1」、「div」、「span」などの要素そのものを指定するセレクタ
この２つのセレクタの優先順位は「id・クラスセレクタ > タイプセレクタ」となっています。
なのでid・クラスセレクタがタイプセレクタの前にある場合、タイプセレクタに指定したスタイルが反映されないことがCSSの効かない原因になることがあります。
例えば次のようなdiv要素にスタイルを適用する場合を考えてみましょう。
<div class="example">
スタイルが適用される文章
</div>
そしてこのdiv要素に次のようなスタイルを適用します。
div.example{
color: purple;
}
div{
color: blue;
}
この例だとdiv要素のタイプセレクタが指定されて文字色が青色になると思ってしまいますが、実際は次のようにクラスセレクタで指定されたスタイルの紫色の方が優先されます。
idセレクタ > クラスセレクタ
さらにid・クラスセレクタ同士でも優先順位があり、「idセレクタ > クラスセレクタ」という関係になっています。
例えば次のようなidとクラスの両方を持つdiv要素を考えてみます。
<div id="example1" class="example2">
スタイルが適用される文章
</div>
そしてこのdiv要素に対して次のようなCSSを適用します。
#example1{
color: red;
}
.example2{
color: blue;
}
このときクラスセレクタの方が後にありますが、idセレクタの方が優先されるので文字色は次のように赤色になります。
セレクタの優先順位に注意
ここまでで紹介したようにセレクタには次のような優先順位があります。
これらの優先順位を知らないとなぜCSSが効かないのか数時間悩むことになります。
なので「idセレクタ > クラスセレクタ > タイプセレクタ」という優先順位を意識してCSSを書くようにしましょう。
まとめ
CSSが効かない場合に確認した方がいいことは次の３点
- 編集画面に直接CSSを書いてしまっている
- ブラウザのキャッシュが残っている
- セレクタの優先順位の問題
この中でも編集画面に直接CSSを記述してしまうのはWordPress初心者にありがちなミスなので個別ページごとにCSSを書きたいならプラグインを導入しましょう。
またブラウザのキャッシュが残っていてCSSが効かないということも頻繁に起こるのでこまめにブラウザのキャッシュは削除するようにするといいと思います。
以上WordPressでCSSが効かない原因と解決策についてでした。
フク郎
最新記事 by フク郎 (全て見る)
- 最大5,000円報酬をもらうために、招待を受入れていただけませんか？ - 8月 27, 2024