アイキャッチ画像、サムネイル画像のサイズについて

まず子テーマのfunctions.phpに以下のコードを貼り付けます。

//サムネイル画像サイズを変更
function replace_thumbnail_src($src,$size) {
      $width = ""; $height = "";
      if($size == "thumb-160" ) {
        $width = "160";
        $height = "160";
      }
      if($size == "thumb-520" ) {
        $width = "520";
        $height = "293";
      }
      if ($width && $height) {
        $search = array('.jpg','.jpeg','.png','.gif','.bmp');//画像拡張子
        $replace = array();
        foreach ($search as $ext) {
          $replace[] = '-'.$width.'x'.$height.$ext;//トリミング後の画像パスに置き換え
        }
        $replaced_src = str_replace($search, $replace , $src);
      }
      return $replaced_src;
}

function my_change_thumbnail_size() {
  add_image_size( 'thumb-520', 520, 293, true );
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド

上のコードの中に「293」という数字が2つあります。これは高さの指定なのですが、幅が520なのでその9/16という形で計算した数字になります。

次に子テーマのstyle.cssに以下を貼り付けます。

.cardtype__img {
  padding-bottom: 56.3%;
}

↑これを貼り付けます。こちらも画像の比率をもとにした数字です（9 / 16 * 100 = 56.3）

その後Regenerate Thumbnailというプラグインで画像を再生成することをおすすめします

ご連絡ありがとうございます。

コード追加後に『Regenerate Thumbnail』を使用して画像サイズはピッタリ収まったのですが、記事一覧のサムネイル画像の画質が若干粗くなってなってしまいました。

以前使っていたテーマのfunctions.phpに下記のような表記があったのですが関係あるのでしょうか？

// 画像サイズを追加する
add_image_size(‘cps_thumbnails’, 320, 180,true);
add_image_size(‘small_size’, 640, 360,true);
add_image_size(‘large_size’, 1280, 720,true);

バックアップの復元を行い一旦元の状態に戻した為、問題はないのですが原因がわかれば教えていただきたいです。

よろしくお願いいたします。

読み込み速度を高めるために旧テーマに比べてやや小さめのサムネイル画像を使っていることが原因だと思います。
上のコードを以下のように修正するとサムネイル画像が綺麗になると思います（520と293の数字を2箇所、2倍の値にしています）。

//サムネイル画像サイズを変更
function replace_thumbnail_src($src,$size) {
      $width = ""; $height = "";
      if($size == "thumb-160" ) {
        $width = "160";
        $height = "160";
      }
      if($size == "thumb-520" ) {
        $width = "1040";
        $height = "586";
      }
      if ($width && $height) {
        $search = array('.jpg','.jpeg','.png','.gif','.bmp');//画像拡張子
        $replace = array();
        foreach ($search as $ext) {
          $replace[] = '-'.$width.'x'.$height.$ext;//トリミング後の画像パスに置き換え
        }
        $replaced_src = str_replace($search, $replace , $src);
      }
      return $replaced_src;
}

function my_change_thumbnail_size() {
  add_image_size( 'thumb-520', 1040, 586, true );
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド

変更後は再度サムネイルを生成する必要があります。画像のサイズをあげるわけなので読み込み速度が若干落ちる可能性があることはご了承ください。

お忙しい中、対応してくださりありがとうございました。
新しいコードに差しえたところ、綺麗にサムネイル画像を作成することができました。

画像を大きいサイズで作り直しても綺麗にならなかった為、ほとんど諦めていたんですが、解決できてよかったです。
本当に助かりました。ありがとうございます。

うまくいったようで安心いたしました。
ご報告ありがとうございました。