どのページがそうなりますか？

リロードしてもダメですか？

もしくはhoverしてくと表示されるなどはないですか？？？？

＞かうたっくさん

ご回答ありがとうございます。

＞どのページがそうなりますか？

ホーム、投稿ページ、特定のページ問わず、「[C]人気記事」、「[C]新着記事」を表示させているページで発生しています。

例）
・トップページ
・個別の記事（サイドメニュー）

＞リロードしてもダメですか？

はい、リロードしても改善されませんでした。

＞もしくはhoverしてくと表示されるなどはないですか？？？？

マウスカーソルをウィジェットの記事タイトル、あるいはサムネイル画像の部分に乗せると画像が表示されるようになります（ただし、表示されたサムネイル画像もページをリロードすると元に戻ってしまいます）。

Cocoon設定・高速化にあるLazy Load設定

を停止してもダメですか？

あと、サーバーなどののキャッシュ機能の停止をためすなど…

それらを試すと、どれが原因かわかるかもしれないですね。

＞かうたっくさん

Cocoon設定・高速化にあるLazy Load設定

を停止してもダメですか？

あと、サーバーなどののキャッシュ機能の停止をためすなど…

先程、Lazy Loadを停止してみたところ、ウィジェットのサムネイル画像が表示されるようになりました（PC/スマホにて確認）。

ありがとうございます！

…ただ、LazyLoadをOFFにしたので、PageSpeed Insightsのスコアがかなり落ちました。。。

私も気になってました。

もしよろしければ、これをお試しいただけないでしょうか。

①Lazy Load を有効にする

②子テーマの style.css に、下記の CSS を追加する

.widget-entry-card .card-thumb img,
.carousel-entry-card .card-thumb img {
  transform: none;
}

私が疑問に感じた部分は ↓ の transform: scale(1);。

https://github.com/yhira/cocoon/blob/master/skins/skin-dark-ruri/style.css#L555

…ただ、LazyLoadをOFFにしたので、PageSpeed Insightsのスコアがかなり落ちました。。。

だと思います。PageSpeed Insightsはそれをスコアの点に入れているので＾＾；

※該当ウィジェットを除外するような設定があるか、確認しないとわまりませんが。

でもそのスキンのスタイルとLazyLoadが干渉している可能性もあると思います。

面倒だからチェックしてなかった項目をAkiraさんがおそらく
ご自身の環境でチェックしてくれたと思うのでご確認ください。

僕の環境だと、以下の設定でも表示されるようです。何故だろう…。

• Lazy Loadを有効
• ダークルリスキン

使用しているブラウザはなんでしょうか？

Chromebook の Chrome で確認しました。Chrome のバージョンは、これです。

バージョン: 79.0.3945.119（Official Build） （64 ビット）

Windows 向けなどの Chrome でも同じ症状が出るかもしれません。

＞Akiraさん

＞かうたっくさん

＞わいひらさん

皆さん、回答ありがとうございます。

①Lazy Load を有効にする

②子テーマの style.css に、下記の CSS を追加する

.widget-entry-card .card-thumb img,
.carousel-entry-card .card-thumb img {
transform: none;
}

Akiraさんよりいただきました上記方法を試してみたところ、LazyLoadをONにした状態でも人気記事ウィジェットおよび新着記事ウィジェットのサムネイル画像が表示されるようになりました。

使用しているブラウザはなんでしょうか？

Chrome（バージョン: 79.0.3945.130）を使用しています。私の方ではCocoonのダークスキン紹介ページの新着・人気記事ウィジェットは私のブログと同様にサムネイル画像が表示されていませんでした。

一方で、Cocoonスキン確認サイトさんのページではサムネイル画像が表示されていました。この違いは何でしょう…＾＾；

ただ、Akiraさんの方法を試して、サムネイル画像が表示されるようになったので、しばらくこれで様子を見てみようと思います。

ご回答いただきありがとうございましたm(_ _)m

ちなみに、ホバーすると、ホバーしたカードのみ画像が表示されます。もしかすると、loading 属性との相性かもしれません。

当サイトにtransform: none;を適用してみました。
当サイトのダークスキン部分は表示されるようになりましたでしょうか。

>わいひらさん

当サイトにtransform: none;を適用してみました。
当サイトのダークスキン部分は表示されるようになりましたでしょうか。

今見たところ、サムネイル画像が表示されておりました ? 

連続投稿すみません。

色々やっているうちに発見したので報告します。

先述の通り、Akiraさんの方法で、サイドバー等の人気・新着記事ウィジェットのサムネイル問題は解決しましたが、「人気記事ウィジェット」の設定で「ランキング表示」にチェックを入れるとサムネイル画像が表示されなくなるのを確認しました。

そのため、「ランキング表示」のチェックを外せばサムネイル画像も表示されるようになるので、自分は「ランキング表示」のチェックを外しました。

なお、「Cocoon初のダークスキン！「ダークエンジ」含む暗色スキン3種追加」のページでも、サイドバーの「新着記事」はサムネイルが表示されていますが、下の方の「カテゴリー別人気記事」ではランキング表示にチェックが入れてあるようで、サムネイルが表示されていません。

（※上の私の書き込みで"サムネイル画像が表示されておりました"ってウソ書いてゴメンナサイ！）

お手数おかけいたしますが、こちらもご確認いただけますと幸いです。

https://gyazo.com/e38c7a59b4004b79f2863f86636daf73

自分は表示されますけど、Cocoonの以下記事のサイド、カテゴリ別人気記事ランキングはどのように見えますか？？？

https://wp-cocoon.com/category/announcements/updates/

僕の環境のChromeでも、表示はされるようです。

テストページ：こちらのダークスキン

返信が遅れてしまい申し訳ありません。

＞かうたっくさん

自分は表示されますけど、Cocoonの以下記事のサイド、カテゴリ別人気記事ランキングはどのように見えますか？？？

https://wp-cocoon.com/category/announcements/updates/

上記URLですと、非ダークスキンのためか、「ランキング表示」がONになっていてもサムネイル画像の表示は確認できました。

＞わいひらさん

僕の環境のChromeでも、表示はされるようです。

テストページ：こちらのダークスキン

私のPCから閲覧した所、上記テストページではやはりサイドメニューの人気記事ウィジェット（ランキング表示）のサムネイル画像は表示されませんでした。

また、普段使ってるスマホから確認しても同じようにサムネイル画像が表示されませんでした。

各種環境は以下のようになっています。

• PC
  • OS：Microsoft Windows 10 (64bit)
  • Webブラウザ：Chrome 80.0.3987.100
• スマホ
  • OS：Android 7.0; SOV31 Build/32.3.C.0.336
  • Webブラウザ：Chrome 80.0.3987.87

相変わらず表示されないんですね。何でだろう…。
AndroidエミュレーターのChromeでも確認してみたのですが、動作はしているようです。
ただ、いずれにせよWordPress5.4になるとLazy Loadがデフォルト機能となります。
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/
その際には、CocoonのLazy Load機能を廃止して、WordPressのLazy Loadに任せようと考えています。
WordPress純正のLazy Loadだと、また変わってくるのかもしれません。
ちょっと今僕は持っている環境では、不具合が再現できないので、ちょっと原因はわからないです。

このトピックのことを忘れてました。

私の Chrome では、表示されたり表示されなかったりとまちまちです。

表示されない時は、画像に src 属性がありません（添付画像をご参照ください）。画像が画面内に入ったと判定できないのかな？

おそらく、overflow: hidden; を削除すると画像は常に表示される気はします。ただ、ホバーエフェクトに不具合が出ちゃうので、解決策が分かりません。

-----

WordPress 5.4 は、3 月リリース予定なのか。

ロードマップ

Safari は対応できないのは確実として、Firefox は loading 属性への対応が間に合うかな？Firefox 75 で対応予定になってるけど。

Can I use...

投稿者:: @akira

私も気になってました。

もしよろしければ、これをお試しいただけないでしょうか。

①Lazy Load を有効にする

②子テーマの style.css に、下記の CSS を追加する

.widget-entry-card .card-thumb img,
.carousel-entry-card .card-thumb img {
  transform: none;
}

私が疑問に感じた部分は ↓ の transform: scale(1);。

https://github.com/yhira/cocoon/blob/master/skins/skin-dark-ruri/style.css#L555

ってことは、私のページを見ても画像が表示されませんか？？？

h　ttps://bibabosi-rizumu.com/　～追記：これ見れも意味ないな！～

一覧ページの画像です。

https://gyazo.com/75ffe15f35891cf8cfe30b679fdaec51

もし表示されたら、overflow: hidden; を疑ってみるとどうなりますか？？？

投稿者:: @akira

overflow: hidden; を削除すると画像は常に表示される気はします。

https://github.com/yhira/cocoon/commit/e167863ac4c28bfeec6ab6e1a41b0727aaa82cd0#diff-c012c653ffac68b76179e09759234eec

• transform: none;

この値を元の値、scale(1)　に変更。ってかscale(1)では拡大しないか。
ならscale(1.2)　もしくは数値を1.5とか

• overflow: hidden; 

これを削除

そのうえで、該当箇所のwidthを100%に変えるとoverflow: hidden;を使わなくてもfigure：親要素の領域120pxから、はみ出さないかもしれないですね？

※overflow: hidden; が原因の場合
且つ
※transform: 値;
が原因とは関係ない場合

***********

～追記～

ちがうな。私のページは

loading 属性すら入ってない
且つ
Lazy Loadを使ってない環境だった。

overflow関係は怪しいので、ちょっと待ったく直る自信はないのですが、かすかな希望を託して当サイトのCSSを修正してみました。
以下のページで相変わらず表示されませんでしょうか。
https://wp-cocoon.com/skin-dark/

これでダメなら、overflow: hidden; は見直しが必要なのかも。

ダークスキンでいろいろお手数かけます。

今更ながらですが、カルーセルでも画像が表示されない現象があります。（添付画像）

皆さんの書き込み読んでみましたが、WordPress 5.4からLazy Load対応されるんですか。

ただ、WordPressでLazy Load対応されたとしても、ブラウザによって表示されたりされなかったりするかもしれないですね。（今のところChromeが一番だめ？）

皆さんで修正をいろいろ考えてもらってますが、いっそのことホバーアクションを変更することも検討しないといけないのかなと思っています。

となると、安全を期して画像のエフェクトはやめにしようかな。

ホバーアクションとしてはシンプルで結構気に入っていたんですけどね。

.widget-entry-card-link,
.widget-entry-card-thumb {
	height: 79px;
}

.widget-entry-cards .a-wrap:hover .widget-entry-card .card-thumb img {
	position: absolute;
	clip: rect(10px, 110px, 150px, 20px);
	zoom:120%;
	margin: -10px -10px 0;
}

猛烈強引にやってみたんですけど、テーマ向きではないです＾＾；

全然違った。ズームも効いてないし。

リロードしたら、全く挙動が違ってウケる（失笑 ? ? ? 

defaultテーマでどうにかなるかと苦戦したけど、うまくいかない。

数値を変更してclipとzoomで。と思って苦戦したんですが、ダメでした ? 

似た挙動が出来れば、あとは数値を変更して仕上げて…。って思ったけど、

むりげ～～～ ? ? ? 

かうたっくさん　遅くまでご苦労さまです。

僕レベルでは試されていることがさっぱりわかりませんけど、いろいろ試してもらってありがとうございます ? 

ヒロアキさんに

お疲れ様です。やりだしたら、やってみたくなる風だけで。でも細かいことは苦手なので、誰か回答者さん的に良い案が出れくれたら良いなぁ。位に思って、思いつきだけで動いてます

わいひらさんの声掛けで、動作確認が面倒でなければ
時々でもトピックをチェックしていただけたら。って思ってますけど、強制でもなく。ふわっと思っただけです。

うまく解決できればいいですね！

ホバーアクションとしてはシンプルで結構気に入っていたんですけどね。

僕は黒背景の中に動きが出るので、好きなんですけどね。

ただ、WordPressでLazy Load対応されたとしても、ブラウザによって表示されたりされなかったりするかもしれないですね。（今のところChromeが一番だめ？）

なぜかChromeなんだよなぁ…。
と思って、1つ思いつきました。
現在、CocoonではChrome用に画像に対してloading="lazy"属性を挿入しています（ChromeのLazy Load）。
これが、Cocoon自体のLazy Load機能と干渉している可能性もあるのではないかなと。
とりあえず、以下のように修正したものを、当サイトにも適用してみました。
https://github.com/yhira/cocoon/commit/39a8a1e659f3536c23a973f8a9a6c165b170abf0
僕の環境では、不具合は再現できないので、よろしければ、当サイトなどで確認してみていただけますでしょうか。

Chromeを使って確認してみました。

https://wp-cocoon.com/category/theme/theme-settings/skins/

このページでは、カルーセルとカテゴリー人気記事とも画像が表示されませんでした。（添付画像）

また、僕のブログ（ https://bringval.com/ ）でもminify-html.phpの修正版をアップして確認してみましたが、やはり同様で画像は表示されません。（Xサーバー、Cocoonは2.0.8.1）

Chromeはバージョン: 80.0.3987.106を使っています。

またAndroidスマホ（Xperia）のChromeでも確認しましたが、どちらのページとも画像が表示されませんでした。

PCでは、Firefox、IEは問題ないんですけど、Chromeだけ駄目です。

なかなか問題が深いですね。

すみません、お手間取らせてしまって。

投稿者:: @mk12mod1

一方で、Cocoonスキン確認サイトさんのページではサムネイル画像が表示されていました。この違いは何でしょう…＾＾；

今、書き込み気づきましたが、このページはLady Loadは無効になっています。

（特に意味があって無効にしているわけじゃないんですけど）

Lady Loadを有効にしていればもっと早く問題に気づけたのか。

ダメだったか^^;
ご確認ありがとうございます。元に戻しておきます。

でも、カルーセルなら僕のChrome環境でも再現できました。
確かに、マウスホバーすると表示されるんですね。
https://wp-cocoon.com/category/theme/theme-settings/skins/?theme-switch=skin-dark-ruri
overflowの問題っぽいので、何とかCSSで改善出来ないもんか、いろいろ試してみようと思います。

プレースホルダーを入れたり何だり試した結果、単純な CSS で解決できました。

.lozad {
  min-height: 1px;
  min-width: 1px;
}

たぶん、これで大丈夫なはず。

プレースホルダーでも画像は表示されましたが、スムーススクロールでアンカーの位置がずれるんですね。Cocoon 1.8.5 でプレースホルダーが削除された理由が、やっと分かりました。

Akiraさん対策案ありがとうございます！

さっそく僕のブログで確認したところ、きちんと画像が表示されるようになりました。

スマホでもOKでした。

念の為、IE、Firefoxでも確認しましたが問題ありません。

実は、EdgeでもChromeと似たような現象がありましたが、こちらも画像が表示されるようになりました。

お手数かけたようで、本当にありがとうございます！

これで、お気に入りのホバーを変更せずにすみます? ? 

ご確認ありがとうございます。

原因は、Chrome がいち早く IntersectionObserver V2 に対応したこと。なので、Chrome のバグではなく、仕様です。

Edge（Chromium 版？）も症状が出ていたとのことですが、他のモダンブラウザも今後同様の症状が出るはずです。

参考情報

• IntersectionObserver V2 - Chrome Platform Status
• Trust is Good, Observation is Better—Intersection Observer v2  |  Web
• IntersectionObserver/explainer.md at v2 · szager-chromium/IntersectionObserver

-----

「Cocoon の Lazy Load 機能は廃止」の予定とのことですが、IE と Safari への対応はどうなるんだろう。

WordPress 5.4 の Lazy Load は、loading 属性に未対応のブラウザへのフォールバックはあるのかな？wp-lazy-loading を見る限り、未対応のブラウザは切り捨てているけど。

Akiraさん、ありがとうございます！！
僕の環境でも問題が解消されました。
https://wp-cocoon.com/category/theme/theme-settings/skins/?theme-switch=skin-dark-ruri
全部のスキンで問題なく動作するように、CSSは親テーマ側に組み込もうと思います。

Cocoon 1.8.5 でプレースホルダーが削除された理由が、やっと分かりました。

僕、完全になんで消したか忘れてます笑

「Cocoon の Lazy Load 機能は廃止」の予定とのことですが、IE と Safari への対応はどうなるんだろう。

ちょうど良い機会なので、ご意見をお聞かせください。
WordPress5.4で対応された後も、機能はあったほうがいいですか？
もしくは、機能選択性にするとか。

CocoonのLazy Loadは、画像を表示していないときに、画像の高さを設定していないので、記事の途中でリロードした時に、表示位置がずれるという難点があります。
WordPress5.4のLazy Loadで同様に試した結果、そういった問題はなかったようなので「これはデフォルトに任せたほうがいいのかな」思った次第です。
多くの利用者の方が、気にされているのはPageSpeed Insightsのスコアなので、そこまで気にする人もいないのかなと思って^^;（WordPress5.4のLazy LoadでPageSpeed Insightsは問題なかったので）。

ただ、対応されないブラウザーがあるのも確かなので、もし機能を残した方がよければ、また別の方法を考えます。
僕自身も、ここら辺はまだ迷っています。

WordPress5.4が出たときの対策として今僕が思いつくのは以下の3つぐらいでしょうか。

1. 5.4ではCocoonのLazy Loadを廃止する
2. 5.4ではCocoonのLazy Load設定項目を廃止するが非対応ブラウザーでは機能を利用する
3. 5.4では、「Cocoon Lazy Load」と「WordPress5.4からのLazy Load」を選択できる機能を追加する

お疲れ様です。ましゅーです（またしても返信遅れてしまい申し訳ありません）

Akiraさんの

.lozad {
min-height: 1px;
min-width: 1px;
}

を私のブログでも試してみたところ、人気記事ウィジェット（ランキング表示にチェックした状態）のサムネイル画像が表示されました！ありがとうございます！

＞わいひらさん

1. 　5.4ではCocoonのLazy Loadを廃止する
2. 　5.4ではCocoonのLazy Load設定項目を廃止するが非対応ブラウザーでは機能を利用する
3. 　5.4では、「Cocoon Lazy Load」と「WordPress5.4からのLazy Load」を選択できる機能を追加する

自分は3が良いのかなと考えてます。

5.4でLazyLoadが導入されますが、人（WPの環境）によっては不具合が出るかもしれません。

そうなったときの対策（逃げ道）として残しておいた方が無難なのかなと思いました。

WordPress5.4で対応された後も、機能はあったほうがいいですか？
もしくは、機能選択性にするとか。

選択性が、いいかもしれません。

というのも、Safari で画像の遅延読み込みができれば、テーマの評価が高まると思うためです。

画像のレンダリングブロックが発生しては、いくらハイスペックの iPhone でもサイトの表示速度が遅くなります。それは嫌だと思う Cocoon ユーザーは多い気がします。

WordPress5.4が出たときの対策として今僕が思いつくのは以下の3つぐらいでしょうか。

理想は 2 の「5.4ではCocoonのLazy Load設定項目を廃止するが非対応ブラウザーでは機能を利用する」です。

ただ、開発コストが高い気がします。JavaScript であれば、loading 属性に対応しているかは簡単に判定できます。

How do I handle browsers that don't yet support native lazy-loading?

PHP では、どうやってブラウザの対応を判定するんだろう？ブラウザそのもので条件分岐をすると、今後の維持が面倒そう。

なので、現実的には、こんな対策かな？

1. WordPress 5.4 からの Lazy Load は、デフォルトで有効にする。無効にする機能はつけず、無効にしたい場合は各ユーザーで対応する。私には無効にする理由が見当たらないし、無効化は 1 行のコードでできる。
2. 現在の設定項目「Lazy Loadを有効にする 」を「古いブラウザでも Lazy Load を有効にする」に変更。この項目が有効になると、Cocoon の Lazy Load と WordPress 5.4 からの Lazy Load とを併用する。

CocoonのLazy Loadは、画像を表示していないときに、画像の高さを設定していないので、記事の途中でリロードした時に、表示位置がずれるという難点があります。

プレースホルダーと読み込む画像の縦横比を一致できればいいんですけどね。

とりあえず、こんな感じのやつで、ズレがほんの少し収まる気がします。本当にほんの少し。

① プレースホルダーを表示しつつ、style 属性をつける。

$replace = ' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="$1" style="width: 50%;"';

② lozad.js の実行コードを変更し、画像が読み込まれたら ↑ の style 属性を削除する。

const observer = lozad(".lozad", {
  rootMargin: "0px 500px 500px",
  
  loaded: function(el) {
    el.removeAttribute("style");
  }
});
observer.observe();

私の環境ではスムーススクロールのアンカー位置はズレませんでしたが、ちょっと心配。

プレースホルダー削除に関する不具合は、私が指摘した記憶があるので書き込ませていただきます。

記憶が正しければ、プレースホルダー用のインラインスタイルが不具合の原因だったと思います。

チェックしたわけではありませんが、Akira様が投稿されている#post-28271の実装例でも画像タグにstyle属性が入らないことが前提となっており、何らかの不具合が生じるかもしれません。

現時点では、これにしようかなと思います。

現在の設定項目「Lazy Loadを有効にする 」を「古いブラウザでも Lazy Load を有効にする」に変更。この項目が有効になると、Cocoon の Lazy Load と WordPress 5.4 からの Lazy Load とを併用する。

元々CocoonのLazy Loadはデフォルトで無効になっているので、新しくCocoonを利用する人には、何もしない場合はWordPressのLazy Loadが適用されることになるので。
もちろん、案内や、ヘルプなどは修正しておこうと思います。

プレースホルダーは、どの環境でも上手くいく方法を思い付いたらトピックを作成し報告します。