サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年10月12日 20:52
わいひらさん
いつも大変お世話になっております。みるみです。
私の責任かどうか分かりかねているのですが少し教えてください。
トップページをはじめ各アーカイブページでの読み込み時、画像自体が表示される前の一瞬だけ、枠が正方形のようになります。画像サイズのheightがwidthに引っ張られているような感じです。
読み込む画像の高さより遥かに高い高さ分の枠が伸びたあとに、実際に画像が読み込まれて他の要素も縮むような挙動をします。
デベロッパーツールでSlow読み込みにしてスクリーンショットをなんとか撮れましたので添付しておきます。
今までは全く見たことがない現象でしたので、なにかテーマ側で仕様が変わったのかと思いご質問させていただきました。
最近はなにも設定をいじっておりませんので、思い当たることといえばCocoonをなんとなくアップデートしたかなあというくらいです（それも最近ではない）。現在のverは1.9.9.5.2です。1.9.9.5.3の自動更新が来てますが（他の件で）色々不安で更新は止めています。
思い当たることがなければこのトピックはクローズされて結構です。
お手数をおかけしますがご返答よろしくお願い致します。
2019年10月13日 07:00
高速化されているので、わからないですけど
.list .card-thumb img {
border: 3px solid #fff;
border-radius: 4px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
transition: all .4s ease-out;
}
これは誰が書いたCSSですか？
- Cocoon設定・高速化の 縮小 を停止していただけますか。
CSSのほうが表示が速いのも関係してるかもしれません。
たぶんLazy Load機能で追加されたChromeの該当機能loading="lazy"が影響しているかと思います。
FireFoxで確認したらそのようにはならないかも。
ついでに高速化の圧縮機能を停止して、Cocoon設定・テーマ情報を置いてテーマ作成者さんの回答を待ってくださいね。
わいひら reacted
トピックスターター 2019年10月13日 11:03
＞Cocoon設定・高速化の 縮小 を停止していただけますか。
失礼いたしました！失念してました。
＞これは誰が書いたCSSですか？
私が書くcssの雰囲気ではないですね。たぶんスキンのcssだったと思います。
＞たぶんLazy Load機能で追加されたChromeの該当機能loading="lazy"が影響しているかと思います。
なるほど、ブラウザ側ですか。
たしかにedgeで確認したらその現象は起きず（IEは起きたけどまあ気にしない）。Firefoxは手元にないのですぐ確認する気にならなかったですが、たしかに動作確認していたブラウザはレンダリングエンジンが全てBlinkだったので納得かもです。
LazyLoadを解除したらブラウザによらず例の現象は起きませんでした。
（というかOFFにした方がページ表示速度が異常に速くなるんですがこれは別件…？）
結論としては「Cocoonではどうしようもない」なのでしょうか。
----------------------------------------------
サイト名：みるめも
サイトURL： https://milmemo.net
ホームURL： https://milmemo.net
コンテンツ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-fuwari-mirucha/style.css
Wordpressバージョン：5.2.3
PHPバージョン：7.2.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.93 Safari/537.36 Vivaldi/2.8.1664.40
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：1.9.9.5.2
カテゴリ数：17
タグ数：1070
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.7
----------------------------------------------
Gutenberg：0
AMP：0
PWA：0
Auto Post Thumbnail：0
ホームイメージ：/wp-content/uploads/ogp_default.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.2
Aurora Heatmap 1.1.1
BackWPup 3.6.10
Broken Link Checker 1.11.8
Compress JPEG & PNG images 3.2.0
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
Search Regex 1.4.16
TinyMCE Advanced 5.2.1
W3 Total Cache 0.10.1
WebSub/PubSubHubbub 3.0.3
WP-Optimize - Clean, Compress, Cache 3.0.12
WP Multibyte Patch 2.8.2
----------------------------------------------
2019年10月13日 18:18
現在Lazy Loadは無効になっていますか？
僕はまだちょっと症状を見ていないので無効にしている場合は、有効にしていただけると助かります。
ただ、Chromeのloading="lazy"が原因の場合は、それがChromeのLazy Loadの仕様なんだと思います。
トピックスターター 2019年10月14日 17:49
わいひらさん
申し訳ありません！LazyLoadをOFFにしたままでした。ONに戻しました。
当然画像の遅延読み込みという作業はやらなくなるのでPageSpeedInsightsのスコアはもちろん、WebPageTestのダイアグラムもものすごいことになってしまいましたが、体感の速度はOFFにした方が段違いに速いしノンストレスです。なぜ…？
格安SIMでモバイル回線、ブラウザはChromeにて実験してみましたが、ユーザビリティ的にはLazyLoadはOFFの方が数段上でした（もちろんキャッシュ類はリセットしてます）。僕だけの環境かもしれませんが、一応ご報告です。
とにかくCocoonに依存しない件でしたが、相談に乗っていただきありがとうございました。
これからもよろしくお願い致します。
2019年10月14日 19:45
僕の環境で試して見ましたが、添付画像のようにそこまで気になるものではありませんでした。
ただやはり動作は、ChromeのLazy Loadの仕様なのではないかと思います。
体感の速度はOFFにした方が段違いに速いしノンストレスです。なぜ…？
Lazy Loadとはそういうものですよ。
- Lazy Load OFF：読み込み時間は0コンマ何秒遅いかもしれないけど、ページ描画は一発で表示される
- Lazy Load ON：読み込み時間は0コンマ何秒速いかもしれないけど、ページ描画で画像なしページが読み込まれたあと、スクリプトにより画像が遅れて読み込まれる
Lazy Load ONの場合は、ドキュメント（ページ）の読み込み時間は早いかもしれませんが、ページ表示と画像の表示にタイムラグがあるため体感的にストレスに感じるということだと思います。
僕個人としては、無理に利用する必要はないと思います。
PageSpeed Insightsのスコアよりも、内容が全然大事だと思うので。
2019年10月14日 20:11
.list .card-thumb img { border: 3px solid #fff; border-radius: 4px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); transition: all .4s ease-out; }これは誰が書いたCSSですか？
上記私の質問と、以下。みるみさんの回答の件で今更ですが・・・！
＞これは誰が書いたCSSですか？
私が書くcssの雰囲気ではないですね。たぶんスキンのcssだったと思います。
Cocoon設定・高速化の 縮小 を停止。ありがとうございます。
Skin Name: Fuwari -海松茶(みるちゃ)-
スキンの仕様みたいですね。このスタイルを初期化したら、運営者さんがきになる点の「見た目の違和感」だけでも変わってくると思います。
あと、憶測ですが。冒頭のなぜ？？の部分
今までは全く見たことがない現象でしたので、なにかテーマ側で仕様が変わったのかと思いご質問させていただきました。
“Lazy Load機能で追加されたChromeの該当機能loading="lazy"が影響”をPageSpeed Insightsが考慮：対応した状況なのな。とか、PageSpeed Insightsの機会的なアルゴリズムがどの範囲のページスピードをチェックしてるのかとか微妙かもしれないですね？
とか思ってしまいます。
個人的に書き込みを見てると、Akiraさんって方がこの分野をよく見ている気がします。※私はまるっきり放置分野ってのが前提ですが。書き込みをチェックしページ内検索したら、詳細が書かれているページがあるはずです。もし万が一、興味があれば。 https://wp-cocoon.com/community/profile/akira/
2019年10月14日 23:23
＞わいひらさん
たしかにLazyLoadがどういうものなのかは漠然としか分かっていなかった気がします。ユーザーの気持ちを思うと、これからは外そうかなと思います。
ただし僕のブログは画像サイズが非常に大きいので、これの対策は必須ではあります（今後はWebp対応とsizes,srcsetの読み分けを導入しようと思ってます）。
＞かうたっくさん
見た目の違和感の件に関してはたしかにそうですね。特にborder:solid;とbox-shadowあたりはそう感じます。しかし欲しいデザインですので…。
（別件ですが、スキンのcssは別に頼る必要がないので今使っているところだけ自分で抜き出してスキンの使用はやめる予定です。余計なcssファイルの読み込み数も減りますし）
PageSpeedInsightsがGoogleの支配下にあることを考えると、たしかにChromeのアップデートがそれと関連してくる可能性はこれからも高そうですね。最近のスコアはユーザーの体感と随分かけ離れていると感じていますが…。
お二方、今回もありがとうございました。
わいひら reacted
2019年10月15日 01:00
見た目の違和感の件に関してはたしかにそうですね。特にborder:solid;とbox-shadowあたりはそう感じます。しかし欲しいデザインですので…。
（別件ですが、スキンのcssは別に頼る必要がないので今使っているところだけ自分で抜き出してスキンの使用はやめる予定です。余計なcssファイルの読み込み数も減りますし）
確かに、スキンは素敵なデザインが豊富なので、必要な部分のみ取り出すのも良いと思います！
あと、記事一覧だけ不要なCSSを有効化しないようにも、しやすいテーマだと思います。例えばですが、bodyclassだけでなく、イロイロclass指定があるのでチェックしたらイケなくないかもしれないですね。
****
グーグルさんもチームに分かれているっポイので、そこまで対応しきれないよ。的な事もあるかもしれないですね ? ? ?
真摯な書き込み、みなさまお疲れさまでした！
みるみ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。