サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月6日 00:24
お世話になっております。
AMP対応後に 『タグ「style amp-custom」の CSS 構文エラー』 と
『タグ「meta name=viewport」の親タグは「div」ですが、「head」のみ使用できます。』が
報告されている状態です。
対象URL：
https://risinghisa.com/how-to-study-english/?amp=1
画像添付の通りエラー箇所が赤くなっているのはドキュメントヘッドの外側についてのエラーですが、
CSS 構文エラーはエラー自体がどこにあるのか見当がつかない状態です。
また、wordpressのどこから修正を行ったらよいか教えていただけますでしょうか。
2020年3月6日 02:29
そのような時は、AMP テスト - Google Search Console で検証します。
検証すると、「タグ「meta name=viewport」の親タグは「div」ですが、「head」のみ使用できます。」のエラーは出ていません。
もう 1 つの「タグ「style amp-custom」の CSS 構文エラー」は、Google フォントの Unica One を @import で読み込んでいるのが原因です。
AMP での Google フォントの読み込みは、link タグか @font-face のどちらかのみ許可されています。
以下の 3 ステップで解決します。
- カスタム CSS にお書きの @import を削除する。
- Unica One のページから link タグをコピーする。display=swap が付いたデフォルトのままが推奨。
- 子テーマの tmp-user フォルダにある head-insert.php と amp-head-insert.php に ↑ の link タグを貼り付ける。
わいひら reacted
Topic starter
2020年3月6日 20:25
仕事中に解決できましたが返信ができませんでしたのでご報告いたします。
ご指摘の通りカスタムCSSにUnica Oneを@importで読み込んでいたのが原因でした。
こちらでは特に文字コードを読み込む必要性はなかったのですが、
https://vlog-japan.com/plugin-table-of-contents-plus/
こちらのサイトを参考に目次カスタマイズのCSSをそのままコピペしていたのが原因でした。
Unica One を使用しないように Font family の行もすべて削除したところ、
エラーがすべて解消いたしました。
昨日は5時間位悩んでたので質問してよかったと思います。ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。