[Cocoon]サムネイル画像の大きさを揃える方法

Cocoonでサムネイル画像のサイズが異なりアンバランスな表示になる

Cocoonテンプレートを使っているときに「ブログカード」タイプの場合にサムネイル画像のサイズが不揃いになる場合があります。

こちらが実際に新着記事で高さがズレてしまっているケースです。

高さが不揃いでカッコ悪いですね。ユーザビリティ的にも良くないため高さは揃えるようにしたいところです。

全ての画像で高さと幅を揃えられれば問題は発生しないでしょう。

ただしフリー素材を使っていたり自前の写真を使ったりと、なかなか全てを揃えるというのは難しいと思います。

※注意
プラグインはアップロード済みの画像を全て再作成します。
事前にバックアップを取得するようにしてください。
また、記事の量が多い場合は時間がかかることが想定されます。

「Regenerate Thumbnails」プラグインを使いたいシーンはこちらです。

手順は2ステップで簡単です。

※事前にバックアップしておきましょう

WordPressの管理画面からプラグインをインストールします。

有効化すると「ツール」メニューに追加されます。

「Regenerate Thumbnail」をクリックします。

どのサムネイルを再作成するかが選択できます。

今回はアイキャッチ画像のサイズを揃えたいため「アイキャッチ画像からのみサムネイルを再作成」ボタンをクリックします。

※アイキャッチ画像は投稿記事に設定する画像です。投稿の右メニューから設定できます。

処理が完了すると完了メッセージとどのサムネイルを再作成したかの結果が表示されます。

件数は20件で26秒で完了したことがわかります。

では実際にブログで確認してみます。

見事にサイズが揃っていることが確認できました！！

素晴らしいですね！

今回はWordPressで画像サイズが不揃いとなってしまうケースをプラグイン「Regenerate Thumbnail」で再作成して揃えるという方法をご紹介しました。

異なるサイズの画像を利用されていて揃えたいという方は是非利用してみてください。