サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年6月20日 23:38
この様なエラーが検出されました。
【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】
テーマを最新バージョンにアップデート後、再度AMPテストを行いましたが「有効なAMPページではありません」と表示されてしまいます。
お忙しい時に申し訳ありませんが、エラー解消の方法があればご教授頂ければありがたいです。
2018年6月21日 09:42
例えばメールでAMPエラーのメッセージが届いたら、そこにはリンクがあるかと思います。リンクをクリックしたらどのページにAMPエラーが出ているかわかりますよね。
そこになぜエラーが出ているか詳細な状況と原因・解決方法が書かれています。以下をチェックしていただけますか。
そしてAMPエラーが出ているリンク先URLを置いていただけたらテーマ側で対応できる範囲、対応してもらえてきている状況だったりします。
https://search.google.com/test/amp?id
上記リンクでampページをテストすれば以下のエラーが検出されますよね。
HTML タグの禁止された用法、無効な用法
属性「width」はタグ「col」で使用できません。
行 302:0 <col span="1" width="12" /></colgroup>
行 380:0 <col span="1" width="12" /></colgroup>行を選択すれば以下のコードが表示されます。
<h2>乗用車ランキング</h2>
<p> </p>
<table border="1" width="100%" cellspacing="0" cellpadding="2">
<colgroup>
<col span="1" width="12" /></colgroup>
<tbody>
<tr>
<td class="tablettl" align="center" width="158">順位</td>
【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】
詳細を教えていただけたら、わいひらさんが詳細を調べまわることなく、状況をみて対処してくれる・対処法を教えてくれるはずです。
冒頭にもありますように、以下
できれば不具合・カスタマイズ対象ページのURLを掲載してください
よろしくお願いします。
2018年6月21日 09:54
ちなみにwidthの値がカラ。ってことですか？どのようなiframeを読み込んでるのかな？と思ったんですが。※リンクを置くをスゴク嫌がるかたもいるので。
やっぱりリンクを置いていただくのが詳細な情報を一度にチェックできるのでイチバン解決が早いと思います。
わいひら reacted
2018年6月21日 21:59
AMPエラーに関しては、実際のURLがないと、ちょっとどうしようも対処のしようがないかもしれません。
実際にどのようなタグが書かれていて、どのようなエラーメッセージが出ているか詳細に見る必要があるので。
ただ、エラーメッセージから推測すると、Googleマップ（もしくはその他iframeを使用するツール）とかを利用していてwidth属性に100%とかが入っているのではないかと思います。
AMPでは、width属性には、％指定はできずpx数でしか指定できません（単位は不要で数字のみ）。
いずれにせよ、確かなことは実際のページを見てみないとわからないです。
トピックスターター 2018年6月21日 23:27
すいません。
エラーメッセージに焦ってしまい、URLを載せ忘れていました。
https://moikkani.com/2017/11/20/wrongname/?amp=1
お忙しい時に手間をかけてしまい申し訳ないです。
よろしくお願いします。
わいひら reacted
トピックスターター 2018年6月21日 23:41
教えて頂いたAMPテストを実施した結果、
【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】と表示されました。
該当箇所はどれもAmazonJSを使用して、商品の貼り付けを行った箇所の様です。AmazonJSを無効化して様子を見た方がいいでしょうか？
AMPやコードに関する知識が乏しく、ご迷惑をおかけしますがアドバイスを頂ければありがたいです。
2018年6月21日 23:57
おそらく、Amazonパーツのiframeタグに「 width="120" height="240"」といったような属性が入っていないのが原因のように思います。
手っ取り早く修正するには、記事内のAmazon iframeに属性を追加すると良いかもしれません。
コード側で何とかできないかは、今日は遅いので明日でも見てみようと思います。
2018年6月22日 00:16
コード部分を見てみたら、思いのほか早く修正できそうだったので、直してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ、試してみていただけると幸いです。
2018年9月21日 09:57
Google Search Consoleで「タグ「amp-img」に属性「class」が複数含まれています。」という警告が表示されました。
確認したところ、画像を配置した際に付与されるclass
※例：class="aligncenter size-medium wp-image-851"
とは別に、amp化された際に付与されるclass
※例：class="amp-lightbox amp-lightbox-gallery"
が同じaタグ内に記載されているのが原因でした。
※現象が起こったURL → https://nagasaki.pw/sns_badcomment-853/?amp=1
↓↓↓
<amp-img class="amp-lightbox amp-lightbox-gallery" lightbox src="https://～.jpg" width="500" height="500" alt="" sizes="(max-width: 500px) 100vw, 500px" class="aligncenter size-medium wp-image-851"></amp-img>
手動でclassを設定した際も重複してしまうのですが、classを消す以外に対策があればご教授いただけると助かります。
わいひら reacted
2018年9月21日 16:18
https://search.google.com/test/amp?hl=ja&id=FJJNZnPc5m4QRagtur2YxA
エラーはでてないようです。
手動でclassを設定した際も重複してしまうのですが、classを消す以外に対策があればご教授いただけると助かります。
今後の事でしたら
<img class="hoge geho" class="gehoho hogege"
投稿画面テキストエディタ上でこのような書きかたをせず、以下のように書けばエラーはでませんよ。
<img class="hoge geho gehoho hogege"
ちなみにCocoonのスタイル：インラインとかでしたら、このように重複しないんですけど…。
わいひら reacted
2018年9月21日 18:35
かうたっくさん、お返事いただきありがとうございます！
警告が出ていたのはAMPテストではなくGoogle Search Consoleの方でした。
「class」をまとめたいのですが、AMP化の際に自動的に追加された「class」なので手がつけれず困っていました。
> amp化された際に付与されるclass
> ※例：class="amp-lightbox amp-lightbox-gallery"
インラインスタイルについてもありがとうございます！
私も基本はそこを使っていますが、今回は普通に挿入した画像で症状が出ました ?
2018年9月21日 19:29
ほんとですね。タイトル『 AMPページでの不具合』 これをみればAMPエラーともとれますが、もっと大きなカテゴリで言えば、タイトル通りですね
追加の詳細情報に感謝です！
2018年9月22日 00:04
ご報告ありがとうございます。
AMPエラー対応したものをアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip
「Cocoon設定→キャッシュ削除」から「AMPキャッシュの削除」を実行してバリデーターなどで試してみてください。
https://validator.ampproject.org/
2018年9月23日 01:26
かうたっくさん、わいひらさん、ご確認いただきありがとうございます！
さっそく修正データまでご準備いただき嬉しかったです ?
今後ともよろしくお願いいたします。
2018年9月23日 22:20
もしよろしければ、最新版を適用後「動作したか」だけでも書き込んでいただけると助かります。
2018年9月24日 00:55
こんばんは、お世話になっております。
まつのすけさんと全く同じエラー通知が来ており、ちょうどフォーラムで質問しようとしていました。
そして、AMPエラー対応したテーマをアップして、バリデーターを試したところ無事にPASSしました。
現在、サーチコンソールで新たに検証してもらっています。
「保留」となっていますので、また報告したいと思います。
横から失礼しました。
わいひら reacted
2018年9月24日 14:43
申し訳ございませんでした。
最新版を適用し、AMPキャッシュも削除したところ、「class」の重複が無くなりました。
※ソースコード上での目視確認です。
Google Search Console の方はインパラさん動揺、再検証に時間がかかるようですが、指摘箇所が書き換わったので問題なさそうです。
わいひら reacted
2018年9月24日 20:11
インパラさん、まつのすけさん、動作報告ありがとうございます！
うまく修正できていたようでよかったです。
Google Search Consoleは、バリデーターで問題なければ、そのうちエラー表示は消えると思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。