現在デフォルトスキンとして「Season (Summer)」を適用中。

AMPページでCSSが50,000Byte(約50KB)を超える「無効なCSSエラー」が出た場合の対処方法

テーマ設定
この記事は約3分で読めます。

AMPのCSS制限に対応するための機能を追加しました。

スポンサーリンク

AMPのCSS制限

AMPには、CSSサイズは50,000Byte(約50KB)までという厳しい制限があります。

Cocoon本体では、50,000Byte(約50KB)より結構控え目なサイズとなるようにCSSが書かれています。これは、子テーマのstyle.cssでカスタマイズしても問題ないように、ある程度余裕を持たせています。

それらに加えて、スキンのCSSサイズもう追加されると、以下のようなAMPエラーが出る可能性もあります。

タグ「style amp-custom」で指定されている作成者のスタイルシートが長すぎます。ドキュメントは XXXXXX バイトありますが、上限は 50000 バイトです。

Cocoonでは、なるべく上限を超えないようにCSSを指定してはいます。

けれど、超えてしまった場合は、どうしようもありません。

これまでは、以下の方法で対応するしかありませんでした。

  • スキンを利用している場合は外す
  • 子テーマでのCSSカスタマイズコードを削減する

Cocoon 1.4.2から、手軽にAMPページでCSSサイズを削減できる機能を追加しました。

AMPページのCSSを削減する方法

新しいCocoonでは、以下の2通りの方法でAMPページのCSSサイズを削減出来るようにしました。

  1. AMPページではスキンのCSSを利用しない
  2. AMPページでは子テーマのCSSカスタマイズを利用しない

AMPページでスキンを適用しない方法

AMPページでスキンCSSを適用させないようにするには、Cocoon設定の「AMP」タブにある「スキンのスタイルを有効にする」のチェックを外してください。

スキンスタイルを除外する

こうすることで、凝ったスキンを利用していたとしても、AMPページのみではスキンが適用されません。

AMPページで子テーマのスタイルを適用しない方法

子テーマのstyle.cssで凝ったCSSカスタマイズをしている場合もAMPサイズ制限エラーが出る可能性があります。

その場合は、「子テーマのCSSを適用させない」という対策も出来るようになりました。

設定を行うには、Cocoon設定の「AMP」タブにある「子テーマのスタイルを有効にする」のチェックを外してください。

子テーマのスタイルを除外する

こうすることで、親テーマのみのスタイルで表示されるようになります。

必ずしも設定する必要ない

これらの設定は、Google Search Console等のAMPエラーなどで以下のように表示されていない限りは設定する必要ありません。

タグ「style amp-custom」で指定されている作成者のスタイルシートが長すぎます。ドキュメントは XXXXXX バイトありますが、上限は 50000 バイトです。

これらは設定を行うとその分CSS量が減るという利点の半面、AMPページでの表示が簡素になるという難点もあります。

ただ、個人的に「表示が簡素になること」は、あまり気にする必要ないような気がします。

というのも、AMPページに訪れる訪問者のほぼほぼ100%がモバイル端末からだからです。

スマホなどから見た場合、凝ったCSSを使用していようがいまいが、そこまで問題ないような気がします。スマホで見ると、違いなんてほとんど分からないので。

それよりも大事なのは、内容です。なのでAMPのサイズエラーが頻発する場合は、「AMPページは内容さえしっかり見てもらえれば良い」と割り切って利用するのもありかと思います。

スキンに不具合があればご報告ください

「デザインが崩れている」とか「ここにデザインが適用されていない」等の不具合がありましたら以下でご報告いただければ幸いです。

Cocoon フォーラム
Cocoon ディスカッション掲示板

オリジナルスキンを紹介させてください

スキンを作成した場合は、是非お知らせください。

スキンを作成した際にはぜひ当サイトで紹介させてください
スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

当サイトの記事で紹介させていただきます。

テーマ設定スキン
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

タイトルとURLをコピーしました