WordPressでデザインをカスタマイズしていると、ちょっとしたCSSがうまく保存できない事ってありませんか？
先日私も背景色を設定しようと思ったら、なぜか色を指定することができない。。。
保存しようとすると、以下のようなエラーメッセージが。。。
「何かうまくいかなかった」って何！？とつっこんでみる。。
原因が分からず色々調べてみると、カラーコードの記載方法に原因があるようでした。
今回は、CSSでカラーコードの設定ができなかった原因と、その対処法をまとめました。
この記事で分かること：
・WordPressでCSSのカラーコードが保存できない原因
・実際に起きたエラーとその対処法
・安定してい反映させるための書き方のコツ
同じ問題に悩んでいる方！ぜひ参考にしていただけると幸いです。
なぜカラーコードで保存エラーが起きたのか？
今回は、このように背景色を水色に設定しようとしておりました。
この水色を指定するには、カラーコードで「#DDFFFF」と指定してあげる必要があります。
そこで以下のように記載をしたところ、、、
/* 背景色を水色に設定するCSS */
.custom-background-color {
background-color: #DDFFFF;
}冒頭のエラーメッセージが表示され、保存ができない状態となってしまいました！
「何がうまくいかなかったのだろう。。」と色々調べていたところ、どうやら「#」を記載していることが原因の可能性であることが分かりました。
一見正しく見えますが、「#」が誤って値ではなく、IDセレクタの意味も持っているため、誤認識されてしまうことがあるようです。
構文上の誤解で、「#DDFFFF」がIDだと判断され、エラーとして処理されてしまうということみたいです。
その結果、WordPressが「構文エラー」と判断し、保存を拒否されるようです。
対処した方法
テーマやプラグインでの対処を考えましたが、何がどういう風に影響しているか分からず。。
最終的にカラーコードではなく、RGB形式で記載することで、エラーを回避することができました。
※RGB形式：赤（Red）、緑（Green）、青（Blue）の3つの色を組み合わせて色を表現する方式
こちらの記述に変更すると、問題なく保存され、背景色を設定することができました。
/* 背景色を水色に設定するCSS */
.custom-background-color {
background-color: rgb(221,255,255);
}以下のように、赤・緑・青の輝度（0～255）を指定することで色を表現することができます。
background-color: rgb(221,255,255);まとめ：カラーコードが使えなくても大丈夫！
WordPressでCSSのカラーコードが原因で保存できないなんて、、、
最初は私も驚きました。
でも構文や記述のルールを少し知っておくだけで回避できるエラーです。
焦らず対処すればOKです。
この記事が、同じように悩んでいる方の参考になれば嬉しいです！
最後まで読んでいただき、ありがとうございました！
コメント