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カスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ブログカードおよび外部ブログカード設置...
 
共有:
通知
すべてクリア

[解決済] ブログカードおよび外部ブログカード設置記事において、Nu Html Checker で以下のエラーがあります。

4 投稿
3 ユーザー
3 Reactions
283 表示
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  

このエラーは気にする必要は無いのでしょうか?
長文になってしまいますが、宜しくお願いします。

「エラー: 要素 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">1回の質問で同時に3つの回答の間に矛盾と問題があります。問題1は、それぞれの回答間における矛盾チェックをしていないことです。少なくとも同時回答なら矛盾チェックは必要かと思います。そして、最も大きな問題(回答2)は、大きな嘘が、もちろん、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

「外部ブログカード設置記事Error2」

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
----------------------------------------------

This topic was modified 10か月前 by Yamachan11

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

「わいひらさんに連絡」にお書きになってはいますが、一般的なご質問のため私が答えます。

何も問題ありません。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" を付けてもいいかもしれません。


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  

@akira さん

ありがとうございます。

承知いたしました。


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

このトピックは「Cocoonテーマに関する質問」に移動しておきます。


   
共有:

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

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

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

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

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

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

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

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