どうも！フジグチです！
当ブログではカスタマイズ系の記事をよく書くので、コードの確認を「非公開のカスタマイズ専用のブログ」でテーマを何種類か入れ替え、問題なく反映されるか確認していました。
しかし、その入れ替え作業がだんだんめんどくさくなり、別のテーマを使っている方のサイト上でChromeの検証機能を使い、仮にCSSコードを貼り付け反映されるか確認する方法に変更しました。（仮なので実際には反映されませんのでご安心を）
しばらくやってみて感じたことは、CSSを間違って入れている方が多すぎる！です（笑）
CSSの記述の仕方が間違っていると、それ以降に記述したCSSが反映されなくなります。
今回の記事は「CSSをコピペして使う初心者の方向け」の記事になっていますので、CSSが反映されずにお困りの方は参考にしてみてください。
CSSが反映されない原因
「 } 」波括弧の閉じ忘れ
.entry-content h3 {
border-left: solid 3px #80c8d1;
color: #5b848a;
font-size: 1.2rem;
}
一番多いと感じるのは、コピペする際に最後の「 } 」を忘れてしまうことです。
また、何か別の部分のCSSを削除している時に勢いあまって消してしまうこともあるかもしれません。
「 } 」で閉じ忘れると、それ以降のCSSが反映されません。
また画面サイズを指定したMedia Queries(@media)を使う時も注意が必要です。
@media screen and (max-width: 767px) { .entry-content h3 { border-left: solid 3px #80c8d1; color: #5b848a; font-size: 1.2rem; } }
通常のCSSの表記に加え画面サイズを指定する部分が増えるので
@media screen and (max-width: ～px) {{ 通常のCSSの部分 }}
というように、「通常のCSSの部分」を囲うように最後は「 } 」を２つ書かなければいけません。
「 ; 」セミコロンの付け忘れ
最後の「 ; 」は省略可能です。
.entry-content h3 {
border-left: solid 3px #80c8d1;
color: #5b848a;
font-size: 1.2rem; ←省略可能
}
コピペを提供してくれる側で「 ; 」を省略している場合、その後に自分で他のプロパティを追記すると「 ; 」をつけていない行ができてしまいます。
そうなるとそれ以降の部分は反映されなくなりますので、自分で追記する場合は注意しましょう。
.entry-content h3 {
border-left: solid 3px #80c8d1;
color: #5b848a;
font-size: 1.2rem ▽ここから下は反映されない▽
background: #fff; ←追記部分
}
コメントアウトの閉じ忘れ
コピペを提供してくれる側や、自分で何のCSSか分かるようにコメントアウトを記述する場合があります。
コメントアウトは /*～*/ というように「/*」から始まり「*/」で終わらなければいけません。
閉じるのを忘れると以降に記述したCSSが、次のコメントアウトまで（コメントアウトがなければずっと）反映されなくなるので気をつけましょう。
全角で記入している
CSSはスペースも含め全て半角で記述します。
全角で記述していいのはコメントアウトの「/*」と「*/」の間だけです。
/* この部分のみ全角 */
数値等は見た目でも分かるので訂正しやすいのですが、波括弧やスペースを間違って全角で記述してしまうと、見つけるのが困難になってしまうのでデザインCSSを開いたら半角入力にするクセを付けるといいと思います。
優先順位が低い
CSSには優先度があります。
pよりも.entry-contet p.entry-contet pよりも.entry-inner .entry-contet pというようにより詳細にセレクタを指定したほうが優先度が高くなります。
初心者の方はセレクタを調べるのも大変だと思うので、うまく反映されないときは!importantを使いましょう。
.entry-contet p {
color: #555!important;
}
!importantを使用することで優先度を高くすることができます。
ただし!importantを使うと、後々同じセレクタにCSSを指定する時にもこの部分が干渉し、邪魔をしてしまうことがあるので注意が必要です。
!importantの記述間違い
!importantの使用でよく間違いやすい記述です。
「 ; 」の後に!importantを書いている。
間違った例
.entry-contet p {
color: #555; !important;
}
「 ; 」は!importantの前ではなく後ろに書きます。
「 ! 」を後ろに書いている
間違った例
.entry-contet p {
color: #555 important! ;
}
「 ! 」はimportantの後ろではなく前に書きます。
番外編
デザインCSSに記述する際はコードを<style></style>タグで囲む必要ありません。
<style></style>タグで囲まなければいけないのは、HTML上に記述する際かPCとスマホのデザインを分けていて、スマホのデザインを設定する時だけで大丈夫です。
まとめ
もし、今CSSが反映されずに困っている方がいたら上記の項目を確認してみてください。
もちろんこれだけが原因ではないのですが、初心者の方が間違いやすい（今までに自分が間違ってきた）ことを挙げさせてもらいました。
カスタマイズする際はバックアップを忘れずに一項目ずつ確認しながら進めてくださいね。
