AMPタグ「style amp-custom」の CSS 構文エラーと、またまたサチコ先生からのメール。
CSS構文エラーって、今までに何回も修正したはずなのに、同じようなエラーを指摘されました。
AMPの問題って、修正してもあとからでてくるので、イタチごっこというような感覚です。
凹まずに頑張っていきましょう。
この記事では、
AMPタグ「style amp-custom」の CSS 構文エラーの修正の方法について解説していきます。
CSS構文エラーで修正の方法を探している人の参考になると嬉しいです。
AMPタグ「style amp-custom」の CSS 構文エラーの原因を探す
早速エラーの原因を探してみました。
まずはサーチコンソールの画面から、原因を探ってみましょう。
URLをクリックすると、右画面にエラーが出ている箇所がピンクで表示されます。
でも、見にくい・・・。
そこで、AMP Validatorで調べてみました。
原因の箇所がひと目で分かります。
79行目の@importが原因のようです。
また、このエラーの箇所の前後を見てみるとgoogleのフォントなど文字に関する記述があります。
目次をカスタマイズするときにCSSを書き換えたのが原因ではないかと考えました。
そこで、wp管理画面から外観→カスタマイズ→追加CSSを確認してみました。
すると、
となっていました。
やっぱり原因はこれだったんだと革新できました。
そこで、@importを削除しました。
@importだけ削除したら、エラーが出たので、赤で囲っている部分をすべて削除しました。
それが下の画像です。
AMP Validatorで修正を確認
サチコ先生にエラーだよと言われたURLをすべてAMP Validatorで確認しました。
さっきエラーが出ていた79行目を見てみると、
エラーがなくPASSと表示されていました。
サーチコンソールの画面の修正を検証をクリックすると、検証が開始されました。
あとは結果を待つだけです。
AMP問題の修正
検証が開始されてから4日後、「AMP問題が修正されました」というメールが届きました。
安心できました。
AMPタグ「style amp-custom」CSS構文エラーの修正：まとめ
AMPタグって、本当に難しいですね？
この記事では、AMP タグ「style amp-custom」の CSS 構文エラーの修正の方法を解説してきました。
私のブログでは、@importがエラーになっていましたが、AMPのCSS 構文エラーは、他にもいろんなエラーがあります。
一つ一つ対応していくしか方法はありません。
原因を突き止めるのに一日かかることもあります。
凹まずに、頑張っていきましょうね。
