【AMPエラー】無効なCSSスタイルシートが出た時の対処法
Wordpressの記事をGoogle AMPに対応させたところ、「無効なCSSスタイルシート」とエラーになってしまった。その時の対処方法を書いておく。
エラーの種類は十人十色
Google AMPのエラーはよく起こるようだが、原因は人それぞれのようでどのサイトを見ても私のパターンと完全に一致したものはなかった。何が原因かとAMP導入の順番をさかのぼって考え、最後にコピペしたコードを眺めていたら気がついた。もしかと思い書き換えると見事解消。この記事を読んでくれている人のエラーが私と同様かは不明だが、参考になれば何よりだ。
エラーの内容
無効なCSS スタイルシート「タグ「style amp-custom」内のテキストに「html comments」が含まれていますが、これは許可されていません。」というもの。なんの事かさっぱりわからなかった。これで原因がわかる人はそもそもこの記事を読んでいないだろう。
エラーの原因と修正
このエラーの原因はものすごく単純で、AMP用のCSSコード内にHTML用のコード『＜!-- コメント --＞』が書かれていた事だった（ブログに書くにあたり「半角<>」を「全角＜＞」に変えている）。これはHTMLにおいてコードを実行しないためのコードだ。自分用のメモを入れる時などに使う。これがCSSだと『／コメント／』となる（ブログに書くにあたり「半角/」を「全角／」に変えている）。つまりこの部分を書き換えればいいのだ。
ものすごく単純だがなぜこうなったかと言えば、テーマの配信元からコードをそのままコピペした事が原因だ。初心者でも使えるようにと、コピペファイルを用意してくれていたが、その大元が間違っていたのだ。そして、初心者ゆえになかなか原因がわからなかったのだ。
余談
余談だが、私はAMPをあまり使いたくはないし他サイトでも見たくない。サイトを軽量化するためレイアウトも簡単になってしまうし制限も多い。そうはいっても天下のGoogle様が「やれ」というのだから逆らうわけにはいかないのだ。Googleにインデックスされないという事は、存在しないも同じ事なのだから。
