Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

AMP 標準に準拠するようにスタイルシ...
 
共有:
通知
すべてクリア

AMP 標準に準拠するようにスタイルシートのエラーを修正してください。(問題の重大性: 致命的)と通知がきました。

12 投稿
5 ユーザー
3 Reactions
1,742 表示
hiro1967
(@hiro1967)
New Member Registered
結合: 6年前
投稿: 2
トピックスターター  

AMP〉タグ「style amp-custom」で指定された作成者のスタイルシートが 50000 バイトの上限を超えています

AMP 標準に準拠するようにスタイルシートのエラーを修正してください。(問題の重大性: 致命的)と通知がきました。

過去のフォーラムにも同様なエラー報告がありましたが、自分では修正できなかったので、解決方法を教えてください。よろしくお願いします。

問題があるページのURLは

https://tsuretabi.com/sapporo-lilac-festival-2018may-2-grids/?amp=1

https://tsuretabi.com/sapporo-lilac-festival-2018may-7-the-b/?amp=1

です。

環境情報
----------------------------------------------
サイト名:つれづれ旅日記@のんびりブログ
サイトURL: https://tsuretabi.com
ホームURL: https://tsuretabi.com
コンテンツURL: https://tsuretabi.com/wp-content
インクルードURL: https://tsuretabi.com/wp-includes/
テンプレートURL: https://tsuretabi.com/wp-content/themes/cocoon-master
スタイルシートURL: https://tsuretabi.com/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP
----------------------------------------------
テーマ名:Cocoon
バージョン:1.1.4
カテゴリ数:11
タグ数:35
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.0.8
All In One SEO Pack 2.7.3
Contact Form 7 5.0.3
Google XML Sitemaps 4.0.9
Regenerate Thumbnails 3.0.2
Wordfence Security 7.1.10
WP Multibyte Patch 2.8.1
----------------------------------------------

 

 


   
引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

すべての AMP ページでエラーが出ています。

適用していらっしゃるスキンを変更すると、どうなるでしょうか。

AMP テストをお使いになると、エラーが解消されたかが分かります。


   
わいひら reacted
返信引用
 sada
(@sada)
New Member
結合: 6年前
投稿: 3
 

横から失礼します。私も同じスキンを適用した後に同じエラーが出ました。

Akira様のアドバイスに従い「スキンなし」に設定後にAMPテストを行いましたが同じエラーを指摘され、Cocoonの設定のキャッシュの削除からAMPキャッシュを削除後、再度「スキンなし」でAMPテストを行うとエラーは解消されました。

現在はミックス系のスキンを適用していますが、AMPエラーが出ないことを確認しております。

 


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

https://gyazo.com/ba64797ae482942ae2549ec0c2ca09b4

54701 バイトあります

別のスキンで対応するか、このスキンを使いAMP対応をあきらめるか、記事内の装飾・装飾のあるウィジェットをスマホビューで使わない。

現状、ご自身でできるのは、上記の対応だと思います。

ほかプラグインが出力するCSSをおさえたり(使用しない)※トピ主さんは平気ですが

または、わいひらさんか製作者さんにCSSのダイエットを頑張ってもらう。などかもしれません^^;

プラグインやCocoon機能の装飾がもっと入る事を考えたら、CSSのダイエットはカナリ厳しいかもしれないですね。たぶん。。。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

もう1つ。

このスキンをCocoon設定から削除して子テーマスキンCocoon Child: style.css (skins/skin-template/style.css)にでもCSSを全貼り付け。

その上でデザインのどこかをバッサリ削除すれば、50000バイト以内に収まると思います。

どちらの方法にしても、思い切りが必要ですかね><


   
わいひら reacted
返信引用
hiro1967
(@hiro1967)
New Member Registered
結合: 6年前
投稿: 2
トピックスターター  

Akiraさん、 Sadaさん、かうたっくさん、ありがとございました。

スキンの関係だったんですね。

最初はエラーの通知が来なかったので、自分では全然わかりませんでした。

わいひらさんのスキンテンプレートに変えて、前のスキンのイメージカラーをサイトキーカラーなどに置き換えてみました。

変更後、AMPテストをしてみたら、エラーが解消されました。

ホントに皆さん、ありがとうございました。

(TдT) アリガトウゴザイマス

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

スキンの装飾が多いものは、どうしてもCSS量が増えてしまうので、AMP上限の50KBを超えてしまいます^^;
テーマ側でも、仕様していないCSSは除外するなどしてダイエットしているのですが、どうしてもダイエットしきれない場合はあります。
例えるなら、身長190cmある人(CSSの量が膨大なテーマ)が体重50kg(CSS50KB)にダイエットするはかなり厳しいといった感じです。
ここら辺は、何とかしたいのですが、なかなか難しいです…。

CSSをダイエットする関数はlib/amp.phpのget_dieted_amp_css_tag関数の部分になるので、何かもっと良い圧縮方法がある方は、是非ご提案願えれば幸いです。
https://github.com/yhira/cocoon/blob/master/lib/amp.php#L827
現在は、僕が無理やり組んだコードなので、完璧ではないと思います。
おそらくもっと良い方法があるのかもしれません。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

あとよろしければ、エラーが出たスキン名を教えていただければと思います。
スキン情報に、AMP情報を書き加えて、AMP制限量(50KB)を超えてしまうテーマは、AMPで適用しないといった処理を加えるというのもありかもしれません。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

スキンは以下のものです。

https://wp-cocoon.com/hygiene/

AMP対応が売りなのと、キャッシュ効果の速さ的魅力などで、ここに書き込みして頂いたかたはスキンを変更。と言う手段をとったんでしょうかね??

AMPで適用しないといった処理を加えるというのもありかもしれません。

テーマ作成者さん的気持ちも分からなくない。。って事はあるかもですが、『AMPエラー』とサーチコンソールで言われ心配になるユーザーさんの心情は軽減される効果は人によって大きいかもです^^

ただAMP対応にチェックを入れたのになぜAMP流入がないのか??と思う人も居ると思うのと、処理をしなくてもampエラーなのでAMP非対応と強制的になる点を思うと『う~~ん…、、どうなんだろ??』と思うところもありそうですね^^;


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

AMP非対応に強制的になるわけではなくて、AMPページでエラーがでそうなスキンはCSSが適用されないようにするだけです。AMPは有効のままになります。

上の書き込みはこう書きたかったんでした。

× AMP制限量(50KB)を超えてしまうテーマは、AMPで適用しない

○ AMP制限量(50KB)を超えてしまうスキンは、AMPで適用しない


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

CSSサイズが大きすぎる場合、デフフォルトテーマ+子テーマamp.cssのみ適応。って事ですね。

スキンのデザインが気に入っている人で、AMP時デザインは変ってもAMP対応を優先したい人もいそうかも。Cocoon利用者が多いだけにそう思いました。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

そうなります。

AMPで表示する場合は、ほとんどモバイルからのアクセスなので、スキンの表現はほぼなくなると言っても良いので、デフォルトになっても良いかなと思っています^^;
通常ページでスキン表示されればいいかなぁと。そうしないと、エラーが出てしまうので致し方ないというのが大前提ですが。
管理画面のスキンページで、対応しているスキンには、AMPマークを表示する仕様にしようとは思っています。


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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