サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
ブログ相談
27
投稿
4
ユーザー
25
Reactions
990
表示
Topic starter
2022年7月11日 14:36
初めて投稿いたします。
ブログもHTMLも初心者です。
カスタムHTMLブロックを使って、記事にAmazonアソシエイトを埋め込もうとしています。
しかし、「AMP HTML タグにレイアウト属性がありません。」「タグ「amp-iframe」に不完全なレイアウト属性が指定されています。たとえば、属性「width」や「height」を指定してください。」のエラーが解消されず困っております。
解消のために行ったことは、iframeの直後にwidth="120" height="240"を追加することと、途中の marginwidth="0" marginheight="0"を削除することです。Cocoonフォーラムの過去のトピックなど様々なサイトを参照したのですがダメでした。ほんとに初心者なので、お恥ずかしいのですが内容を理解せず試している状態です。
Amazonアソシエイトのコード（一部）はこちらです。
【編集前】
<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="・・（以下略）
【編集後】
<iframe width="120" height="240" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" scrolling="no" frameborder="0" src="・・（以下略）
いっそのことAmazonアソシエイトを埋め込むことは諦めようかなという気持ちにもなるのですが、藁にも縋る思いでこちらにご相談してみました。
どなたかお詳しい方、超初心者にもわかるようにご教示くださいますと幸いです。
どうぞよろしくお願いいたします。
環境情報：
---------------------------------------------- サイト名：もものすけブログ メンタルヨワヨワ主婦の四方山話 サイトURL： https://www.momonosukeblog.com ホームURL： https://www.momonosukeblog.com コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css スキン：/wp-content/themes/cocoon-master/skins/mil-light/style.css WordPressバージョン：6.0 PHPバージョン：7.4.29 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.0 エンコーディング：none 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.4.6 カテゴリ数：17 タグ数：3 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.3 style.cssサイズ：4726バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：1 AMP：1 PWA：0 Font Awesome：5 Auto Post Thumbnail：0 Retina：1 ホームイメージ：/wp-content/uploads/2020/06/logo.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：1 CSS縮小化：1 JavaScript縮小化：0 Lazy Load：1 WEBフォントLazy Load：1 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.6.1 BackWPup 3.10.0 Broken Link Checker 1.11.16 ConoHa WING コントロールパネルプラグイン 1.0 ConoHa WING 自動キャッシュクリア 1.0.0 Contact Form 7 5.6 Custom Taxonomy Order 3.4.3 Easy FancyBox 1.8.18 EWWW Image Optimizer 6.6.0 Google XML Sitemaps 4.1.5 Jetpack 11.1 Lazy Load 0.6.1 Regenerate Thumbnails 3.1.5 Responsive Lightbox & Gallery 2.4.1 Rich Table of Contents 1.3.4 Rinker 1.9.8 Simple 301 Redirects 2.0.6 SiteGuard WP Plugin 1.6.1 TablePress 1.14 Ultimate Addons for Gutenberg 1.25.6 What's New Generator 2.0.2 WP-PageNavi 2.94.0 WP Multibyte Patch 2.9 WP ULike 4.6.2 ----------------------------------------------
2022年7月11日 18:24
momonosukeさん
実際に、そのエラーが出ている状態のページを拝見させていただくことは可能でしょうか。
（AMPのページ）
実際のサイトの状態を確認させていただくのが、1番だと思います。
私はAMPには疎いですが、詳しい方もご確認くださると思います。
momonosuke and わいひら reacted
Topic starter
2022年7月11日 19:02
お世話になります。
ご返信くださり誠にありがとうございます！
URLを掲載すればよろしいでしょうか？
https://www.momonosukeblog.com/2022/04/26/nadia_doll/?amp=1
こちらになります。
ちなみに、通常のURLは https://www.momonosukeblog.com/2022/04/26/nadia_doll/ です。
なお、最初の投稿で掲載したコードに誤りがありました。
大変申し訳ございません
正しくは以下のようになります。
↓↓↓↓↓訂正後↓↓↓↓↓
【編集前】
<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src=" ・・・（以下略）
【編集後】
<iframe width="120" height="240" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" scrolling="no" frameborder="0" src="
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
以上です。
お力添えくださいますと本当に助かります。。
どうぞよろしくお願い致します。
This post was modified 2年前 3回 by momonosuke
2022年7月11日 19:14
momonosukeさん
URLを掲載すればよろしいでしょうか？
はい、これで大丈夫です。
ちょっと、この時間帯は私はなかなか時間がとれませんので、確認や返信は厳しいかもしれないです。
他の方も、ご確認くださると思います。
とりあえず、AMPテストの結果を共有しておきます。
https://search.google.com/test/amp/result?id=gUAvG7G68pGYnB3cH0sLIQ
確かにエラーが出ているようです。
momonosuke and わいひら reacted
2022年7月11日 19:22
momonosukeさん
とりあえず、通常ページ（非AMPページ）でエラーが出ています。
以下プラグインが原因のようです。
Lazy Load 0.6.1
WordPress 5.5以降は、標準でネイティブLazyLoad（遅延読み込み）に対応しています。
（iframeは5.7以降。）
そのため、このプラグインの機能を必要としません。
（不要です。）
WordPress本体の機能と重複（コンフリクト：機能衝突）して、不具合が発生することも有り得るかと思いますので、アンインストールなさることをお勧めします。
momonosuke and わいひら reacted
2022年7月11日 19:30
momonosukeさんさん
あと、以下のプラグインの「サイトアクセラレータ」機能も有効になっているかと思います。
Jetpack 11.1
上記も、このフォーラムで過去拝見した限りでは、不具合が起きがちなような気がしますので、機能だけ無効化していただいた方が良さそうに思います。
（プラグインの無効化ではなく、機能のみの無効化。）
今回の事象に関係あるかは分かりませんけれど。
momonosuke and わいひら reacted
Topic starter
2022年7月11日 19:30
みなさまありがとうございます！！（涙）
LazyLoadをアンインストールしてみます！
2022年7月11日 19:36
まずは通常ページのiframeが表示されていないので、mk2さんが書かれているように、Lazy Loadを無効にした方が良いかと思います。
ただ、いずれにせよRinker等はAMPに対応していないので、Rinkerを使用するのであれば、AMPは無効にした方が良いかと思います。
momonosuke reacted
Topic starter
2022年7月11日 19:50
わいひら様、みなさま
ありがとうございます！
①Lazy Loadを無効化しました。
②jetpackのサイトアクセラレータ機能を無効化しました。
”Rinker等はAMPに対応していない”
→そうなんですね！知りませんでした。
Rinkerに拘っているわけではないので、使用しないようにします。
ちなみに、Rinkerの代替となるような、AMP対応している商品リンク作成プラグインは存在するのでしょうか・・・？
もし存在しないのであれば、AMPを優先させたいので、今後は商品リンクを載せることは諦めるつもりです。
質問ばかりで大変恐縮です。
This post was modified 2年前 by momonosuke
2022年7月11日 21:09
momonosukeさん
すみません、言い忘れました。
AMPキャッシュを削除していただいて、よろしいでしょうか。
AMPのキャッシュ機能について
https://wp-cocoon.com/amp-cache/
momonosuke and わいひら reacted
Topic starter
2022年7月11日 21:15
mk2様
キャッシュ削除いたしました。
なお、キャッシュ削除についてはエラー解消のため他サイトを参照していた際に知り、検証開始前に必ず行うようにしております。
Topic starter
2022年7月11日 22:10
みなさまお世話になります。
HTMLコードはそのままで、以下の対応を行いました。
①Lazy Loadを無効化しました
②jetpackのサイトアクセラレータ機能を無効化しました
③Rinkerの埋め込みを削除しました（今回お伝えしているページのみ）
④AMPキャッシュを削除しました
⑤AMPテストを行いました
エラーのまま、「HTMLタグにレイアウト属性がありません。」と言われてしまいます。
https://search.google.com/test/amp/result?id=8oYpdwIjrTSslirJ-KRGZQ
Amazonアソシエイト、またはAMPをあきらめた方がよいのでしょうか・・・（T_T）
みなさまの続報を心よりお待ちしております。
2022年7月11日 22:30
momonosukeさん
すみません、私はこの時間帯なかなか時間がとれず、できても途切れ途切れにしか顔を出せないです。
ところで、ちょっとソースの確認がしづらいのですが・・・。
環境情報ではオンにはなっていますが、おそらくCocoonの高速化は無効になっていそうに思います。
HTML縮小化：1
CSS縮小化：1
もし、有効化なさっていたら、無効化をお願い致します。
そして、ふと思うのですが、もしかして「WEXAL」をご利用でしょうか。
「WEXAL」にはいろいろ機能があるようで、全部は把握しておりませんが、「WEXAL」にはソースの圧縮機能もあったと思います。
それを無効化していたたけますでしょうか。
（支障がなければ、「WEXAL」そのものを無効化していただいた方が良いかもしれないです。）
momonosuke and わいひら reacted
Topic starter
2022年7月11日 23:00
mk2様
ご多忙中ご連絡ありがとうございます！
①Cocoonの高速化を無効化しました
有効化のままになっておりました。申し訳ありません。
②WEXALⓇ Page Speed Technology をOFFに変更しました。
コノハのコントロールパネルでONからOFFにしました。
至らないところばかりで恐縮です。
2022年7月12日 01:00
momonosukeさん
ちょっと何が起きているのか・・・というところが、今のところ分からないのですが・・・。
通常（非AMP）ページの以下の部分。
AMPページでは、ナディアのねんどろいどが表示されず、その他にも・・・という感じですよね。
ねんどろいどの部分に、何故かlayout・width・height属性がないんですよね。
その理由は分からないのですが・・・。
その理由は分からないのですが・・・。
詳しい方を待つしかないかも・・・です。
（今日は時間切れ、明日は私は通院があり、あまり時間がとれないかも・・・です。）
（今日は時間切れ、明日は私は通院があり、あまり時間がとれないかも・・・です。）
momonosuke and わいひら reacted
2022年7月12日 01:14
別件で気になったのは、AMP用の自動広告コードです。
bodyタグ直後のコードに、IDがない気がします。
何故ないのかは分からないのですけれど。
momonosuke and わいひら reacted
Topic starter
2022年7月12日 08:11
mk2様
いろいろ見て下さり本当にありがとうございます！
ちょっと何が起きているのか・・・というところが、今のところ分からないのですが・・・。
そうなんです。
こちらは単純に記事を書いて上げているだけのつもりなので、どうしてこのような違いが生まれるのか分からないんです。
別件で気になったのは、AMP用の自動広告コードです。
教えて下さりありがとうございます。
なお、アドセンスはまだ審査に合格していなくて、アドセンス認証コードを「Cocoon設定」ー「アクセス解析・認証」の「ヘッド用コード」に貼り付けている状態です。
お詳しい人を首を長くして待ちます。。
2022年7月12日 13:58
@momonosuke さん
私のテスト環境で問題を再現できず、原因が分かりません。momonosuke さんのサイトの投稿本文の全てをコピペして試したのですが、正常な amp-iframe が出力されます。
そのため、お使いのプラグイン、またはサーバーの設定が関係しているかもしれないと思いました。全てのプラグインの停止をお試しください。それでも問題が解決しない場合は、関係ないかもしれませんが コンテンツキャッシュ機能 の無効化をお試しください。
AMPを優先させたいので
とのことですが、その理由は何でしょうか？理由によっては、AMP 機能の停止をおすすめします。尚、私であれば、Cocoon の AMP 機能は有効にしません。
momonosuke and わいひら reacted
Topic starter
2022年7月12日 14:21
Akira様
御教示下さりありがとうございます！
現象の再現まで試して下さり、恐縮です。
さっそく、プラグインの停止を試してみます。
AMPを優先させたいので
とのことですが、その理由は何でしょうか？理由によっては、AMP 機能の停止をおすすめします。尚、私であれば、Cocoon の AMP 機能は有効にしません。
不勉強なので恥ずかしい回答になりますが、モバイル端末での表示が早くできるなら早いほうがいいな、という単純な理由です。
もし差し支えなければ、Akira様がCocoonのAMP機能を有効にしない理由を教えて頂いてもよろしいでしょうか・・・。
お手数をお掛けして申し訳ありませんが、どうぞよろしくお願い致します。
Topic starter
2022年7月12日 17:05
お世話になります。
Akira様のメッセージを参考に対応してみました。
①全てのプラグインの停止
→停止後にAMPテストを実施したところ、エラーが発生しました
②コンテンツキャッシュ機能 の無効化
→こちらは最初からOFFになっておりました
改めてAMPテストを行いましたが、エラーが出ました
以上です。
エラーは解消されておりません。
取り急ぎご報告いたします。
2022年7月12日 17:11
@momonosuke さん
もし、プラグインを全て停止してもサーバーの設定を変更しても問題が解決しない場合は、その投稿ページの HTML を添付していただけないでしょうか。
※ 添付画像をご参照ください。投稿の編集ページの右上にある三点アイコンをクリック → コードエディターをクリック → 表示される HTML を新規ファイルにコピペ → そのファイルを添付ファイルでアップロードしてください。
もし差し支えなければ、Akira様がCocoonのAMP機能を有効にしない理由を教えて頂いてもよろしいでしょうか・・・。
一言で言えば、ものすごく面倒だからです。
2019 年 4 月までの AMP は、サイトを高速にする仕組みと謳っていました。しかし、2019 年 4 月以降は、優れたサイトを簡単に作るための仕組みと謳っています。
この「簡単に作る」ために、現在の AMP は AMP ページのみを作ることを推奨しています。ただ、Cocoon は、AMP ページと非 AMP ページの 2 ページを作る方法を採用しています。そのため、簡単にサイトを作れず、ものすごく手間がかかります。
また、AMP ページは高速ですが、最速ではありません。現在の AMP の仕様では、超えられない壁があります。今後改善されるかもしれませんが、自分でやる方が高速になるのも理由です。
尚、サイトによりますが、Cocoon の高速化設定を使えば非 AMP ページと AMP ページの表示速度は大きくは変わらないと思います。
momonosuke and わいひら reacted
Topic starter
2022年7月12日 17:31
Akira様
ありがとうございます！
ものすごく勉強になります。。
詳細に教えて下さり本当にありがとうございます（涙）。
AMPは最速ではないんですね。
自分でも改めて調べます。
その投稿ページの HTML を添付していただけないでしょうか。
教えて頂いた方法で添付しました。
ご確認下さいますと幸いです。
どうぞよろしくお願い致します。
2022年7月12日 20:15
@momonosuke さん
HTML のアップロードありがとうございます。
Amazon のコードの部分が、以下の再利用ブロックのコードになっていました。
<!-- wp:block {"ref":1602} /-->
この部分を Amazon のコードを書いたカスタム HTML ブロックに変えて試したのですが、問題を再現できませんでした。
※ AMP エラーは出ずに、添付画像のとおり表示されます。尚、Cocoon 設定 > AMP タブにある「インラインスタイルを有効にする」のチェックを入れた状態です。非 AMP ページとは違い商品が縦に並ぶため、別途 CSS の指定が必要です。
もしかすると、再利用ブロックが問題の原因かもしれません。再利用ブロックをお使いにならず、カスタム HTML ブロックに Amazon のコードを書くとどうなるでしょうか。
This post was modified 2年前 by Akira
わいひら and momonosuke reacted
Topic starter
2022年7月12日 22:28
Akira様
本当にありがとうございます。。
感謝してもしきれないです。
もしかすると、再利用ブロックが問題の原因かもしれません。再利用ブロックをお使いにならず、カスタム HTML ブロックに Amazon のコードを書くとどうなるでしょうか。
カスタムHTMLにコードを書いてみましたが、エラーは解消されませんでした。
https://search.google.com/test/amp/result?id=Rd6cxvHItuSSJugDs1bsHQ
AMPエラーが出る原因は分かりませんが、少なくとも通常ページでは問題なく表示されます。
もうこれ以上皆様のお時間を頂くのは申し訳ないですし、Akira様の仰るようにAMPがそこまで必須機能でないのであればAMPを無効化しようという考えに傾きつつあります。。
Topic starter
2022年7月13日 20:43
Akira様！
お役に立てず申し訳ありません。
そんなことつゆほども思っておりません！！
こんな初心者のエラー対応にお時間を割いてくださり感謝しかありません。。
width と height の 2 つの属性がなくなる原因が分かりません。
Akira様でも原因不明なのですね。。
Topic starter
2022年7月20日 11:07
皆様ご無沙汰しております。
その後のご連絡が遅くなり申し訳ありませんでした。
検討した結果、AMPは無効にすることに決めました。
今回のAMPエラー” HTML タグにレイアウト属性がありません。”が出た原因は不明のままですが、
この投稿はいったん”解決済”にしてクローズしようと思います。
もし原因を突き止めた方がいらっしゃいましたら、いつでも構いませんので教えて下さると幸いです。
ご多忙中にもかかわらず、私のような初心者の質問に丁寧に対応して下さった皆様、
本当にありがとうございました！
今後も質問させて頂くこともあるかもしれません。
その際はまたよろしくお願いいたします！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。