あ、キャッシュ系のプラグインはちょっと見た感じでは、お使いになっていないようです。ものを読み込んでいるみたいです。Insights」って、リアルタイム反映ではないみたいです。01:19うさぎ先生さんちなみに、Cocoonのサムネイル画像の生成はPHPで制御されているようなので、CSSでのサイズ指定は、生成されるサムネイル画像のサイズとは、直接の関係は無いみたいです。カスタマイズする際のヒントをテーマ作者様がご提示くださっていますが、PHPでのカスタマイズなので、サポートの対象には入らないようです。自己責任にて、ということみたいですね。10:35リフィトリーさん、いろいろと詳しく教えてくださりありがとうございます!Retinaのチェックを入れる→大きな画像を使わざるを得ない(=重くなる)、ってことなんですね。Insightsには時差もあるんですね!カルーセルの付け外しをした時にはCLSにすぐ反映されていたので、画像などもすぐに反映されると思い込んでしまいました。CSSでサイズ調整できたように見えているのは仮の姿というか、大きな画像を無理に小さくしている(?)ってだけで、本来はPHPでのカスタマイズ→再生成が必要なのですね。そもそも「モバイルだと1024pxになる」のが普通のことなのか、おかしいのか、どっちなのかが分からないっていうのも思っています。さんRetinaのチェックを入れる→大きな画像を使わざるを得ない(=重くなる)、ってことなんですね。私も大雑把な理解しかないのですが、それはそのとおりなのだろうと思います。Insightsには時差もあるんですね!カルーセルの付け外しをした時にはCLSにすぐ反映されていたので、画像などもすぐに反映されると思い込んでしまいました。Insights」については、該当ページに書いてあること以外は、私もよくわかりません。Insights」にしてもサーチコンソールにしても、何かしらのプログラムで結果を判定しているはずなので、そのプログラムによる判定結果になるのだろうと思います。プログラムである以上は、長所や欠点もあるはずなので、大きな会社が提供しているから、と言って、全てが正確であるとは限らないと考えた方が良いと、私は思います。(もちろん、重要な指標であり、ありがたい指標でもあるとは思いますが・・)大きな会社が提供していると、なんだか物凄く信頼を寄せても良いような雰囲気になってしまいがちですが、その辺りは、冷静にみないといけないところもあるのかと思います。CSSでサイズ調整できたように見えているのは仮の姿というか、大きな画像を無理に小さくしている(?)ってだけで、本来はPHPでのカスタマイズ→再生成が必要なのですね。これも、あまり詳しくはないのですが、CSSで表示サイズを変更しても、生成されるサムネイル画像のサイズは変わらないような気がします。そもそも「モバイルだと1024pxになる」のが普通のことなのか、おかしいのか、どっちなのかが分からないっていうのも思っています。サイズ調整しないデフォルトのエントリーカードの状態で1024pxのサイズが出ているっていうことは、もしかしてこれ(モバイルのサムネが1024px)が普通なのかも?!という気もしてきて......私のサイトは、サムネイル画像のアスペクト比を正方形にしているので、PC、モバイル表示ともに、320×320pxのサムネイル画像が読み込まれているようです。テストサイトでは、PC、モバイル表示ともに、320×180pxのサムネイル画像が読み込まれているようです。なっているのかは、私にはちょっとわかりません。みんながみんなPHPでサイズ調整をして軽くしている、ということはないんだろうしという(^_^;)PHPでカスタマイズされていらっしゃる方は、少数だと推測します。さんFirefoxのデベロッパーツールで見てみるとPC表示ではエントリーカードのサムネイル画像は640×360pxのものを読み込んでいるみたいです。(デフォルトだと320×180pxのような気もします。)これも、なぜなのかちょっと私にはわかりません。したら、以前お使いになられていたCocoonのオプションのレイアウトのとき、生成されたサムネイル画像を読み込んでいるのか、はたまた、プラグインが影響しているのか・・わいひらさん、もしくは、詳しい方が何か書きこんでくださると良いなと思います。13:09リフィトリーさん、ありがとうございます。確認したところ、320×180pxは一覧に入っていました。Insightsのスコア自体は逐一気にしすぎず、あくまでも参考にするのが良いかもしれませんね。90-100の緑スコアにはとても出来る気がしないですが、黄色ならまぁ悪くはないのかな?みたいな......。さん確認したところ、320×180pxは一覧に入っていました。私には、やはり、大きなサイズが読み込まれる理由がわかりません。Thumbnails」でサムネイル画像の再生成は行われましたか?90-100の緑スコアにはとても出来る気がしないですが、黄色ならまぁ悪くはないのかな?みたいな......。私のサイトは、高速化設定を利用していないためもあってか、モバイルは、赤表示です。おすすめの修正内容を見てみても、どれも外せないものばかりで・・。17:56リフィトリーさん、度々ありがとうございます。Insightsの時差があるかもとのことでしたので、今のところRetinaを外して...の方法はまだ試していない状態(トピックを立てたときと同じ状態)です。さんわいひらさんが何か書きこんでくださると良いのですが、もしかしたら、サムネイル画像の再生成を行えば、改善する可能性もなくはないのかもしれません。」というサービスを利用して、PC上のローカル環境のテストサイトを使って、いろいろ試しているのですが、そうすると、運用サイトと違って、リスクもないので、オススメです。flywheel」という名前だったので、そちらで検索した方が、使い方等ヒットするかもしれません。この頃、「Local」の起動直後に操作すると、応答せずに勝手に終了したりすることもありますが、おおむねちゃんと使えています。(あと、頻繁にアップデートがあります。自動アップデートではありません。@leafytreeわいひらさんが何か書きこんでくださると良いのですが、もしかしたら、サムネイル画像の再生成を行えば、改善する可能性もなくはないのかもしれません。(320×180pxのサムネイル画像が読み込まれるようになる?かどうかはわかりませんが・・)こちらの画像1024サイズのものがあるので、画像再生成しても画像自体は表示されるかもしれません。画像タグのsrcset属性を見ると、値として1024画像が出力されているので、モバイルではそれが最適として出力されているのかもしれません。22:03僕の環境だとsrcset属性に大きなものはありません。Thumbnailsの設定は以下のようになっています。添付画像のように縦のサイズをゼロにすると、もしかしたら出力されなくなるかもしれません。Thumbnailsですべての画像の再生成が必要になります。※画像の再生成は大丈夫とは思いますが多少のリスクはあるかもしれませんので、バックアップを撮ってからの方もいるかもしれません。自己責任でになります。11:20リフィトリーさん、ありがとうございます。「Local」もテストサイトというものも、初めて聞きました!一度設定しておけばテストサイトでいろいろ試せるのですね。ローカルから本番への移行方法の部分はちょっと難しそうに感じましたが、安全にテストができるだけでもすごいですね。11:45わいひらさん、ありがとうございます。バックアップを取った後メディアで幅1024・高さ0に設定して、画像再生成をしてみました。Insightsへの反映は即時ではないようなので今はまだ1024×576が表示されていますが、この後小さいサイズが出力されるようになる(可能性がある)ということですね。flywheel」のおかげで、簡単に仮想テストができるので、とても重宝しています。サムネイル画像の再生成などは、運用サイトでは躊躇することもありますが、テストサイトなら、リスクを考えずに試せます。19:01たとえばこちらの方法でPHPを編集してサイズを指定して変更+画像再生成をするとしたら、srcsetなる部分も意図したサイズになるということなのでしょうか?多分これはできないと思います。srcset自体は、テーマの機能ではなくてWordPressの機能なので、出力はWordPressがしています。Insightsを使ってみました。添付のように、今も1024×576を読み込んでしまっているようでした。さんどうも上手くいきませんね。Firefoxのページ情報では、640×360pxを読み込んでいるようなのですが、320×180pxにならないのも、どうもスッキリしないような気もしますし・・ちょっと私ではお役にたてそうにないかもしれません。Insightsを使ってみました。この記事で良いですか。https://usagi-artteacher.com/art-materials-to-teach-history-art-of-europe/デフォルトのアイキャッチ画像はどのような縦横サイズで生成していますか。@leafytreeFirefoxのページ情報では、640×360pxを読み込んでいるようなのですが、320×180pxにならないのも、どうもスッキリしないような気もしますし・・ちょっと私ではお役にたてそうにないかもしれません。@yhiraこの記事で良いですか。https://usagi-artteacher.com/art-materials-to-teach-history-art-of-europe/デフォルトのアイキャッチ画像はどのような縦横サイズで生成していますか。はい、その記事が再生成後にアップしたものです。アイキャッチに使用している画像はもともと1600×900で、他の記事のアイキャッチも同様です。いつも投稿画面の右側に出る「アイキャッチ画像」を押して、メディアライブラリから画像を選択して、アイキャッチにしています。メディアの画面(添付)を見る限り、様々なサイズが生成されているように見えます。メディアにある、「サムネイル再生成」や「再最適化」をするとよいでしょうか。20:09アイキャッチに使用している画像はもともと1600×900で、他の記事のアイキャッチも同様です。320×180も640×360も1600×900も縦横比率は0.5265です。画像のアスペクト比率が同じなので、srcsetで採用されるのかもしれません。試しに1度だけ、1600×1000サイズの画像を作成して、アイキャッチ画像に指定してみていただいてよろしいでしょうか。それで、srcsetが消えるかどうか。※テスト後は元に戻しいただければと思います。アイキャッチサイズを1600×900で指定したい場合の解決にはならないんですよね。サイズを変更してsrcsetなどのようになるかの確認です。@yhira試しに1度だけ、1600×1000サイズの画像を作成して、アイキャッチ画像に指定してみていただいてよろしいでしょうか。それで、srcsetが消えるかどうか。※テスト後は元に戻しいただければと思います。ありがとうございます、実験してみました。テスト投稿のURLはこちらです。Insightsを使ってみると、添付のように640×360.jpgが採用されていました!ちなみにパソコン版はこれまでのものもテスト用サイズも、640×360.jpgでした(つまり今までと同じ)。16:9の比率自体は一般的なものかなとは思っています。他にもこの比率を使用していらっしゃる方は多いでしょうし、そんなみなさんが同様の状態だとも思えなくて......。私が何らかの設定を誤っている可能性が高いとは思うのですが......できればパソコンでもモバイルでも、内部ブログカードなどでも、アイキャッチ画像については16:9のままで使えることが希望ではあります。現状では「重いままにする」か「元画像の比率を変える」かの二択になりそうでしょうか。00:45ちなみに、全く関係ないかもしれないのですが、一応......https://wp-cocoon.com/front-page-type/今回の件とは別に、こちらのいわゆるサイト型表示のフロントページにするのもいいなぁと考えています。現在の一覧&エントリーカードの組み合わせから何か表示方法を変更することで、モバイル表示が軽くなる可能性がある......という感じなら早めに取り掛かろうと思います。19:35やっぱそうなんですね。WordPress自体も当然嫌がらせで重い画像を表示しているわけではなくて、モバイルでも高画質の画像を表示するために、そのような仕様になっていると思います。訪問者に対して、「美しい見た目」を提供するか「表示の早さ」をとるかのトレードオフみたいな感じ。できればパソコンでもモバイルでも、内部ブログカードなどでも、アイキャッチ画像については16:9のままで使えることが希望ではあります。現状では「重いままにする」か「元画像の比率を変える」かの二択になりそうでしょうか。Thumbnailsで再生成)。SEO的な目的でそのような変更するのであれば、あまり意味がある変更ではないとは個人的に思います。その他に何か目的があるのであれば別ですが。@yhira訪問者に対して、「美しい見た目」を提供するか「表示の早さ」をとるかのトレードオフみたいな感じ。今のところは「美しい見た目」が優先されている感じですね。Thumbnailsで再生成)。largeの幅を、たとえば800×450に設定する(+再生成する)、ということですね。その場合、PCで見たときの記事のトップ部分に表示されるアイキャッチも、おそらくlargeに設定した画像になりますよね。やるなら、それも踏まえてサイズを検討せねばですね。美術系の要素もあるブログなので美しいのは嬉しいのですが、大体130KBの画像が一気に10件表示されるって、結構重い(表示が遅い)ことなのかなぁ?とスコアを見て思って......。いまどきよほど低スペックのマシンでなければそれほど影響しないってことなのかもしれませんが、どれぐらいでどう重く(遅く)なるのかっていうのがよく分からなくて、軽い画像にできるならそれがいいよなぁという状態です。検索の順位?みたいなのことは全然考えていなくて(というか影響があるのですね...!)、「モバイルで見たサムネが130KB程度で、それが1ページに10件ぐらいあるのは別に、ままあることで気にするほどではないですよ」ってことであれば、現状のまま行こうと思います。Insightsの項目は、「ここを修正すると、読み込みが快適になるよ」程度の指標で、影響がゼロとは言いませんが、よほど表示が遅くなければ、SEO的には効果が少ないと思います。5Gサービスも開始され、スマホであろうと今後より通信は高速化が見込まれますが、MVNOの格安SIMで格安な代わりに最大通信速度が相当抑えられているプランもありますので、閲覧者への影響がゼロとも言い難いです。(そのような方は慣れていらっしゃり、よほど重いサイトでない限りは気にしないでしょうが)私であれば、JPEGやPNGでそのまま配信させるのではなく、WebP対応にさせるでしょうか。対応ブラウザもだいぶ増えました。Optimizerをお使いのようですので、WebPへの変換も簡単かと。それで検索の順位に影響があるのかと言われると、これも「ほぼない、というかよほど遅くなければゼロレベル」と考えつつ、少しでも軽くして読み込みを高速化させる(モバイルユーザーには少しでもギガ死回避に役立ちつつ、高速に読み込んでもらう)ほうが、WordPressの仕様にも左右されにくく、良好な結果を得られる気がします。19:24largeの幅を、たとえば800×450に設定する(+再生成する)、ということですね。自分が許容できるサイズにする感じです。美術系の要素もあるブログなので美しいのは嬉しいのですが、大体130KBの画像が一気に10件表示されるって、結構重い(表示が遅い)ことなのかなぁ?とスコアを見て思って......。Loadという機能があって、基本的には画像が画面内に入ってから読み込まれる仕様になっているので、不都合を感じる遅さにはなりづらいようには思います。ネットワーク環境が悪くない限りは。@jamkun私であれば、JPEGやPNGでそのまま配信させるのではなく、WebP対応にさせるでしょうか。対応ブラウザもだいぶ増えました。Optimizerをお使いのようですので、WebPへの変換も簡単かと。WebPという拡張子は、初めて知りました!ウェッピーと読むのですね。見たら、「次世代フォーマットでの画像配信を推奨」のところで出てくる拡張子の一つですね。従来画像との共存など少々ハードルがありそうですが、今後の参考にさせていただきます。Loadという機能があって、基本的には画像が画面内に入ってから読み込まれる仕様になっているので、不都合を感じる遅さにはなりづらいようには思います。ネットワーク環境が悪くない限りは。お聞きして、スキルがない私にとってやりやすい方法は、largeのサムネサイズを許容できる範囲で小さくすることだと思いました。こちらの記事を読ませていただいて、1024はあったほうがいいのだという気もしているので大きさは悩ましいですが......。https://wp-cocoon.com/retina-thumbnail/リフィトリーさん、ジャム君さん、わいひらさん、お忙しい中いろいろと教えてくださりありがとうございました。運用してみて、また迷ったときにはご相談させていただくかもしれませんが、何卒よろしくお願いいたします。00:49余談(?)ですがもうひとつブログがありまして、そちらのモバイルスコアはなんと26でした......。赤いゲージ=低速度のユーザーだとすると、ざっくり5%程度のユーザーにとっては重くなっている可能性があるということなのですね。今回ご相談させていただいたブログの方が全体的に画像は軽いので、ユーザー層の違いはありますが、5%よりは少ないだろうという気持ちで進めていこうと思いました。多くの人に見やすくなるようにと配慮を考えることと運用のしやすさのバランスについて、考えるきっかけになりました。2.1.7問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。「いいね!」機能はフォーラム登録者のみが利用できる機能です。2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。最近の書き込みはこちら。詳細なカスタマイズ依頼をするならこちら。Cocoon設定の「スキン」タブで変更できます。2傾向としてはファイザーが軽いとは聞きますね。縦画像の左右にボカシの画像を入れたいです。思い付いたアイデアだけ記述しておきます。対象は縦画像だと思います。2僕はもう全部ファイザーで主治医のクリニックもファイザーだけのようなのでまたファイザーにはなりそうです。縦画像の左右にボカシの画像を入れたいです。いつもお世話になります。スマホなどで撮影した画像が縦画像の場合、左右に余白が出ると思います。吹き出しLINE風の色が緑にならない了解しました。本件をクローズとします。メニューハイライトの色の変更方法ただこの設定を行なうとサイトのポイント部分の色が変わります。メニューハイライトの色の変更方法Cocoon設定「全体」から「サイトキーカラー」を変更すると色は変更できると思います。「横幅の広いテーブルは横スクロール」にするとセル1列目の文字が2列目に重なる遅くなりましたが修正させていただきました。文章内の画像、アイキャッチが画像が表示されない通常はwebとデータベースバックアップも行えば反映されるはずとは思うのですが。吹き出しLINE風の色が緑にならないご連絡ありがとうございます。これはmk2さんが書かれているように作成時からの仕様です。