度々すみません、追記ですが、もちろん先頭の画像だけではなく、すべての画像がぼやけなくしたいです。

また、私の環境はWindows10でクロームです。

@bucho さん

私のテストサイトでも、試してみました。

Cocoon設定のインデックスタブのフロントページタイプ（β版）の設定で、カードタイプを「大きなカード（先頭のみ）」と組み合わせると、

・一覧（デフォルト）
・タブ一覧

の２つは、ぼやけないですが、

・カテゴリごと
・カテゴリごと（２カラム）
・カテゴリごと（３カラム）

の３つの設定では、小さなサムネイル画像を読み込んでいるらしく、ぼやけてしまうみたいです。

おそらく、明日、わいひらさんが、診てくださるのではないかと思われます。

投稿者:: @bucho

度々すみません、追記ですが、もちろん先頭の画像だけではなく、すべての画像がぼやけなくしたいです。

通常のサムネイルでしたら、Retinaディスプレイ対応するしかないかもしれません。
https://wp-cocoon.com/retina-thumbnail/

投稿者:: @bucho

しかし、サムネイル画像を黄金比で指定しているのですが、大きなカードの下のエントリーカードの黄金比が全て解除されて元の写真のアスペクト比（3：2）で表示されてしまいます。

 

つまり、私としては先頭だけ画像がぼやけるのを対策して、その下のエントリーカードのサイズは元の画像サイズではなく、指定している黄金比はそのままにしておきたいです。

これに関しては、そんな大きなサムネイルを作成するコードを書いてないです。
800pxの画像をRetinaで表示させるとしたら、横幅を1600pxで切り取る必要があります。
そんな大きな画像を、サムネイルとして投稿のたびに保存していると、画像投稿ごとに時間がかかりますし、画像の数だけ大きなサイズのサムネイルがサーバーに保存されることになります。そもそも、これだけ大きな画像をアイキャッチに設定しない人もおられます（十分なサイズがないとリサイズされない）。
なので、大きな画像は現在の仕様になっています。

ですので、解決する1つの策としては、自前でサムネイルサイズを黄金比で設定して、その設定したサムネイルサイズをget_big_card_first_thumbnail_size関数で呼び出すという方法が最も無難かもしれません。
https://kotori-blog.com/wordpress/mediasize/
※PHPのカスタマイズ方法は、サポートの対象外なので、詳細は省きます。

@yhira さん

私のテスト環境ではレティーナ対応はしていませんが、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。

ソースを見ても、320px × 180px　と小さなサムネイル画像を読み込んでいるみたいです。

@yhira さん

ここの添付で、ぼやけ具合が伝わるかどうか・・・

@yhira さん

フロントページタイプ（β版）の設定で、

・カテゴリごと
・カテゴリごと（２カラム）
・カテゴリごと（３カラム）

とカードタイプを「大きなカード（先頭のみ）」と組み合わせたときの先頭の大きな画像の表示を確認した方が良いかもしれません。

@yhira さん

「タブ一覧」との組み合わせでは、ちゃんと大きなサイズの画像を読み込んでいるみたいです。

横から失礼します。

function get_entry_card_thumbnail_size($count){
  if ($count == 1 && is_front_page() && !is_paged()) :
    return 'large';
  else:
    return 'thumb320';
  endif;
}

こんな感じで1枚目は大きいサイズ、それ以外はCocoonが生成したサムネイルサイズを指定するのではどうでしょうか？

もしも、Cocoonが生成するサムネイルではサイズが小さすぎてぼやける場合。
全て大きい画像を使った上で、以前こちらで相談して教えていただいたCSSで縦横比を合わせる方法が使えると思います。

[解決済] 小さい画像でもサムネイル表示の縦横比を揃えたい

function.php

function get_entry_card_thumbnail_size($count){
  return 'large';
} 

style.css

.card-thumb:before {
  content:"";
  display:block;
  padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

黄金比の場合、

padding-top:66.66%; /* 3:2 = 2/3*100 */

この部分を書き換えればいいと思います。

padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */

@yhira さん

「タブ一覧」と「大きなカード（先頭のみ）」との組み合わせでも、タブを「新着記事」以外のカテゴリのタブを選択すると、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。

「フロントページタイプ（β版）」は、まだ β版 とのことのようですので、開発のヒントになれば・・

@プー さん

いつもお世話になっております。

ご案内いただいた方法を興味を持って拝見しています。

私は、PHPの素養がないので、勉強になります。

「フロントページタイプ（β版）」も、多くの方が手軽に利用でき、（β版）の文字がなくなるといいなと思います。

@プー 様

コメントありがとうございます。

アドバイス頂いた以下のコードを試しましたが、先頭の大きなカードはぼやけたままでした。

が下のエントリーカードは黄金比が保たれました。

function get_entry_card_thumbnail_size($count){
  if ($count == 1 && is_front_page() && !is_paged()) :
    return 'large';
  else:
    return 'thumb320';
  endif;
}

@bucho さん

アドバイス頂いた以下のコードを試しましたが、先頭の大きなカードはぼやけたままでした。

ダメでしたか。自分のサイトではこれでうまく出来ているのですが……。

それでは、その次に書いたstyle.cssにも追加する方法はいかがでしょうか。
padding-topの部分は62.5％で。
function.phpは最初にbuchoさんが書かれたものと同じです。

上で書いたCSSの場合、全てのサムネイルが黄金比になると思います。

もしも、１枚目の大きい画像だけは元の比率3：2、残りは黄金比にしたい場合は
次のようにすればいいです。

.card-thumb:before {
  content:"";
  display:block;
  padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.entry-card-wrap:first-child .card-thumb:before {
  padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

ごめんなさい、ちょっと書き間違えたので先のレスできれば消してください。

たびたびすみません、勘違いでした。そのままで大丈夫です。

フロントページタイプ（β版）の機能は使用したことがないので、ちょっとコードを読んだだけですが、

Cocoon設定のインデックスタブのフロントページタイプ（β版）の設定で、カードタイプを「大きなカード（先頭のみ）」と組み合わせると、

・一覧（デフォルト）
・タブ一覧

の２つは、ぼやけないですが、

・カテゴリごと
・カテゴリごと（２カラム）
・カテゴリごと（３カラム）

の３つの設定では、小さなサムネイル画像を読み込んでいるらしく、ぼやけてしまうみたいです。

の部分に関して、関数get_entry_card_thumbnail_size内で用いる変数$countを受け渡せていない点が不具合の原因となっているようです。

フロントページタイプでカテゴリごとに設定した場合、記事一覧はlist-new-entries.phpからindex-funcs.php#L324で生成されますが、

1. 関数get_category_index_list_entry_card_tagからentry-card.phpへ$countを受け渡していないので、entry-card.phpの記事一覧内でのカウントができていない。
2. list-new-entries.phpにおける$countの値はentry-card.phpで必要な記事一覧内でのカウントではなく、フロントページタイプで設定される記事の表示数になっており、$countの扱いが異なる形で混同されている。

あたりの問題点を修正する必要があると思います。

要は、list-index.phpと同様にindex-funcs.php#L322-L325の部分を

while ($query->have_posts()) {
  $query->the_post(); // 繰り返し処理開始
  $count++;
  set_query_var('count', $count);
  get_template_part('tmp/entry-card');
}

といった感じに修正するだけだと$count自体は本来必要な値とは異なるため、$countも辿って修正しないといけません。

@プー　様

コメントありがとうございます。

教えて頂いた、以下のコード二つを試しましたが変わりありませんでした。

↓functions.phpにはこれ

function get_entry_card_thumbnail_size($count){
  return 'large';
} 

↓CSSにはこれ

.card-thumb:before {
  content:"";
  display:block;
  padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.entry-card-wrap:first-child .card-thumb:before {
  padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

試したところ、functions.phpに書いている方が優先？されるようで、それを書くと何をCSSに書いても変わりありませんでした。。

大きなカード（先頭）の画像はぼやけませんでしたが、その下のエントリーカード一覧のアスペクト比が元の画像のアスペクト比（3：2）になってしまいます。

フロントページタイプ（β版）の設定で、

・カテゴリごと
・カテゴリごと（２カラム）
・カテゴリごと（３カラム）

とカードタイプを「大きなカード（先頭のみ）」と組み合わせたとき

この条件が必要だったんですね。こちらでは確認していませんでした。ありがとうございます。

投稿者:: @lococo

といった感じに修正するだけだと$count自体は本来必要な値とは異なるため、$countも辿って修正しないといけません。

これ、ループを抜ける事に$countをリセットするのではダメですかね。
どのように修正するのがスマートなんだろう…。
5.5.0で追加されたget_template_partの$argsを利用すればいいのかもだけど、5.5.0より前のバージョンだと、エラーが出るのかな？
https://developer.wordpress.org/reference/functions/get_template_part/

@bucho さん

実際にそちらのサイトにCSSを適用してみると、小さいサムネイルはちゃんと黄金比になりました。

キャッシュが効いていて変わらないように見えるだけではないでしょうか。
ブラウザのキャッシュを削除するとか、キャッシュ系のプラグインを止めるとかしてみてはいただけませんか？

@プー　様

コメントありがとうございます。

すみません、キャッシュが効いていたようで、今試したところできました。

ありがとうございます！

しばらくはプー様に教えて頂いたコードを使って調整してみたいと思います。

@プー　様

度々すみません、先述した件ですが、サイドバーに表示している人気記事一覧のアイキャッチ画像が消えてしまうようです。

人気記事はコクーンの機能で最初から入っているのを使っています。

@bucho さん

他に影響が出ないようにCSSを書き換えてみました。
これでどうでしょうか？

.ect-big-card-first .card-thumb:before {
  content:"";
  display:block;
  padding-top:62.5%; /* 1.6:1 = 1/1.6*100 */
}
.ect-big-card-first .entry-card-wrap:first-child .card-thumb:before {
  padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.ect-big-card-first .card-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

それから、キャッシュのせいなら、もしかして前のfunctions.phpだけの方法でも大丈夫かもしれません。もう一度試してみることをオススメします。そっちの方が無駄に大きい画像を使わないので表示が軽いです。

@プー　様

アドバイス頂き、ありがとうございます。

最後に頂いたCSSを試したところ、画像のアスペクト比は指示通りになりましたが、画像がぼやけました。

また、最初に頂いたコードをfunctions.phpに書き込むと、最初の画像がぼやけますが、エントリー一覧は元の黄金比が維持されました。

そもそも、大きなカードとカテゴリーごとの組み合わせの問題だと思いますが、テーマ本体の改善を待つ方がいいのでしょうか。。

@bucho さん

そうですか。こちらで試した限りはあのCSSで問題ないのですが。
最初のfunctions.phpも自分のサイトではずっと使っているものです。

キャッシュの削除は確実に行っていますか？
それでもダメでしたら残念ながら私の方ではわかりません。
テーマのアップデートを待つしかないでしょうね。

@プー　様

キャッシュは効いていない状態でテストしております。

特に、ファイヤーフォックスよりクロームの方がぼやけるような気がします。

プー様に頂いたコードは何度もどれも試しましたが、私の環境ではうまく反映されないようです。

申し訳ありません。

@yhira さん

早速、Cocoon バージョン：2.2.5 をダウンロードして、ローカルのテストサイトで試してみました。（WordPressバージョン：5.6環境）

「大きなカード（先頭のみ）」と

・一覧（デフォルト）
・タブ一覧
・カテゴリごと
・カテゴリごと（２カラム）
・カテゴリごと（３カラム）

の組み合わせで試してみました。

また、タブ一覧のタブを「新着記事」から、「カテゴリ」の３つのタブにも切り替えてみました。

先頭の画像がぼやけることがなくなり、アスペクト比も大きなカードのアスペクト比となり、本来の適正な表示になったような気がします。

できれば、複数の方に試していただけると、テーマ作者様もこころ強いのではないかと思われます。

わいひら　様

プー　様

リフィトリー　様

ろこ　様

こちらの件、最新のアップデートで対応してくださったと思いますので、解決できました。

コメント、アドバイス頂きまして、ありがとうございました。☺