WordPressでCSSがデザインに反映されないときの対処法

Facebookシェア LINEシェア はてなブックマークシェア

WordPressのカスタマイズにおいてCSSの知識は必須で、CSSを編集できなければWordPressのデザインは変更できません。

CSSは非常に便利な仕組みですが、その原則やルールを正確に理解していないと意図通りに変更が反映されないという厄介な面があります。

今回の記事では、WordPressでCSSが反映されない原因についてわかりやすく解説します。

WordPressでCSSが反映されない場合の対処法

WordPressでCSSを編集したのにサイトのデザインに反映されず、困った経験は誰しも一度くらいはあると思います。

WordPressでは記事ページのHTMLについてはエディターのプレビュー画面から確認しながら修正できますが、CSSに手を加える場合は、「外観」の「テーマの編集」から「style.css」をエディタで開いて編集し、その都度保存しながらサイトへの反映を確認しなければなりません。

WordPressの一般的なテーマでは、style.cssはコードの分量が非常に多く、反映されない場合の原因の特定にも手間取ることがよくあります。

CSSが反映されない場合の原因としては、主に次の3つのパターンが考えられます。

  • ブラウザキャッシュを読み込んでいる
  • CSSの優先度を考慮していない
  • CSSの中に記述ミスがある

CSSが思った通りに反映されない場合は、これらの原因をひとつずつチェックしていく作業が必要です。

3つのパターンを想定したCSSのチェック方法について、順番に解説していきましょう。

ブラウザキャッシュを読み込んでいる

キャッシュとはブラウザやサーバーが、表示したウェブページのデータを一時的に保存しておく機能です。

ウェブページにアクセスした際に、ローカルに保存していたデータを参照するので、サーバーにデータを取りに行くよりも素早く表示することが可能です。

その中でも特にブラウザに保存されるキャッシュをブラウザキャッシュと呼びます。

ブラウザキャッシュは、ChromeやEdge、Firefox、Safariなどすべてのウェブブラウザに搭載されています。

ブラウザキャッシュが保存されると、再度同じウェブページを訪問した際、ブラウザキャッシュを優先的に読み込みますが、このブラウザキャッシュが原因でCSSが反映されないことがあるので、その場合の対処法について解説します。

スーパーリロードを試す

ブラウザキャッシュが原因でCSSが反映されない場合、もっとも簡単にキャッシュの影響を排除できる方法はスーパーリロードです。

スーパーリロードとはブラウザのキャッシュを残しつつ、サーバーにある新しいデータを取り込む操作で、スーパーリロードを実行することによって、CSSの変更がしっかりと反映されます。

スーパーリロードはブラウザによって操作が異なります。

以下にブラウザごとの操作を記載しますので、使っているブラウザで試してみましょう。

Chrome

Shift+更新ボタン

Ctrl+更新ボタン

Shift+F5

Ctrl+F5

Ctrl+Shift+R

Safari

Shift+更新ボタン

Ctrl+Shift+R

Ctrl+R

Firefox

Shift+更新ボタン

Ctrl+F5

Ctrl+Shift+R

Edge

Shift+更新ボタン

Ctrl+更新ボタン

Shift+F5

Ctrl+F5

Ctrl+Shift+R

キャッシュを削除する

スーパーリロードでCSSの変更が反映されない場合、ブラウザのキャッシュクリアを試してください。

キャッシュクリアとは、ブラウザが保存しているキャッシュを削除することでCSSの変更を反映させる操作です。

キャッシュをクリアすると、利用していたウェブサービスのログイン状態が解除されたり、ブラウザに保存されていたIDやパスワードが削除されたりするデメリットがありますが、確実にフレッシュな状態でCSSが読み込まれます。

ここでは、Chromeのキャッシュクリア方法を解説します。

Chromeを起動して「設定(縦向き三点リーダーのアイコン)」をクリック。「履歴」→展開したメニュー内の「履歴」を開きます

ページ内左サイドバーの「閲覧履歴データの削除」をクリックしてください。

「全期間」を選択し、「Cookieと他のサイトデータ」「キャッシュされた画像とファイル」にチェックを入れます。「データを削除」をクリックしてキャッシュを削除しましょう。

CSSの優先度を考慮していない

CSSが反映されない原因でよくあるのが優先度を考慮していないケースです。

CSSでは適用される詳細度や優先度が決まっています。

たとえば、CSSのセレクタでは「id」がもっとも優先度が高く、次に「class」「要素」の順です。

また、詳細にセレクタを設定するほど優先度は高くなります。

優先度をしっかりと把握して、狙った指定が適切にCSSが反映されるようコードを書きましょう。

優先度の問題の解決方法は以下の通りです。

Chromeで優先度をチェック

CSSが正しく反映されない場合、ブラウザのデベロッパーツールを使って状況をチェックする癖を付けるようにしましょう。

Chromeの場合は、以下の手順で該当箇所をチェックしてください。

CSSが反映されていない箇所にカーソルを合わせて右クリックし、「検証」をクリックするとデベロッパーツールが起動します。

デベロッパーツールの「スタイル」で普通に表示されている箇所はCSSが反映されている部分、打ち消し線が入っている箇所が反映されていない箇所になります。

CSSの順番を変える

CSSは後から書かれたコードが優先され、上書きされます。

そのため、追加でCSSを書く場合はコードの最後尾に書くのが原則です。

たとえば、以下のコードではh2の文字サイズは12pxではなく、後に記述された24pxの方で表示されます。

h2{
   	font-size:12px;
}
h2{
   	font-size:24px;
}

CSSが反映されない場合は、同じセレクタが後ろの方で指定されることによって設定が上書きされていないかどうかチェックしましょう。

もしくは、CSSの最後尾にセレクタを追加して反映されるかどうか確認してください。

CSSの中で特定のセレクタを探す場合はページ内検索がおすすめです。

同じセレクタが2カ所以上あるかどうかは、ページ内検索によって簡単に調べられます。

ほとんどのエディタやブラウザでは、Ctrl+Fのショートカットキーでページ内検索が可能です。

優先度の高いセレクタを使う

CSSは「セレクタ」「プロパティ」「値」によって構成されていて、それぞれの違いは以下の通りです。

セレクタ:「class」や「id」「要素」のこと。
プロパティ:「font-size」「color」などの指定。
値:プロパティに指定する数値やテキスト

HTMLでのstyle属性による指定がもっとも優先度が高く、以降はid、class、要素名の順に優先度が下がってきます。

優先度は以下の表の通りです。

指定方法

優先度

タグのstyle属性

style=”color:blue;”

1位

id

#test

2位

class

.test

3位

属性セレクタ

a[href*="google"]

3位

要素名

h2

4位

疑似要素

:first-child

4位

ユニバーサルセレクタ

*

5位

セレクタを詳細に指定する

セレクタを詳細に指定することでも優先度が上げられます。

以下のHTMLとCSSの場合、優先されるのは要素とclassを指定しているコード(h2.test)です。

<h2 id=”test” class=”test”>見出し</h2>
 
h2{
   	font-size:18px;
}
 
#test{
   	font-size:20px;
}
 
h2.test{
   	font-size:22px;
}

この場合、フォントサイズは22pxで表示されます。

CSSが反映されない場合は、セレクタを詳細に指定してみましょう。

「!important」を利用する

CSSが反映されない場合に、もっともよく利用する方法が「!important」です。

「!important」はスタイル適用の優先順位を上げる宣言です。

ここまで解説してきた記述順の優先順位、セレクタごとの優先順位、セレクタの詳細度の優先順位よりも優先されるため、CSSが反映されない場合はまず「!important」を試してみましょう。

「!important」の使い方は以下の通りです。
 
h2{
   	color:red !important;
}

CSSの中に記述ミスがある

CSSの記述が間違っている場合も、CSSは正しく反映されません。

ここではありがちなCSSのミスについて解説していきましょう。

id・class・要素のミス

idやclass、要素名の間違いあるいは指定の仕方の間違いは非常によくあるミスです。

例えば、idとして指定するべき箇所をclassで指定しているといったケースです。

idの場合は先頭に「#」、classの場合は先頭に「.」を付けて指定しましょう。

<h2 id=”test” class=”test”>見出し</h2>
 
#test{    /*idは#で指定*/
   	color:red;
}
 
.test{ 	/*classは.で指定*/
   	color:red;
}

もっとも基本的な部分ですが、それだけにミスの多い部分なので、しっかりとチェックしてください。

子孫要素と子要素

子孫要素と子要素の違いについても正確に把握していないと、CSSが正しく反映されません。

子孫要素とは、ある要素の下のすべての階層に適用されます。

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

 div p{	/*子孫要素は半角スペースで区切ります*/
   	color:red;
}
 
div>p{	/*子要素は>で区切ります*/
   	color:red;
}

子孫要素のつもりで子要素を使ってしまい、CSSが反映されないことがあります。

両者をしっかりと使い分けるようにしましょう。

子要素とAND条件

AND条件にするつもりが間違って子要素になっているミスも多く見られます。

AND条件とは、定義したすべての条件に当てはまる指定です。

例えば、h2かつidがtestの条件を定義する場合は以下の通りに書きます。

h2#test{
   	color:red;
}

しかし、以下のようにh2と#testの間に半角スペースが入っていることで子要素になってしまっているミスが目立ちます。

h2 #test{
   	color:red;
}

タイプミス、セミコロンが抜けている

プロパティや値の指定の仕方が間違っていたり、セミコロンが抜けていたりするとCSSが反映されません。

プロパティのミスには単純なスペルミスと、その要素には使えないプロパティを指定しているミスの2種類があります。

どちらのミスであってもCSSには反映されませんので注意しましょう。

また、セミコロンが抜けるミスもよく見られます。

これはいずれも凡ミスですが、それだけに非常によく見受けられるミスなので、確実に潰しておきましょう。

全角の空白が入っている

CSSではコメント以外で全角文字は厳禁です。

これはネット上で検索したコードをそのまま貼り付けたときによく起きるミスで、アルファベットの文字が全角になっているのならわかりやすいのですが、コードの中に全角スペースが混在していた場合、非常にわかりづらくなります。

見た目上はまったく間違いがないのにCSSが反映されない場合は、どこかに全角スペースが混入している可能性があるので、エディタのページ内検索で、全角スペースを検索してみましょう。

CSSが反映されないその他の原因

ここまで解説した3つのトラブル以外にも、CSSが反映されない原因はいくつか考えられます。

上記の原因が該当しない場合は、以下の原因を疑ってみましょう。

子テーマのCSSが読み込まれていない

子テーマのstyle.cssが読み込まれていないために、CSSがウェブページに反映されないことがあります。

子テーマのCSSが正しく読み込まれているかどうかは、Chromeのデベロッパーツールで確認することが可能です。

ウェブページ上で右クリックして「検証」を開き、デベロッパーツールを起動しましょう。

デベロッパーツールの上部タブの「ソース」を開いてください。

「wp-content/theme」内の子テーマのディレクトリをクリックし、style.cssが読み込まれているかどうか確認しましょう。

ファイルの最小化によるバグ

CSSやHTML、JavaScriptではファイルの最小化機能が使われることがありますが、この最小化機能でバグが発生し、CSSが反映されないケースがあります。

ファイルの最小化機能とは、CSSやHTML、JavaScriptのテキストから、不要なスペースや改行を取り除いて軽量化する機能で、ファイルサイズを減少させ、ウェブページの表示を高速化します。

この最小化にともなうバグを防ぐには、最小化機能をオフにすることが必要です。

最小化機能は多くの場合、高速化プラグインによって動作しているので、プラグインの設定を見直してみましょう。

サーバーキャッシュの問題

サーバーキャッシュは、サーバーに残っている一時ファイルのことです。

WordPressでキャッシュ系プラグインを使っている場合、サーバーキャッシュによってCSSが反映されない現象が起こります。

キャッシュ系プラグインを停止するか、サーバーキャッシュをクリアしましょう。

まとめ

今回はCSSが反映されない原因と、その対処方法について解説しました。

ウェブページをデザインするのにCSSは非常に便利な仕組みですが、CSSは正確に書かないとデザインが意図通りに反映されません。

WordPressでCSSが反映されない原因には、ブラウザキャッシュやCSSの優先度、コードの記述ミスなどが考えられますが、多くの場合、原因は「style.css」の中にあるので、粘り強く向き合う姿勢が大事になります。

CSSが反映されない場合、まずはデベロッパーツールで検証し、その上で考えられる原因をひとつずつ検討しましょう。

独自ドメインを取得するなら「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、まずは無料で好きなドメイン名を検索してみましょう。


まずは検索!ドメインは早い者勝ち

Facebookシェア LINEシェア はてなブックマークシェア
逢坂秀範の似顔絵イラスト

このサイトのライター
逢坂 秀範

ウェブメディアやメールマガジンのコンテンツ制作のプロ。
豊富な経験と知識でwebの作成や運用、用語などを分かりやすく解説します!

 
一覧を見る

お気に入り機能を
活用してより便利に!

お名前ID(会員ID)・パスワードでログインするとお気に入り機能をご利用できます。
お名前ID(会員ID)
パスワード

アカウント登録がまだの方

アカウント登録 (無料)