「CSSに構文ミスがあるため圧縮が不完全です。」のトラブルシューティングについて(私のケース)

この記事は約4分で読めます。

2020-02-03IT雑記,Luxeritas

質問者の写真

WordPressのダッシュボードに「CSSに構文ミスがあるため圧縮が不完全です。」って出てる。
何これ、意味わかんない……
 

ダッシュボードに現れたCSSのエラーメッセージ

ある日気づくと、こんなメッセージが出ていました。

CSSに構文ミスがあるため圧縮が不完全です。

サイトを放置気味にしてたので、いつ現れたのかはわかりません。
ただ、

質問者の写真

サイトの見かけ上は特におかしくないし
CSSだからサイト動かすのに致命的なエラーにはならないはずだし
 

と考えて、ほったからしにしていました。

ただ最近、およそ3年ぶりにサイトのメンテナンスと再カスタマイズを始めました。
そうなると変なメッセージ残るのは気持ち悪いので、対策をとることにしました。

原因の切り分け

解答者の写真
CSSがおかしいということは、当たり前だけどテーマカスタマイズによって問題が生じたはずよ
 

私の使っているテーマはLuxeritas
まずは子テーマを切って親テーマだけにしてみました。
これで異常が出るなら制作元の問題。
ありえないのですが、一応の確認です。

メッセージが消えたことから、おかしいのは子テーマ。
やはりテーマカスタマイズが原因ということになります。

自分で作成したCSSのエラーを調べる

W3C CSS Validation Serviceによる検証

そうなると、

質問者の写真

CSSを1つずつ構文チェックしないといけないの?
すごくめんどくさいんだけど
 
解答者の写真
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の組織が会員として活動に参加しています。

(引用元:インターネット用語1分解説~W3Cとは~ – JPNIC

子テーマファイルの新旧整合性を確かめる

検証していない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ファイルが古かったのか原因か特定できませんでした。
まあ、何にせよ、

解答者の写真
「人災」、自業自得なのは間違いないわね
 

なんせ3年間ずっと放置気味で、2.xすら殆ど触ってないくらいでしたんで……。
でも、何にせよ、

質問者の写真

解決したからよし!
 

問題が再発

……そう思っていた頃が私にもありました。

メンテナンスの関係で、色々いじっていたところ、

質問者の写真

またメッセージが出た!
 

ただし今度は、本当に構文エラー。
新しく書き加えたコードで「}」を閉じ忘れていたのが問題でした。

まとめ

Luxeritasを3.xになってから使い始めた方ならいいのですが。
それ以前の方ですと、もしかしたら私みたいに古い子テーマを残したまま利用している方もいるかもしれません。
(「いねーよ」というツッコミはなしの方向で)

解答者の写真
トラブル回避のためには、子テーマのアップデートを忘れずにね
CSSの中身もきっちりチェックしようね
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴