サムネール画像（アイキャッチ画像）のサイズを左右200ピクセルに統一できました（カテゴリ一覧ページの表示）

2023.07.03
この記事は約4分で読めます。

サムネール画像（アイキャッチ画像）カテゴリ記事一覧ページに表示されるサムネール画像（アイキャッチ画像）のサイズを左右200ピクセルに統一できないかどうかについて調べています。
現在の当サイトはワードプレス（WordPress）で構築しており利用テーマがCocoon（コクーン）です。個別の投稿記事では、サムネール画像を手動で左右200ピクセル（200×150）のサイズにて作成して表示しています。これはワードプレスで運用する前は長年ムーバブルタイプ（Movable Type）で運用してきたこととも関係あります。過去の記事数が多いので今更仕様を大きく変えたくありません。

サムネール画像（アイキャッチ画像）のサイズ

カテゴリ一覧ページでのサムネール画像

当サイトはテーマをコクーンにして、ほぼデフォルトのまま利用しています。サムネール画像表示で気になるのは、カテゴリページで表示される画像サイズが200ピクセルより大きくなってしまうことで、バランスが悪いことと画質が悪くなってしますことです。

▼現状のカテゴリ一覧のページ

ワードプレスのメディア設定

そもそものワードプレスのメディア設定はサムネイルのサイズを、幅200ピクセル、高さ150ピクセルにしています。

利用テーマCocoon（コクーン）のサムネイル画像の設定

コクーンではサムネール画像のサイズをピクセルで設定することはできないようです。

サムネイル画像の設定画面では、「３：４」という設定ができるだけです。

ショートコードで新着記事一覧を表示

当サイトでは最新記事一覧を表示するページをhttps://www.dm2.co.jp/tohdamikio
にしています。

このページでは以下のように２つのショートコードを設定しています。

▼最新30件（Shortcodes Ultimateを利用）
［su_posts template=”templates/default-loop.php” posts_per_page=”30″ order=”desc”]

▼人気の記事５件（コクーンのショートコードを利用）
［popular_list days=”all” rank=”0″ pv=”0″ count=”5″ type=”default” cats=”all” thumbnail_width=”200″] ※thumbnail_width=”200″という属性を追加してみましたが効果ありません（笑）

この２つのショートコードは、最新30件のほうは「Shortcodes Ultimate」というプラグインで生成したショートコードを利用しており、人気の記事５件のほうは「コクーン」の標準で用意されているショートコードを利用しています。

もし、カテゴリページのサムネール画像のサイズ統一ができないのなら、このショートコードで表示されるサムネール画像を200ピクセルに統一する方法がないかについても探ってみたいと思います。

コクーンのフォーラムに質問してみました

「カテゴリ一覧に表示するサムネール画像のサイズを変更する方法」については、コクーン作者のサイトにフォーラムがあるので調べました。

どうも希望する機能や情報がなさそうだったので質問してみました。

カテゴリ一覧で表示するアイキャッチ画像サイズを左右200ピクセルにしたい
コクーンいいですね。使い始めてからまだ半年くらいですがすっかり馴染んできました。コクーンはとても使いやすくていいテーマだと思います。さて、カテゴリ一覧で表示するさいのサムネール画像（アイキャッチ画像）ですが、コクーンの標準だとかなり大きな画像になります。▼当サイトのカテゴリ一覧の例当サイトはもともと...
wp-cocoon.com

どのような反応があるか楽しみです。

解決しました

なんと、関係者の方からすばやい回答がありました。

そのとおりの指示を実施したら、カテゴリ一覧のサムネール画像が左右200ピクセルになりました。ありがたいです。感謝感激。

ペコリ m(__)m

ワードプレスのダッシュボードのメニューから、外観→カスタマイズを選択し「追加CSS」の画面に移動します。

「追加CSS」 に上記のCSSをコピペで貼り付けます。

これで当サイトのカテゴリ一覧で表示されるサムネール画像は左右200ピクセルに統一できました。

追加したCSS

設定した追加CSSは以下のとおりです。

.category .entry-card-thumb {
width: min(38%, 200px);
}

.category .entry-card-content {
margin: 0;
}

これでカテゴリページのサムネール画像が左右200ピクセルに統一されました。うまくいってよかったです。

なお、検索結果画面の表示もサムネール画像を左右200ピクセルにできました。
その追加CSSは

.search .entry-card-thumb {
width: min(38%, 200px);
}

.search .entry-card-content {
margin: 0;
}

です。