WordPress Cocoonでカルーセルのサムネイル縦サイズを揃える方法

WordPressのCocoonテーマを使っている方へ。

カルーセルに表示されるサムネイル画像の縦サイズが不揃いで困っていませんか？

この記事では、画像サイズの調整方法とおすすめの比率をわかりやすく解説します。

サムネイル縦サイズが不揃いな原因

17個目の記事を公開した後いつものように、トップページの「新着記事」に記事が表示されていることを確認していました。

この時、カルーセルのサムネサイズが不揃いであることに気が付いたのです。

「新着記事」も見たところ、こちらもやはり縦幅が揃っていませんでした。
サムネが横並びになるカルーセルほどはっきりとは分からないものの、揃っていません。

解決するまで結局、半日も費やしました・・。

解決法は単純で、アイキャッチ画像のサイズは1,280×800ピクセル以上のものを指定することでした。

問題のそもそもの原因は、アイキャッチ画像のサイズが小さすぎたことにありました。

試した対応方法と結果

Regenerate Thumbnails」で”アイキャッチ画像からのみサムネイルを再生成”（効果なし）

”cocoon サムネイル サイズ 統一” と検索したところ、Cocoonのマニュアルより、プラグインの「Regenerate Thumbnails」でサムネイルサイズを再生成すると、画像のサイズが揃うらしいことが分かりました。

さっそく再生成してみます。

WordPress管理画面から「ツール」-「Regenerate Thumbnails」を選択します。

いま問題になっているのはアイキャッチ画像なので、「アイキャッチ画像からのみサムネイルを再生成」を押します。

処理が始まります。

1分以内で終了しました。

カルーセルの表示を確認します。
残念ながら効果はありませんでした。

解決のヒントを見落としていた

なお、先ほどのマニュアルを最後まで読むと、このような記述があります。

小さなアイキャッチが設定されている場合は再生成されないので注意

アイキャッチに、設定サイズよりも小さな画像が選択されている場合（例えば320x180pxで設定されているのに300x160pxの画像だった場合）は、画像が再生成されません。

なるべくアイキャッチには、大きな画像を設定しておくことをおすすめします。少なくとも、横幅800px、できるならば横幅1280px以上の画像を設定することをお勧めします。

わいひら「Wordpress無料テーマ Cocoon」https://wp-cocoon.com/regenerate-thumbnails/（2022年5月23日）

「Regenerate Thumbnails」で”添付ファイルすべてからサムネイルを再生成”（効果なし）

次は”すべての添付ファイルから再生成”を試みます。

マニュアルでは事前にWordpressのバックアップを取ることが推奨されていました。

なお、バックアップ後、バックアップファイルをパソコンにダウンロードする過程で、筆者は地獄を見ました・・。

「添付ファイルすべてからサムネイルを再生成」を押します。

処理にだいぶ時間が掛かります。
筆者の場合は445件の再生成で1時間くらい待ちました。

カルーセルの表示を確認します。
これまた残念ながら効果はありませんでした。

もう泣きそうです。

手作業で画像サイズ調整（効果あり）

今振り返ってみると、本当にこの考えに至ってよかったなと心から安心しています。
そうでなければまだ迷路の中にいたかもしれません。

写真のサイズを比較してみた

縦幅が長くなってしまっているものとそうでないもので、写真のサイズを比較してみました。
縦幅が長いものは横510 x 縦340 ピクセル、そうでないものは横604 x 縦340 ピクセルでした。

この縦横比（アスペクト比）をよく観察してみたところ、画像の縦幅が長くなっているほうは2：1ではないのに対して、画像の縦幅が長くなっていないほうはだいたい2：1であることに気が付きました。

そのため、縦横比を2：1に統一すれば画像の縦幅が揃うのでは？と考え、アイキャッチ画像を編集してみることにしました。

画像編集の具体的手順

アイキャッチ画像を編集したい投稿ページを開き、右側のアイキャッチ画像をクリックします。

右側の「画像を編集」ボタンを押します。

「画像を編集」画面が表示されます。

「画像縮尺の変更」欄を操作（効果なし）

最初は、「画像縮尺の変更」欄をいじってみました。

510 x 340を、604 x 340に変更してしまえば手っ取り早いのではないかと思いました。

”510”を”604”に変更したところ、後ろの数字が自動で”403”となり、直後の欄外に赤字で”！”が表示されました。

その状態で「縮尺変更」ボタンを押すと、画面は更新されたかのように見えましたが、数字は510 x 340のままでした。

「画面縮尺の変更」と表示されている隣に”？”マークがあったのでクリックすると、ちゃんと注意書きがありました。

「画像のトリミング」欄を操作（効果あり）

「画像縮尺の変更」はうまくいかなかったので、次は「画像のトリミング」欄をいじってみました。

こちらは効果がありました！
そしてようやくカルーセルに表示される画像サイズが整いました。

ここまで来るのに本当に半日掛ったので、きれいに表示された瞬間は本当にすーっと胸がすく思いでした。

画像サイズの目安と注意点

削れる部分が画像上下に多い場合

削れる部分が画像の上下に多い場合は、「縦横比」欄に”2：1”と入力してから画像上で範囲選択すると、自動で2：1の枠が表示されます。

任意の場所に移動してから「切り抜き」ボタン、「保存」ボタンを押すと、画像が保存されます。

削れる部分が画像上下に少ない場合

一方で、削れる部分が画像上下に少なく、自分で細かく調整したい場合はこちらの手順で行います。

画像上で範囲選択すると、「選択範囲」欄に数字が表示されるので、自分の希望する数字（今回の場合はだいたい2：1の比率の数字）になるように調整します。

任意の範囲を選択してから「切り抜き」ボタン、「保存」ボタンを押すと、画像が保存されます。

カルーセルの表示を確認します。

ようやく縦幅が揃いました！！
長かったです。。

表示確認と改善の効果

「新着記事」も見てみます。

こちらもそんなに差はないように見えます。
よく見ると違うのかもしれないけれど、ぱっと見は分かりません。

まとめ：今後の画像選びのポイント

このように、Cocoonテーマのカルーセル表示では、アイキャッチ画像の縦横比が統一されていないと、サムネイルの縦サイズが不揃いになります。

画像編集画面で『トリミング』を使い、縦横比を2:1に設定することで、カルーセル表示が整いました。

しかしそもそもの前提として、アイキャッチに使用する画像のサイズは、1,280×800ピクセル以上のものを指定しなければいけない！と強く認識しました。