★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

WordPressでCSSが反映されないときに確認したい3つのこと

WordPressではテーマが使えるから自分でデザインするということはほとんどありません。でも自分でCSSを書いてカスタマイズする方もいるはずです。

そういう時にCSS自体は間違っていないはずなのに正しく表示されない、ということが起こると原因を自力で見つけるのは大変ですよね

そこでWordPressでCSSが効かないときに確認したい3つのことと反映させるための解決策についてまとめました。

CSSが動かない原因と解決策

WordPressでCSSが文法的に間違っていないにもかかわらず効かない原因として考えられるのは次の3つです。

  • 編集画面に直接CSSを書いてしまっている
  • ブラウザのキャッシュが残っている
  • セレクタの優先順位の問題

この3つの原因とスタイルを反映させるための解決策について順に解説します。

1.編集画面にCSSを書いてしまっている

WordPressでCSSが効かない原因として一番多いのがこれ

なぜ編集画面に直接書くと効かなくなってしまうかというと投稿ページのエディタの自動補完機能により余計なタグが入ってしまうからです。

例えば投稿ページの編集画面で「テキスト」タブを開き、次のようにテキストエディタ上でCSSを書いたとしましょう。

この時点でテキストエディタを開いたまま投稿を保存すれば正常にCSSは機能します。

問題なのは次のように「ビジュアル」タブをクリックしてビジュアルエディタを開いた場合

上画像のようにビジュアルエディタを開いた後、もう一度テキストエディタに戻ると自動補完によりstyleタグ内に余計なタグが入ってしまいます

こういう風に編集画面で直接CSSを記述してしまうとタグ補完が働いてしまうのでスタイルが反映されなくなります。

なのでもし編集画面でCSSを書きたいなら次記事で紹介した「Script n Styles」プラグインを使うのがおススメです。

WordPressでは個別ページにscriptタグを設置してその中にスクリプトを書くと各行にbrタグが挿入されてしまい、スクリプトが実行できません。そこでここでは各ページの編集画面でJavascriptの記述ができる「Scripts n Styles」というプラグインの導入・使い方を解説します。スクリプトだけでなくCSSなども記述できるのでとても役立ちます。

これを使うとエディタとは切り離してCSSやスクリプトが書けます。

また全てのページ共通でヘッダーなどにCSSを埋め込みたい場合は次記事で紹介した「Simple Custom CSS & JS」プラグインも使いやすいです。

カスタムCSSやjavascriptをWordPressサイトで組み込みたい場合、「Simple Custom CSS and JS」というプラグインが使いやすくておすすめです。ここではこのプラグインの導入・使い方からWordPressでカスタムCSS・JSを扱うときの注意点まで解説します。

もし編集画面からCSSを埋め込みむなら直接書かず、これらのプラグインを使って埋め込みましょう。

2.ブラウザのキャッシュが残っている

ブラウザでは一度表示したページを次回高速で表示するために次のようなデータがキャッシュとして保存されています。

  • 画像ファイル
  • 動画ファイル
  • .jsや.cssなどの外部ファイル

キャッシュにはcssファイルも含まれているのでもしブラウザがページのキャッシュを保存しているとCSSを変更しても反映されない訳です。

なのでその対処法はブラウザのキャッシュをクリア(削除)すること

Chromeブラウザを使っている場合は次記事で紹介した「Clear Cache」を使うとワンクリックでキャッシュを削除できて便利です。

CSSを自分で書いて反映されないとき、Chromeの設定をいちいち開いてキャッシュ削除するのは面倒ですよね・・・そんな時にワンクリックでキャッシュクリアできる便利な拡張機能を見つけたので紹介します。

もしCSSが反映されない場合はまずブラウザのキャッシュを疑ってみましょう。

3.セレクタの優先順位の問題

CSSではセレクタを使ってそれに該当する要素にスタイルを指定できますが、このセレクタには次のような優先順位がありそれがCSSが効かない原因になることがあります

id・クラスセレクタ > タイプセレクタ

まずセレクタは次のようにid・クラスセレクタとタイプセレクタの2つに分けられます。

  • id・クラスセレクタ
    idの場合は「#example」、クラスの場合は「.example」で表されるセレクタ
  • タイプセレクタ
    「h1」、「div」、「span」などの要素そのものを指定するセレクタ

この2つのセレクタの優先順位は「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が効かない場合に確認した方がいいことは次の3点

  • 編集画面に直接CSSを書いてしまっている
  • ブラウザのキャッシュが残っている
  • セレクタの優先順位の問題

この中でも編集画面に直接CSSを記述してしまうのはWordPress初心者にありがちなミスなので個別ページごとにCSSを書きたいならプラグインを導入しましょう。

またブラウザのキャッシュが残っていてCSSが効かないということも頻繁に起こるのでこまめにブラウザのキャッシュは削除するようにするといいと思います。

以上WordPressでCSSが効かない原因と解決策についてでした。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press