TCDテーマBloom：記事一覧ページのサムネイル画像を横長に変更する方法

Q.サムネイル画像が正方形なので画像が切り取られてしまいます。

▼元の画像（1000×690ピクセル）　→　実際の表示

A.下記の方法でカスタマイズしてください。

Bloomテーマでは、投稿記事にアップロードしたアイキャッチ画像（記事一覧ページではサムネイル画像として使用）を、
次のサイズに変更（リサイズ）して保存する仕組みになっています。

・サイズ１　500 × 500ピクセル
・サイズ２　800 × 550ピクセル

記事一覧ページのサムネイル画像は正方形で表示するデザインのため、サイズ1が使用されます。
そのため、横に長いアイキャッチ画像の場合は、画像が切り取られることになります。

そこで、記事一覧ページでもサイズ2を使用する方法をご紹介します。

手順

(1)トップページの記事一覧
編集するファイル：　template-parts/index-tab-content.php
編集する箇所：　273行目付近

(2)投稿アーカイブページの記事一覧
編集するファイル：　index.php
編集する箇所：　64行目付近

the_post_thumbnail( 'size1' );

↓↓↓

the_post_thumbnail( 'size2' );

(3)カスタムCSS
※数値はお好みで調節してください。

/*サムネイル画像の横幅と縦横比*/
.p-blog-list__item-thumbnail {
  width: 40%; /*初期値は30.4136%*/
  aspect-ratio: 800 / 550;
}

/*サムネイル画像と記事情報の間の余白*/
.p-blog-list__item a {
  gap: 40px;
}

▼変更後イメージ

備考

• 正方形→横長の長方形になることで、記事1つのパーツの縦幅が狭くなってしまいます。縦幅を固定したい場合はCSSを少し変更します。

/*サムネイル画像の横幅と縦横比*/
.p-blog-list__item-thumbnail {
  width: auto;
  height: 250px;
  aspect-ratio: 800 / 550;
}

• ネイティブ広告も対象にする場合は次の箇所も合わせて変更します。

編集するファイル：　template-parts/index-tab-content.php
編集する箇所：　218、352行目付近

$image_src = wp_get_attachment_image_src( $native_ad['native_ad_image'], 'size1' );

↓↓↓

$image_src = wp_get_attachment_image_src( $native_ad['native_ad_image'], 'size2' );