【WordPress】CSSが反映されない時にチェックしたいポイント

こんにちは、りゅーせーです。

WordPressの使っていてstyle.cssに書き込んだのに反映されない！

といった経験はありませんか？

この記事を見ている方はCSSがうまく反映されなくて悩んでいるかと思います。

僕もCSSが反映されなくて困っていました。

そこで、今回は僕がCSSが反映されていない時に確認したことをご紹介します！

1 まずはコードがあっているかを確認
2 そもそもCSSファイルの呼び出しができていない
3 CSSの呼び出しがうまくいってるかの確認
4 まとめ

まずはコードがあっているかを確認

閉じタグがない

.blue{
  color: blue;

.red{
  color: red;
}

.blue{

color: blue;

.red{

color: red;

}

.blue{}の閉じタグ「}」がないです。

CSSをコピペした時など、閉じタグなどをコピーするのを忘れることがあります。

スペルミスをしている

.blue{
  color: blu;
}

.blue{

color: blu;

}

正しくは「color: blue;」ですが「color: blu;」になってますね。

スペルミスもよくあるミスです。

セミコロンがない

.blue{
  color: blue
}

.blue{

color: blue

}

正しくは「color: blue;」ですが「color: blue」になっており、「；（セミコロン）」が抜けています。

こちらも忘れることがよくあります。

コロンがセミコロンになっている、またはその逆

.blue{
  color; blue;
}

.blue{

color; blue;

}

正しくは「color: blue;」ですが「color; blue;」になっており、「：（コロン）」が「；（セミコロン）」になっています。

またはその逆で、

.blue{
  color: blue:
}

.blue{

color: blue:

}

正しくは「color: blue;」ですが「color: blue:」になっており、「；（セミコロン）」が「：（コロン）」になっています。

全角空白がある

.blue{
  color:　blue;
}

.blue{

color:　blue;

}

こちらは一見間違っていないように見えて実は間違っているパターンですね。

正しくは「color: blue;」ですが、「color:　blue;」になっており、「blue」の手前に「　（全角空白）」があります。

分かりにくいですが、これもエラーのもととなります。

コメントアウトがうまくいってない

.blue{
/* color: red; /
  color: blue;
}

.blue{

/* color: red; /

color: blue;

}

正しくは「/* color: red; */」ですが、「/* color: red; /」になっており、「*」が抜けています。

そもそもCSSファイルの呼び出しができていない

僕がWordPressでCSSが反映されなかった時はこれが原因でした。

管理画面＞外観＞テーマの編集＞テーマヘッダー（header.php）のheadタグに次のコードを入れましょう。

<link rel="stylesheet" type="text/css" href="/styles.css">

1	<link rel="stylesheet" type="text/css" href="/styles.css">

これができたらファイルを更新のボタンを押してうまくいっているか確認しましょう。

これでもできない場合、CSSの呼び出しがうまくいっているのかを確認して下さい。

CSSの呼び出しがうまくいってるかの確認

１．WindowsならCSSが反映されていないページで右クリックをして、欄の一番下にある「検証」をおす（Ctrl+Shift+Iでも可）。Macなら「option + command + I」

すると、画面のどこかにこのようなものが出ると思います。

３．「Sources」の欄があるのでそこをクリック

すると左のほうにフォルダやファイルがたくさん並んでいるのが分かるかと思います。

４．wp-content>themes>テーマ名>style.css　があることを確認。

※ここで、style.cssがない方は他のフォルダを探してください。

５．style.cssをクリックし、style.cssの中身があることを確認

※ここで、style.cssはあるが中身がない方は中身のあるstyle.cssが他のフォルダにないか確かめてください。

ここで中身はあるが、反映はされていない方はstyle.cssの呼び出しに失敗しています！

呼び出しに失敗している場合、中身のあるstyle.cssを指定してあげるだけで反映されます。

style.cssのあった場所（パス）を確認。
wp-content>themes>テーマ名>style.css　→　../wp-content/themes/テーマ名/style.css

管理画面＞外観＞テーマの編集＞テーマヘッダー（header.php）のheadタグに次のコードを入れましょう。（テーマ名は適当なものに書き換える）

<link rel="stylesheet" type="text/css" href="../wp-content/themes/テーマ名/style.css">

1	<link rel="stylesheet" type="text/css" href="../wp-content/themes/テーマ名/style.css">

これができたらファイルを更新のボタンを押してうまくいっているか確認しましょう。

まとめ

いかがでしたか？

今回はWordPressでCSSが反映されないときにチェックすることをご紹介しました。

最後にポイントをまとめておきますね。

確認のポイント

CSS自体にミスはないか
CSSファイルの呼び出しができているか

CSSが反映されなくて困っている…という方のお役にたてたらと思います。

それではまた！