ある日、WordPressのダッシュボードに「CSSに構文ミスがあるため圧縮が不完全です。」と出てました。
サイトを放置気味にしてたので、いつ現れたのかはわかりません。
ただ、
- サイトの見かけ上は特におかしくない
- CSSだからサイト動かすのに致命的なエラーにはならないはず
と考えて、ほったからしにしていました。
ただ最近、およそ３年ぶりにサイトのメンテナンスと再カスタマイズを始めました。
そうなると変なメッセージ残るのは気持ち悪いので、対策をとることにしました。
原因の切り分け
CSSがおかしいなら、問題はテーマカスタマイズによって生じたものと推測されます。
こういうときのトラブルシューティングは、手始めに子テーマから親テーマに切り替えます。
私が使っているテーマはLuxeritas。
当たり前ですが、親テーマはカスタマイズしてない素のまま。
これで異常が出るなら制作元の問題となります。
基本的には考えづらいですが、作者も人間ですからミスをしないとも限らない。
一応の確認です。
メッセージ消えた！
つまり親テーマは正常で、おかしいのは子テーマ。
やはりテーマカスタマイズが原因ということになります。
自分で作成したCSSのエラーを調べる
W3C CSS Validation Serviceによる検証
そうなると、
CSSを１つずつ構文チェックしないといけないの？
すごくめんどくさいんだけど
W3Cの提供している「W3C CSS Validation Service」で効率的にCSSエラーを調べられるわよ
W3C CSS Validation Serviceはこちら。
CSSファイルの中身をまるっとコピペするだけで、すぐに調べられます。
（ファイルアップロードでも可）
使い方は下の画像を参考にしてください。
自分の追加したCSSファイル（style.css含む）を検証した結果、エラーは見つかりませんでした。
W3Cとは？
W3Cについては、こちらの説明をお読みください。
正式名称は「World Wide Web Consortium」。WWWで用いられる技術の標準化、相互運用性の確保を目的とする団体です。HTML、URI、XML等の技術もW3Cで標準化されました。
1994年10月に発足し、現在はマサチューセッツ工科大学計算機科学研究所（MIT／LCS）、慶應義塾大学、欧州情報処理数学研究コンソーシアム（ERCIM）がホスト機関として共同運営しています。世界各国のベンダー、プロバイダ、研究機関、政府など、約450の組織が会員として活動に参加しています。
子テーマファイルの新旧整合性を確かめる
検証していないCSSファイルは、子テーマに元々入っていたCSSファイルのみ。
だけど、これって製作者の提供なはず。
いや、待てよ。
バージョン1.xから2.xになったとき、1.xのファイルを子テーマに入れたままで大変な思いをしたっけ……
もしかしたら今回もその類かも
以前のトラブルは1.xのPHPファイルを素材にカスタマイズしたものを子テーマに入れたまま、2.xにバージョンアップしたのが原因でした。
そして今回も親テーマは3.xにバージョンアップしましたが、子テーマは古いままです（2.xか1.xかすら覚えていない）。
自分で入れたか元から入っていたかの違いはありますが、もしかしたら3.xより前と後で子テーマに入っているファイルが違うのかも？
3.xの子テーマをダウンロード。
使っている子テーマのバックアップをとった上で、3.xのファイルの方が新しい物をチェック。
さらにstyle.cssも3.xのものに貼り替えてました。
すると、「style-amp.css」を入れた時、
エラーメッセージが消えた！
見立て通り「style-amp.css」が古い物だったのが原因？
……と、一旦は思ったのですが。
以前のstyle-amp.cssの中身を見ると、使わなくなったコードの残骸が山ほど。
これはおかしくなって当たり前です。
つまり、コードそのもののエラーが原因か、CSSファイルが古かったのか原因か特定できませんでした。
まあ、何にせよ、
「人災」、自業自得なのは間違いないわね
なんせ３年間ずっと放置気味で、2.xすら殆ど触ってないくらいでしたんで……。
でも、何にせよ、
解決したからよし！
問題が再発
……そう思っていた頃が私にもありました。
サイトのメンテナンス作業を続けていたところ、
またメッセージが出た！
ただし今度は、本当に構文エラー。
新しく書き加えたコードで「}」を閉じ忘れていたのが問題でした。
まとめ
Luxeritasを3.xになってから使い始めた方ならいいのですが。
それ以前の方ですと、もしかしたら私みたいに古い子テーマを残したまま利用している方もいるかもしれません。
トラブル回避のためには、子テーマのアップデートを忘れずにね
CSSの中身もきっちりチェックしようね
