TCDテーマFORCE：ヘッダー下ブログカルーセルの正方形サムネイル画像をフルサイズで表示させる方法

Q.ヘッダー下のブログカルーセルスライダーの正方形サムネイルに登録しているアイキャッチ画像が見切れない様にする方法はありますか？

▼該当箇所

通常は上記のようにアイキャッチ画像が正方形に切り取られて表示されています。

A.テーマファイルのカスタマイズとカスタムCSSの機能を用いることで実現できます

編集するファイル：header.php
編集箇所：376行目付近

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'size1' );

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

上記のテーマファイルの修正に加えて管理画面のTCDテーマ＞基本設定＞カスタムCSSエリアに以下のCSSを記載してください。

.animate_background .image, #recipe_archive .blur_image { background-size: contain !important;}

このCSSの記述により背景画像の上下の縦横比を保持したままで画像を表示させることができます。

▼カスタマイズ後の該当箇所

画像の上下に余白が開いてしまいますが、アイキャッチ画像を見切れることなく表示する事が可能です。