サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年1月29日 10:58
このエラーは気にする必要は無いのでしょうか？
長文になってしまいますが、宜しくお願いします。
「エラー: 要素 img に必要な属性 src がありません。」
サムネ画像は、共に問題なく表示されています。
2024/01/10の記事URL: https://xn--ecka7j.biz/toolboox/chatgpt/8991/
「ブログカード記事Error内容」
Error: Element img is missing required attribute src.
From line 425, column 1478; to line 425, column 1684
-favicon"><img data-src="https://www.google.com/s2/favicons?domain= https://xn--ecka7j.bi z" alt="" class="blogc…icon-image internal-blogcard-favicon-image lozad lozad-img" loading="lazy" width="16" height="16" /><noscr
Attributes for element img:
Global attributes
alt — Replacement text for use when images are not available
src — Address of the resource
srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
sizes — Image sizes for different page layouts
crossorigin — How the element handles crossorigin requests
usemap — Name of image map to use
ismap — Whether the image is a server-side image map
width — Horizontal dimension
height — Vertical dimension
referrerpolicy — Referrer policy for fetches initiated by the element
decoding — Decoding hint to use when processing this image for presentation
loading — Used when determining loading deferral
fetchpriority — Sets the priority for fetches initiated by the element
「記事のSource」部分は、以下の様になっています。
（こちらは、googleのfavicons部分のみエラー）
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none"> <a href="https://xn--ecka7j.biz/toolboox/chatgpt/8916/" title="生成AIは嘘をつく!? Bardにジックリ聞いてみた結果" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"> <div class="blogcard internal-blogcard ib-left cf"> <div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div> <figure class="blogcard-thumbnail internal-blogcard-thumbnail"> <img decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2024/01/AI_Bard-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2024/01/AI_Bard-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2024/01/AI_Bard-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2024/01/AI_Bard-160x90.png 160w" sizes="(max-width: 320px) 100vw, 320px" /> </figure> <div class="blogcard-content internal-blogcard-content"> <div class="blogcard-title internal-blogcard-title">生成AIは嘘をつく!? Bardにジックリ聞いてみた結果</div> <div class="blogcard-snippet internal-blogcard-snippet">１回の質問で同時に３つの回答の間に矛盾と問題があります。問題１は、それぞれの回答間における矛盾チェックをしていないことです。少なくとも同時回答なら矛盾チェックは必要かと思います。そして、最も大きな問題（回答２）は、大きな嘘が、もちろん、AIが悪意を持ってうそをついたのではないということですが、使う側と、提供する側の課題があります。人がコントロールしている限りそんなことか起こるのは限られた部分のハズです。だから、AIも使い方次第となると思います。全ては人間側の責任です。</div> </div> <div class="blogcard-footer internal-blogcard-footer cf"> <div class="blogcard-site internal-blogcard-site"> <div class="blogcard-favicon internal-blogcard-favicon"> <img data-src="https://www.google.com/s2/favicons?domain= https://xn--ecka7j.bi z" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image lozad lozad-img" loading="lazy" width="16" height="16" /> <noscript> <img decoding="async" src="https://www.google.com/s2/favicons?domain= https://xn--ecka7j.bi z" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /> </noscript> </div> <div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div> </div> <div class="blogcard-date internal-blogcard-date"> <div class="blogcard-post-date internal-blogcard-post-date">2024.01.10</div> </div> </div> </div> </a> </div>
外部ブログカード(2022/04/27の記事)の場合は少し違います。
（こちらは、googleのfavicons部分だけでなく、他のimg部分にもエラーがあります。）
記事URL: https://xn--ecka7j.biz/toolboox/4264/
「外部ブログカード設置記事Error1」
Error: Element img is missing required attribute src. From line 491, column 378; to line 491, column 628 humbnail"><img data-src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/e13f621f45…thumb-image external-blogcard-thumb-image lozad lozad-img" loading="lazy" width="160" height="90" /><noscr
「外部ブログカード設置記事Error２」
Error: Element img is missing required attribute src. From line 491, column 1394; to line 491, column 1618 -favicon"><img data-src="https://www.google.com/s2/favicons?domain= https://a-itc.info/blog/concretecms9-0- 2" a…icon-image external-blogcard-favicon-image lozad lozad-img" loading="lazy" width="16" height="16" /><noscr
抽出「Source」部分
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none"> <a rel="noopener" href="https://a-itc.info/blog/concretecms9-0-2" title="新しいConcreteCMSの開発環境をローカル環境に構築しています。" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"> <div class="blogcard external-blogcard eb-left cf"> <div class="blogcard-label external-blogcard-label"><span class="fa"></span></div> <figure class="blogcard-thumbnail external-blogcard-thumbnail"> <img data-src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/e13f621f45f5bf580657527ffcab5198.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image lozad lozad-img" loading="lazy" width="160" height="90" /> <noscript> <img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/e13f621f45f5bf580657527ffcab5198.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></noscript></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">新しいConcreteCMSの開発環境をローカル環境に構築しています。</div><div class="blogcard-snippet external-blogcard-snippet">本来なら「手動で管理画面からアップデートする」で、以下の内容で本環境をバージョンアップする方が簡単なのですが 1. 最新バージョンをダウンロードページから入手します。（concrete-cms-9.0.2.zip） 2. zipファイルを解...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"> <img data-src="https://www.google.com/s2/favicons?domain= https://a-itc.info/blog/concretecms9-0- 2" alt="" class="blogcard-favicon-image external-blogcard-favicon-image lozad lozad-img" loading="lazy" width="16" height="16" /><noscript> <img decoding="async" src="https://www.google.com/s2/favicons?domain= https://a-itc.info/blog/concretecms9-0- 2" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></noscript></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a> </div>
「環境情報」
----------------------------------------------
サイト名：Webサイトに必要なことと道具
サイトURL： https://xn--ecka7j.biz
ホームURL： https://xn--ecka7j.biz
コンテンツ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/silk/style.css
WordPressバージョン：6.4.2
PHPバージョン：8.1.22
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.9.2
カテゴリー数：18
タグ数：85
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：11456バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2020/02/ogt-512-512-024-068.png
----------------------------------------------
ブラウザキャッシュ有効化：1 ➡ 0
HTML縮小化：0
CSS縮小化：1 ➡ 0
JavaScript縮小化：1 ➡ 0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Aurora Heatmap 1.6.2
EWWW Image Optimizer 7.2.3
Invisible reCaptcha 1.2.3
Query Monitor 3.15.0
Regenerate Thumbnails 3.1.6
SiteGuard WP Plugin 1.7.6
Site Kit by Google 1.118.0
SVG Support 2.5.5
Wordfence Security 7.11.1
WPCode Lite 2.1.7
WP Fastest Cache 1.2.3
WP Multibyte Patch 2.9
WP Statistics 14.3.5
XO Security 3.7.0
----------------------------------------------
このトピックは11か月前からYamachan11に変更されました
2024年1月29日 12:21
「わいひらさんに連絡」にお書きになってはいますが、一般的なご質問のため私が答えます。
何も問題ありません。Nu Html Checker で JavaScript が実行されていないだけだと思います。
お気になる場合は、Cocoon 設定 > 高速化の「Lazy Loadを有効にする」のチェックを外せば Nu Html Checker でエラーにはならないと思います。
親テーマで 1 つ気になる点があるとすれば、page-speed-up/minify-html.php の 318 行目 です。
$chrome_lazy = 'loading="lazy"';
Intersection observer の遅延読み込みと loading="lazy" は、どちらか一方のみにするのがいいかもしれません。また、「Lazy Loadを有効にする」のチェックに関わらず、ブログカードの画像に loading="lazy" を付けてもいいかもしれません。
わいひら and Yamachan11 reacted
2024年1月30日 19:38
このトピックは「Cocoonテーマに関する質問」に移動しておきます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。