サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年6月1日 11:01
別のテーマを使用していたのですが、今回cocoonテーマに変更しようと思い、ダウンロードをして有効化にしたところ、今まで表示されていたすべての画像（アイキャッチ画像や本文に追加した画像、記事一覧の画像など）が表示されなくなりました。
見たところ、
.lazyload[data-src] {
display: none !important;
}
が原因で表示できなくなっているようなのですが、これを表示する方法がわかりません。
「Lazy Loadを有効にする」のチェックを入れたり外したりしても、状況は変わらずでした。
他に遅延読み込み系のプラグインは入れていません。
アドバイスをいただけると助かります。
よろしくお願いします。
2021年6月1日 12:17
ikedaさん
すみません、以下のコードは、どこにあるのか教えていただけますか。
.lazyload[data-src] {
display: none !important;
}
出来ることならば、フォーラムのガイドラインをご一読いただき、環境情報のご提示をお願い致します。
わいひら reacted
2021年6月1日 12:56
mk2さま
すべての画像の<img>にコードがついています。
例えば、投稿ページのアイキャッチのhtmlは以下の通りです。
<div class="eye-catch-wrap"> <figure class="eye-catch" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <img width="900" height="600" src="https://〇〇〇/wp-content/ewww/lazy/placeholder-900x600.png" class="attachment-900x600 size-900x600 eye-catch-image wp-post-image lazyload" alt="〇〇〇" data-src="https://〇〇〇/wp-content/uploads/〇〇〇.jpg" data-srcset="https://〇〇〇/wp-content/uploads/〇〇〇.jpg 900w, https://〇〇〇/wp-content/ uploads/〇〇〇-500x333.jpg 500w, https://〇〇〇/wp-content/uploads/〇〇〇-768x512.jpg 768w, https://〇〇〇/wp-content/uploads/〇〇〇-375x250.jpg 375w" data-sizes="auto" /> <noscript> <img width="900" height="600" src="https://〇〇〇/wp-content/uploads/〇〇〇.jpg" class="attachment-900x600 size-900x600 eye-catch-image wp-post-image" alt="〇〇〇" srcset="https://〇〇〇/wp-content/uploads/〇〇〇.jpg 900w, https://〇〇〇/wp-content/uploads/〇〇〇-500x333.jpg 500w, https://〇〇〇/wp-content/uploads/〇〇〇-768x512.jpg 768w, https://〇〇〇/wp-content/uploads/〇〇〇-375x250.jpg 375w" sizes="(max-width: 900px) 100vw, 900px" data-eio="l" /> </noscript> <meta itemprop="url" content="https://〇〇〇/wp-content/uploads/〇〇〇.jpg"> <meta itemprop="width" content="900"><meta itemprop="height" content="600"> </figure> </div>
これでいうと、画像のURLがすべて「data-src」になってしまっているため、
.lazyload[data-src] {
display: none !important;
}
が適用されてしまっています。
これがすべての画像に適用されているので、表示できていません。
そもそも、<img>のコードは、こんなにも長文なものなのでしょうか？
よろしくお願いします。
2021年6月1日 13:32
ikedaさん
そもそも、なぜ以下のものが書いてあって、どこのCSSに書いてあるのだろうという疑問です。
.lazyload[data-src] {
display: none !important;
}
そもそもこのCSSって、必要なものか。。。と思ったのです。
それはそれとして、ご提示いただいたimgの件で、なんとなくはイメージはつきました。
実際に拝見はしておりませんので、想像であることはご承知おきください
プラグイン「EWWW Image Optimizer」が影響している可能性が高いです。
このプラグインの遅延読み込み設定がどういう状態かご確認ください。
「有効」になっているならば、「無効」にしてみてください。
わいひら reacted
2021年6月1日 13:38
なるほど。
CSSは、プラグイン「EWWW Image Optimizer」の遅延読み込みを有効にすると<style>タグで出てくるんですね。
「EWWW Image Optimizer」は、こうやってlazyloadを実現しているんですね。
妙に納得しました。
2021年6月1日 14:10
mk2さま
ご対応ありがとうございました。
ご指摘のとおり、「EWWW Image Optimizer」の設定を変更したところ、無事にすべての画像が表示されるようになりました！
<img>のコードも短くなりました。
本当にありがとうございました！
今後ともよろしくお願いします。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。