サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年4月28日 21:37
よろしくお願いいたします。
imgのwidth属性、height属性とCSSのwidth、heightはどう使い分けていますか？
そして、以下のようなことを感じていませんでしょうか。
Google Chrome（新しいMicrosoft Edge）にて。
TOPページに表示されるエントリーカードのことですが、サムネイルの表示領域が確保されてから、画像が読み込まれるまでの間、画像よりも大きな領域が確保されます。見た感じでは、横幅と同じだけ縦幅が確保されているようです。1秒未満の事だと思いますが、ギクシャクした感じがします。
Firefoxでは起きていないと思います。ブラウザー（内のエンジン）によってレンダリング処理は異なると思います。
imgタグのwidth属性とheight属性ではサイズが指定されています。CSSでの指定は見当たりませんでした。
試しに、以下のCSSを追加したところ、問題が解消されたと思います。
article[id^="post-"] > figure > img{
max-width: 320px;
max-height: 180px;
}
widthではなくmax-widthにしている理由は、ディスプレイ領域のサイズによって画像のサイズは変化するようなので、それに対応する為です。
関連があるか分かりませんが、Lazy Loadをオンにしています。
以上です。
2020年4月29日 19:18
imgのwidth属性、height属性とCSSのwidth、heightはどう使い分けていますか？
属性は出来る限り挿入するようにしています。インデックスは関係ないけど、AMPとかに影響するので。
CSSはサイズ指定までは必ず行う必要があるものとしては、行ってません。
Topic starter
2020年4月30日 10:36
わいひら様
ご回答ありがとうございます。
属性は出来る限り挿入するようにしています。インデックスは関係ないけど、AMPとかに影響するので。
CSSはサイズ指定までは必ず行う必要があるものとしては、行ってません。
わかりました。
以下は自分で調べたこと記録するために書いています。
１．width属性とCSSのwidthが両方定義されていた場合、どちらが優先されるか試したところ、CSSが優先されました。
２．サムネイル画像が表示される直前に、画像よりも大きい表示領域（画像は320px×180pxなのに、一瞬320px×320px確保されたように見える）が確保される件ですが、CocoonテーマのLazy Loadをオフにすれば起きなくなりました。Lazy Loadで画像挿入する際に、何かが起きているようです。この現象はページを更新、もしくはキャッシュをクリアして更新した場合は確認できません。新規にブラウザーを開く、もしくは新規にタブを開いてページを表示させた時に確認できます。
しかしながら、自分の環境の問題かもしれませんので、その場合はごめんなさい。
画像の表示領域確保については、次のエントリーで話し合いされていました。
[固定] Lazy Loadの画像読み込み前でも画像の高さと幅を保持したい。について
Lazy LoadはWordPress5.4の機能として追加する予定だったようですが、スキップされたようです。
WordPressチームはLazy Loading機能プラグインを公開してテスト中のようです。
Lazy Loading Feature Plugin By The WordPress Team
https://wordpress.org/plugins/wp-lazy-loading/
以上です。
2020年4月30日 20:12
CocoonテーマのLazy Loadをオフにすれば起きなくなりました。
そうだと思います。
Lazy Loadによって、画像が読み込まれる前は、画像が指定されていない状態なので、サイズが取得できないんだと思います。
Lazy Load動作については、次のバージョンのWordPress仕様に任せようと思っています。
cocoon-user1206 reacted
2020年4月30日 20:18
当サイトのCocoon設定のLazy Loadを無効にして、Lazy Loading Feature Pluginを有効にしてみました。
https://wp-cocoon.com/?cat=0
そしたらChromeでもそういった動作起きないので、ここはやはりWordpress Lazy Loadに任せたいと思います。
cocoon-user1206 reacted
2020年4月30日 20:21
GIF画像は、インデックスリストをブラウザでリロードしたものなんですが、わかりづらいですね ?
単にスクロールしているようにしか見えない。
Topic starter
2020年5月1日 16:24
わいひら様
そしたらChromeでもそういった動作起きないので、ここはやはりWordpress Lazy Loadに任せたいと思います。
私も試してみました。私の環境はOS：Windows10、ブラウザー：新しいMicrosoft EdgeもしくはGoogle Chromeですが、問題はそのまま起きているように見えます。ただ、問題を目視できる時間が短くなったように感じます。私の使っているPCは処理速度が割と遅い方なので、処理速度が速いPCの場合は目視で確認できないのかもしれません。
Lazy Loading Feature Plugin By The WordPress Team
https://wordpress.org/plugins/wp-lazy-loading/
について調べたところ、imgタグのloading属性を加えることで遅延読み込みを実装しているようです。
ソースを眺めてみましたが、クラス名で遅延読み込みを除外する方法がないようです。loading属性が既に設定されている場合は、スキップされるようです。未対応のブラウザーについてフォローしている部分が見当たりません。
loadingブラウザーがどのように画像を読み込むかを示します。
eager: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。lazy: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。引用： https://developer.mozilla.org/ja/docs/Web/HTML/Element/Img
対応しているブラウザーは次の通りです。
https://caniuse.com/#feat=loading-lazy-attr
つまり、ブラウザーエンジンの実装に依存しているようです。
CocoonテーマのLazy LoadはIntersection Observer APIを利用されていると設定画面に書いてありました。また、imgタグにloading="lazy"が見つかるところから、ブラウザーエンジンでの動作も期待しているようです。その二つが競合することがないようにされていますか？
私が報告している現象が、何によるものかハッキリしませんが、ブラウザーエンジンの実装によるものであれば、引き続き問題は起きることになりますね。
2020年5月1日 19:17
僕も、読み込みに手間取ったとき（時間がかかったとき）は、同様の症状が起きました。
こればっかりは、どうしようもないかもしれません。
競合というか、同時に併記しています。
ただ、loading="lazy"だけにしても、今回のように同様の症状が起きたので、たとえ併記しなかったとしても今回の冒頭で書き込まれた動作の根本的な解決にはならなくないですか？
ただいずれにせよ、この動作は今後のWordPressと、ブラウザーに任せようと思います。
Topic starter
2020年5月1日 21:17
わいひら 様
ただ、loading="lazy"だけにしても、今回のように同様の症状が起きたので、たとえ併記しなかったとしても今回の冒頭で書き込まれた動作の根本的な解決にはならなくないですか？
そうですね。ブラウザーエンジンの問題と思われるので、根本的な解決にはなりそうもありませんね。
ただいずれにせよ、この動作は今後のWordPressと、ブラウザーに任せようと思います。
わかりました。
学ばせていただきました。
誠にありがとうございました。
わいひら reacted
2020年5月2日 19:01
僕も以前、Lazy Loadをする前に擬似的な画像読み込む方法を行ったことがあるのですが、結局うまくいかず不具合の原因になったことがありました^^;
ここは、公式の動作に合わせておいた方が無難かなと。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。