[ブロガー向け]これからAMP対応すべくCSSを編集しようと思っている方へ

2019年4月14日Wordpress(ワードプレス),ブログ

みなさんどうもAMP！毎日毎日CSSとにらめっこしてる@xi10jun1です。

みなさん、AMP対応してますか？僕はバリバリAMP対応しているんですが、正直キツイところが多々あります。

そこでこれからAMP対応を目指す、特にブロガーさんでCSSを編集したい方に覚えておいて欲しいことがあります。

AMPのCSSマジで面倒

とにかくAMPのCSSはマジで面倒です。

技術的な話は長くなるので割愛しますが、おそらくブロガーさんでありがちなのは次の項目でしょう。

!importantでエラー

AMP用CSSファイル50KBオーバーのエラー

なんかよく分からないエラー

!importantでエラー

最近はあまり見なくなったような気もしますが、通常、!importantを使うことで『ここのコードが最優先！』と適用させることができます。

ところがこれ、AMPではサポート外なのでエラーが出ます。

最近はどのテーマにも独自でCSSを編集できるページが設けられているようですが、そこにどこかの『コピペで使える！』的なサイトからコードをコピペしたときに含まれる『!important』を、AMPのCSSにも適用されることでエラーが起こります。

なので『!important』を使っていないか、チェックしたほうが良いでしょう。

AMP用CSSファイル50KBオーバーのエラー

AMPのCSSはファイル容量が50KB以下にならなければなりません。

しかし、特に『ヨメレバ』『カエレバ』『トメレバ』をオシャレにしてくれるCSSのコードをお使いの方は、これをCSS用のコードとして利用すると、他のAMP用のCSSを圧迫してしまうことがあります。

結果50KBを超えてしまいエラーになることがあるので、セレクタを短くするなどして対応しましょう。

なんかよく分からないエラー

実はAMP対応でよく起こるのがこのよく分からないエラー。

コードは問題ないのに、サーチコンソールから『カバレッジの問題がー』『ソフト404エラーがー』など、よく分からないエラーが出てくることがあります。

コードを更新したあとにキャッシュを消すなどすると対応できるときもありますが、原因がはっきりしない場合もあるので注意しましょう。

まとめ：AMP対応は無理しない

もう無理だと思ったら下手に手を出さないほうがいいです。

ここに挙げたのは僕が引っかかったエラーなので、参考になれば幸いです。