【ダークルリ】新着記事・人気記事ウィジェットのサムネイル画像が表示されない | スキンの不具合 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
【ダークルリ】新着記事・人気記事ウィジ...
 
Share:
Notifications
Clear all

[解決済] 【ダークルリ】新着記事・人気記事ウィジェットのサムネイル画像が表示されない  


ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月9日 18:03  

いつもお世話になっています。ましゅーです。

先日、【ダークルリ】スキンが追加され、デザインに一目惚れして(今までやってきた設定とかをどうするか)迷いましたが、切り替えることにしました。素敵なスキンの提供ありがとうございます。

さて、スキンをダークルリに切り替えましたところ、サイドメニューや投稿ページ下部に設置していた新着記事および人気記事ウィジェットのサムネイル画像が表示されないという不具合が発生しました(添付画像1)。

(ページが表示された状態で画像が表示されず、ウィジェットの記事タイトルやサムネイル画像のある部分にマウスカーソルを当てるとサムネイル画像が表示されるといった状態です)

なお、この現象はCocoonのスキン紹介ページでも発生しているようです(添付画像2)。

恐れ入りますが、ご対応のほどよろしくお願い致します。

 

----------------------------------------------
サイト名:Turbulence
サイトURL: https://my-turbulence.com
ホームURL: https://my-turbulence.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-dark-ruri/style.css
WordPressバージョン:5.3.2
PHPバージョン:7.3.8
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.0.8.1
カテゴリ数:45
タグ数:90
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.3
style.cssサイズ:653バイト
functions.phpサイズ:706バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2016/07/turbulence-logo5.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.3
Attachment Pages Redirect 1.1.1
BackWPup 3.7.0
Broken Link Checker 1.11.11
Category Order and Taxonomy Terms Order 1.5.7.1
Contact Form 7 5.1.6
EWWW Image Optimizer 5.2.1
Flamingo 2.1.1
Google XML Sitemaps 4.1.0
Imsanity 2.5.0
Regenerate Thumbnails 3.1.2
SiteGuard WP Plugin 1.5.0
TinyMCE Advanced 5.3.0
Wordfence Security 7.4.5
WP Media Category Management 1.9.4
WP Multibyte Patch 2.8.3
WP SVG Icons 3.2.3
----------------------------------------------

This topic was modified 5か月 前 2 times by ましゅー

引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月9日 18:09  

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

 

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

 

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


わいひら 件のいいね!
返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月9日 20:29  

>かうたっくさん

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

 

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

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

 

例)
トップページ
個別の記事(サイドメニュー)

 

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

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

 

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

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

This post was modified 5か月 前 by ましゅー

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月10日 01:07  

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

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

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

 

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


わいひら 件のいいね!
返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月10日 01:45  

>かうたっくさん

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

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

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

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

ありがとうございます!

 

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


返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月10日 11:11  

私も気になってました。

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

①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

This post was modified 5か月 前 2 times by Akira

わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月10日 12:39  

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

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

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

 

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

 

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月10日 20:42  

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

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

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


返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月10日 22:00  

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

バージョン: 79.0.3945.119(Official Build) (64 ビット)

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


わいひら 件のいいね!
返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月10日 22:01  

>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


わいひら 件のいいね!
返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月10日 22:04  

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

This post was modified 5か月 前 by Akira

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月10日 22:26  

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


返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月10日 22:48  

>わいひらさん

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

 

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


返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月11日 00:36  

連続投稿すみません。

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

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

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

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

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

 

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

This post was modified 5か月 前 2 times by ましゅー

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月11日 06:30  

https://gyazo.com/e38c7a59b4004b79f2863f86636daf73

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月11日 20:04  

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

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


返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月13日 21:08  

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

 

>かうたっくさん

自分は表示されますけど、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

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月13日 22:22  

相変わらず表示されないんですね。何でだろう…。
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だと、また変わってくるのかもしれません。
ちょっと今僕は持っている環境では、不具合が再現できないので、ちょっと原因はわからないです。


返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月14日 01:25  

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

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

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

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

-----

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

ロードマップ

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

Can I use...

This post was modified 5か月 前 by Akira

わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月14日 03:30  
投稿者:: @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を使ってない環境だった。

This post was modified 5か月 前 by かうたっく

わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月14日 23:47  

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

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


返信引用
ヒロアキ
(@y-hiroaki)
Estimable Memberサイト
参加: 2年 前
投稿: 157
ヒロアキ - Twitter
2020年2月15日 00:34  

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

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

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

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

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

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

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月15日 02:21  
.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;
}

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月15日 02:35  

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

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

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

 

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

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

むりげ~~~ 🤣 😆 😆 


返信引用
ヒロアキ
(@y-hiroaki)
Estimable Memberサイト
参加: 2年 前
投稿: 157
ヒロアキ - Twitter
2020年2月15日 03:08  

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

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2020年2月15日 03:32  

ヒロアキさんに

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

 

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

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月15日 21:00  

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

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

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

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


返信引用
ヒロアキ
(@y-hiroaki)
Estimable Memberサイト
参加: 2年 前
投稿: 157
ヒロアキ - Twitter
2020年2月15日 21:50  

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だけ駄目です。

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

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


わいひら 件のいいね!
返信引用
ヒロアキ
(@y-hiroaki)
Estimable Memberサイト
参加: 2年 前
投稿: 157
ヒロアキ - Twitter
2020年2月15日 22:00  
投稿者:: @mk12mod1

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

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

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

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月15日 22:27  

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

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


返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月16日 01:10  

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

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

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

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

This post was modified 5か月 前 2 times by Akira

わいひら 件のいいね!
返信引用
ヒロアキ
(@y-hiroaki)
Estimable Memberサイト
参加: 2年 前
投稿: 157
ヒロアキ - Twitter
2020年2月16日 09:59  

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

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

スマホでもOKでした。

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

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

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

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


わいひら 件のいいね!
返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月16日 12:52  

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

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

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

参考情報

-----

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月16日 19:33  

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」を選択できる機能を追加する

返信引用
ましゅー
(@mk12mod1)
Trusted Memberサイト
参加: 2年 前
投稿: 41
ましゅー - Facebookましゅー - Twitter
2020年2月16日 22:15  

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

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の環境)によっては不具合が出るかもしれません。

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


わいひら 件のいいね!
返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月17日 02:35  

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();

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


わいひら 件のいいね!
返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 553
2020年2月17日 04:57  

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

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

 

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 10077
わいひら - Facebookわいひら - Twitter
2020年2月17日 21:45  

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

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

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

 


返信引用
Akira
(@akira)
Honorable Memberサイト
参加: 2年 前
投稿: 626
Akira - FacebookAkira - Twitter
2020年2月17日 23:26  

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


わいひら 件のいいね!
返信引用

返信する


許可された最大ファイルサイズ 5MB

 
Preview 0 Revisions Saved
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年11ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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