何これ、意味わかんない……
ダッシュボードに現れたCSSのエラーメッセージ
ある日気づくと、こんなメッセージが出ていました。
サイトを放置気味にしてたので、いつ現れたのかはわかりません。
ただ、
CSSだからサイト動かすのに致命的なエラーにはならないはずだし
と考えて、ほったからしにしていました。
ただ最近、およそ3年ぶりにサイトのメンテナンスと再カスタマイズを始めました。
そうなると変なメッセージ残るのは気持ち悪いので、対策をとることにしました。
原因の切り分け
![解答者の写真](https://kimoota.net/wp-content/uploads/2020/01/b57088428d2159c2a3075c887fc6676d-e1579118586227.jpg)
私の使っているテーマはLuxeritas。
まずは子テーマを切って親テーマだけにしてみました。
これで異常が出るなら制作元の問題。
ありえないのですが、一応の確認です。
メッセージが消えたことから、おかしいのは子テーマ。
やはりテーマカスタマイズが原因ということになります。
自分で作成したCSSのエラーを調べる
W3C CSS Validation Serviceによる検証
そうなると、
すごくめんどくさいんだけど
![解答者の写真](https://kimoota.net/wp-content/uploads/2020/01/b57088428d2159c2a3075c887fc6676d-e1579118586227.jpg)
W3C CSS Validation Serviceはこちら。
CSSファイルの中身をまるっとコピペするだけで、すぐに調べられます。
(ファイルアップロードでも可)
使い方は下の画像を参考にしてください。
自分の追加したCSSファイル(style.css含む)を検証した結果、エラーは見つかりませんでした。
W3Cとは?
という方がいらっしゃいましたら、こちらの説明をお読みください。
正式名称は「World Wide Web Consortium」。WWWで用いられる技術の標準化、相互運用性の確保を目的とする団体です。HTML、URI、XML等の技術もW3Cで標準化されました。
1994年10月に発足し、現在はマサチューセッツ工科大学計算機科学研究所(MIT/LCS)、慶應義塾大学、欧州情報処理数学研究コンソーシアム(ERCIM)がホスト機関として共同運営しています。世界各国のベンダー、プロバイダ、研究機関、政府など、約450の組織が会員として活動に参加しています。
子テーマファイルの新旧整合性を確かめる
検証していないCSSファイルは、子テーマに元々入っていたCSSファイルのみ。
だけど、これって製作者の提供なはず。
いや、待てよ。
もしかしたら今回もその類かも
以前のトラブルは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ファイルが古かったのか原因か特定できませんでした。
まあ、何にせよ、
![解答者の写真](https://kimoota.net/wp-content/uploads/2020/01/3467b10808f450b67e88da0d2837239c-1.jpg)
なんせ3年間ずっと放置気味で、2.xすら殆ど触ってないくらいでしたんで……。
でも、何にせよ、
問題が再発
……そう思っていた頃が私にもありました。
メンテナンスの関係で、色々いじっていたところ、
ただし今度は、本当に構文エラー。
新しく書き加えたコードで「}」を閉じ忘れていたのが問題でした。
まとめ
Luxeritasを3.xになってから使い始めた方ならいいのですが。
それ以前の方ですと、もしかしたら私みたいに古い子テーマを残したまま利用している方もいるかもしれません。
(「いねーよ」というツッコミはなしの方向で)
![解答者の写真](https://kimoota.net/wp-content/uploads/2020/01/d05c7225e629403d802cfe2732a47473-e1579123076803.jpg)
CSSの中身もきっちりチェックしようね
コメント