サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年6月20日 15:25
お手数をお掛けするばかりで申し訳ございません。
不具合かどうか、私の設定不足かも知れませんが、お尋ねします。
Simplicityの時に設定していたのと似たようにと思って、スキンCOLORS（ブルー） を使用させて頂いていますが、通常の表示の時はヘッダーの背景に色が付いているものの、AMP表示を試してみると、ヘッダーの背景の色が付きません。
スキン「なし」でヘッダーの背景に色を付けてAMP表示を試したら色が付いています。
確認して頂けますか？
トピックスターター 2019年6月20日 15:55
Chromeを使用しているのですが、今、AMPのテスト表示のURL( https://kabuto.iwakuni.info/?amp=1 )をEdgeで表示させるとヘッダーの背景に着色されて表示されることがありますし・・・
WP Fastest Cacheに溜まりこんでいるのかなとクリアしてみても変わりません。
Chromeでのことだけかも知れませんので、もう少しテストしてみます。
トピックスターター 2019年6月20日 18:18
あれこれとテスト確認してみました。
COLORS（ブルー） [作者: わいひら]で、通常表示ではヘッダー部分の背景が水色に表示されますが、管理者機能の「AMPページへ」を押してAMP表示させると、ヘッダー部分の背景の水色が表示されず無色になります。
COLORS（レッド） [作者: わいひら]も試してみましたが、AMP表示ではヘッダーの背景部分の赤色が表示されず無色になります。
現在使用しているChromeだけかと思ってEdgeでも試しましたが同様でした。
WP Fastest Cacheを停止しても、Chromeのキャッシュをクリアしても、Cocoon設定のキャッシュあれこれとテスト確認してみました。
COLORS（ブルー） [作者: わいひら]で、通常表示ではヘッダー部分の背景が水色に表示されますが、管理者機能の「AMPページへ」を押してAMP表示させると、ヘッダー部分の背景の水色が表示されず無色になります。
COLORS（レッド） [作者: わいひら]も試してみましたが、AMP表示ではヘッダーの背景部分の赤色が表示されず無色になります。
現在使用しているChromeだけかと思ってEdgeでも試しましたが同様でした。
WP Fastest Cacheを停止しても、Chromeのキャッシュをクリアしても、Cocoon設定のキャッシュ削除をしても同様です。
現在働いている6つのサイト共に同様ですが、そのうちの一つ、 https://kabuto.iwakuni.info/
の環境を入れておきます。
----------------------------------------------
サイト名：岩国市田舎村昆虫館 (GARAKUTA Insect)
サイトURL： https://kabuto.iwakuni.info
ホームURL： https://kabuto.iwakuni.info
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-colors-blue/style.css
Wordpressバージョン：5.2.2
PHPバージョン：7.1.5
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：1.8.3
カテゴリ数：16
タグ数：223
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.7
----------------------------------------------
Gutenberg：0
AMP：1
PWA：1
ホームイメージ：/wp-content/uploads/2019/05/cooking-e832b3072b_640-3.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
Advanced noCaptcha & invisible Captcha 5.5
Akismet Anti-Spam 4.1.2
Broken Link Checker 1.11.8
CMS Tree Page View 1.6
Edit Author Slug 1.6.0
EWWW Image Optimizer 4.8.0
Google Analytics Dashboard for WP (GADWP) 5.3.8
Google XML Sitemaps 4.1.0
Post Duplicator 2.20
Redirection 4.3.1
Requirements Checklist 2.4
Revision Control 2.3.2
SiteGuard WP Plugin 1.4.3
TinyMCE Advanced 5.2.1
WebSub/PubSubHubbub 3.0.2
WordPress Ping Optimizer 2.35.1.0.0
WP Fastest Cache 0.8.9.4
WP Multibyte Patch 2.8.2
----------------------------------------------
2019年6月20日 19:01
Cocoon設定・AMPタブを開いてチェックしていただけたら、わかりやすいんですが、スキン側から制御されているんですね。
https://gyazo.com/72e12914bf55d1e4e7b4aafcd9b8352d
CSSの容量問題でAMPエラーが出る可能性があるからで。
対処方法は上記の通りで。
- /wp-content/themes/cocoon-master/skins/skin-colors-blueフォルダをダウンロード
- skin-colors-blueフォルダ内のoption.csvファイルを開く
- amp_skin_style_enable,0の一行を削除、上書き保存
- /wp-content/themes/cocoon-child-master/skins/にskin-colors-blueフォルダをアップロード
- Cocoon設定・スキンタブ『表示スキン』を『子テーマのスキンのみ表示』に選択
- COLORS（ブルー） [作者: わいひら]を選択
- 保存
こんな手順になります。
AMPエラーが出るようでしたら、AMPタブより『スキンのスタイルを有効にする』のチェックを外すなどの対応されるのが良いかと思われます。
わいひら reacted
トピックスターター 2019年6月20日 19:20
かうたっく様
COLORS（ブルー） [作者: わいひら]は簡素で、フォントも私の好みであり、文字の色も読み易いので使用させてもらったのですが、私にとっては結構難しいことをしなければならないようですから、テスト用サイトで試してみることにして、当面、 Like Simplicity [作者: わいひら]を使用してみようかと思います。
教えて頂いたことはテスト用サイトでやってみて、また解らないことが出てきたら質問したいと思います。
ありがとうございました。
わいひら reacted
2019年6月20日 20:49
かうたっくさんが書かれてように、スキンを適用するとAMPサイズ制限（約50KBしかCSSが使えない）に引っ掛かる可能性があるので、基本的にスキン制御かけています。
ただCOLORSスキンをよくよく見てみると、5KB程度のCSSしかないので、スキン制御を解除しても大丈夫なような気もします（Cocoon親テーマで30～40KBは使用する）。
なので解除しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
現在、スキンのstyle.cssサイズで何KBから、AMPでスキン制御を書けるかの試行錯誤中ではあります。
個人的には、10KBまでは大丈夫なのかなと思うので、当面の指針として10KB以上style.cssのサイズがあるスキンは、AMPでスキン表示制御をかけておこうと思います。
なのでCOLORSスキンは、5KBなので、スキン制御解除しておこうと思います。
※ここら辺はまだ手探り状態なので、仕様は変わる可能性はあるのでご了承ください。
トピックスターター 2019年6月21日 05:24
わいひら様、おはようございます。
最新ファイルをFFFTPを使ってアップロードして確認してみました。
AMP表示にしても最初に目に入るヘッダー部分に違和感が無くなりましたので見られる方もアレレッ？と思われることは無くなります。
上の方に書きましたサイトの記事は改ページをあちらこちらに入れていますので、この方法で変更しておこうと思います。
AMPエラーは出ていないようです。
トピックスターター 2019年6月21日 07:51
Cocoon 1.8.4の紹介を見まして、アップデートしてみたら、この件も変更されていたのですね。
早速、COLORS（ブルー） [作者: わいひら]に正式に設定しました。
参考までに、画像を添付しておきます。
これは、アナリティクスでリアルタイムに表示させている 画面の一部ですが、Google検索で「AMPページ」に入って、続いて「2ページ目」に移られたところです。
これで、2ページ目が開いた時、他のサイトへ飛んだかなと思うことも無くなります。
お忙しいところ、有難うございました。
わいひら reacted
2019年6月21日 20:24
AMPエラーは出ていないようです。
ご確認ありがとうございます。
5KBくらいなら大丈夫そうですね。
ただ、Cocoonの仕様上拡張スタイル（ボックスとかバッジとか吹き出しとか）は多数利用している場合は、制限を超える場合はあるかもしれません。
ただ、その場合でも単にAMPエラーが出てそのページがAMP登録されないだけなので、SEO的な影響はそれほどないと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。