Q.トップページのブログコンテンツとブログアーカイブページで、記事のアイキャッチ画像を正方形の表示に変更したい。
▼変更後のイメージ（トップページのブログコンテンツ） 変更前：ORIONデモサイト
A.下記の方法でカスタマイズしてください。
上記の箇所では、アイキャッチ画像が【横幅：500px 縦幅：347px】のサイズにトリミングされています。このトリミング処理を別のサイズのものに変更して画像を再生成することで表示されるアイキャッチ画像の大きさも変更出来ます。
1. 生成されるサムネイル画像の大きさを変更する
編集するファイル： functions.php
編集する箇所： 376行目付近
add_image_size( 'size2', 500, 347, true );//記事一覧で利用
↓ 今回は正方形にしたいので、「347」を「500」に変更します。
add_image_size( 'size2', 500, 500, true );//記事一覧で利用
2.「Regenerate Thumbnails」プラグインでサムネイル用画像を再生成する
既にアップロードされた画像については、「500px × 347px」でサムネイル用画像が生成されています。1. の変更を反映させるために、Regenerate Thumbnailsプラグインを使ってサムネイル画像を再生成します。
詳しい使用方法はTCD公式サイト内の以下の記事で解説しています。
WordPressのサムネイル画像を一括で再生成できるプラグイン「Regenerate Thumbnails」
補足「size2」の画像サイズを変更するのではなく、トリミング処理の箇所でフルサイズ画像を読み込ませることでも実現自体は可能です。
参考記事）TCDテーマORION：特別ページでヘッダー画像をフルサイズで表示させる方法
ですが、特にブログ一覧ページではフルサイズ画像を多く読み込ませることになるため、画像や通信環境によってはページの読み込みに時間がかかることも考えられます。当記事で紹介している方法にてまずはお試し頂けますと幸いです。
参考記事）TCDテーマORION：特別ページでヘッダー画像をフルサイズで表示させる方法
ですが、特にブログ一覧ページではフルサイズ画像を多く読み込ませることになるため、画像や通信環境によってはページの読み込みに時間がかかることも考えられます。当記事で紹介している方法にてまずはお試し頂けますと幸いです。
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！