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ページでの不具合

18 投稿
5 ユーザー
6 Reactions
4,711 表示
(@yoshimi1201)
Active Member Registered
結合: 7年前
投稿: 10
Topic starter  

この様なエラーが検出されました。

【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】

テーマを最新バージョンにアップデート後、再度AMPテストを行いましたが「有効なAMPページではありません」と表示されてしまいます。

お忙しい時に申し訳ありませんが、エラー解消の方法があればご教授頂ければありがたいです。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

例えばメールで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>&nbsp;</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-不具合について/#4193

【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】

詳細を教えていただけたら、わいひらさんが詳細を調べまわることなく、状況をみて対処してくれる・対処法を教えてくれるはずです。

冒頭にもありますように、以下

できれば不具合・カスタマイズ対象ページのURLを掲載してください

よろしくお願いします。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ちなみにwidthの値がカラ。ってことですか?どのようなiframeを読み込んでるのかな?と思ったんですが。※リンクを置くをスゴク嫌がるかたもいるので。

やっぱりリンクを置いていただくのが詳細な情報を一度にチェックできるのでイチバン解決が早いと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

AMPエラーに関しては、実際のURLがないと、ちょっとどうしようも対処のしようがないかもしれません。
実際にどのようなタグが書かれていて、どのようなエラーメッセージが出ているか詳細に見る必要があるので。

ただ、エラーメッセージから推測すると、Googleマップ(もしくはその他iframeを使用するツール)とかを利用していてwidth属性に100%とかが入っているのではないかと思います。
AMPでは、width属性には、%指定はできずpx数でしか指定できません(単位は不要で数字のみ)。
いずれにせよ、確かなことは実際のページを見てみないとわからないです。


   
(@yoshimi1201)
Active Member Registered
結合: 7年前
投稿: 10
Topic starter  

すいません。

エラーメッセージに焦ってしまい、URLを載せ忘れていました。

https://moikkani.com/2017/11/20/wrongname/?amp=1

お忙しい時に手間をかけてしまい申し訳ないです。

よろしくお願いします。


   
わいひら reacted
(@yoshimi1201)
Active Member Registered
結合: 7年前
投稿: 10
Topic starter  

教えて頂いたAMPテストを実施した結果、

【タグ「amp-iframe」の属性「width」に無効な値「」が設定されています。】と表示されました。

該当箇所はどれもAmazonJSを使用して、商品の貼り付けを行った箇所の様です。AmazonJSを無効化して様子を見た方がいいでしょうか?

AMPやコードに関する知識が乏しく、ご迷惑をおかけしますがアドバイスを頂ければありがたいです。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

おそらく、Amazonパーツのiframeタグに「 width="120" height="240"」といったような属性が入っていないのが原因のように思います。
手っ取り早く修正するには、記事内のAmazon iframeに属性を追加すると良いかもしれません。

コード側で何とかできないかは、今日は遅いので明日でも見てみようと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

コード部分を見てみたら、思いのほか早く修正できそうだったので、直してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ、試してみていただけると幸いです。


   
(@まつのすけ)
New Member
結合: 6年前
投稿: 4
 

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
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

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のスタイル:インラインとかでしたら、このように重複しないんですけど…。

https://gyazo.com/6dd4a47563f7421ee68f22ae0d026272


   
わいひら reacted
(@まつのすけ)
New Member
結合: 6年前
投稿: 4
 

かうたっくさん、お返事いただきありがとうございます!

警告が出ていたのはAMPテストではなくGoogle Search Consoleの方でした。

「class」をまとめたいのですが、AMP化の際に自動的に追加された「class」なので手がつけれず困っていました。

> amp化された際に付与されるclass
> ※例:class="amp-lightbox amp-lightbox-gallery"

 

インラインスタイルについてもありがとうございます!
私も基本はそこを使っていますが、今回は普通に挿入した画像で症状が出ました ? 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ほんとですね。タイトル『 AMPページでの不具合』 これをみればAMPエラーともとれますが、もっと大きなカテゴリで言えば、タイトル通りですね

追加の詳細情報に感謝です!


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

ご報告ありがとうございます。
AMPエラー対応したものをアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip

「Cocoon設定→キャッシュ削除」から「AMPキャッシュの削除」を実行してバリデーターなどで試してみてください。
https://validator.ampproject.org/


   
(@まつのすけ)
New Member
結合: 6年前
投稿: 4
 

かうたっくさん、わいひらさん、ご確認いただきありがとうございます!

さっそく修正データまでご準備いただき嬉しかったです ? 

今後ともよろしくお願いいたします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

もしよろしければ、最新版を適用後「動作したか」だけでも書き込んでいただけると助かります。


   
インパラ
(@spike)
Trusted Member Registered
結合: 7年前
投稿: 89
 

こんばんは、お世話になっております。

まつのすけさんと全く同じエラー通知が来ており、ちょうどフォーラムで質問しようとしていました。

 

そして、AMPエラー対応したテーマをアップして、バリデーターを試したところ無事にPASSしました。

 

現在、サーチコンソールで新たに検証してもらっています。

「保留」となっていますので、また報告したいと思います。

 

横から失礼しました。

 


   
わいひら reacted
(@まつのすけ)
New Member
結合: 6年前
投稿: 4
 

申し訳ございませんでした。

最新版を適用し、AMPキャッシュも削除したところ、「class」の重複が無くなりました。
※ソースコード上での目視確認です。

Google Search Console の方はインパラさん動揺、再検証に時間がかかるようですが、指摘箇所が書き換わったので問題なさそうです。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

インパラさん、まつのすけさん、動作報告ありがとうございます!

うまく修正できていたようでよかったです。

Google Search Consoleは、バリデーターで問題なければ、そのうちエラー表示は消えると思います。


   
共有:

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

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

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

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

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

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

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

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