【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法

WordPressテーマのCocoonを使っているけど…

なんとなく画像を選び、なんとなく記事を更新していくと新記事一覧が並ぶトップページなんかはバラバラのサイズのアイキャッチが並んでしまうことがあります。

本記事では、そういった悩みに対してどうやったら画像のサイズがそろってきれいに見えるようになるのか、画像をたっぷり使いながら丁寧に解説していきます。

また、現状のアイキャッチ画像が統一されたら、今後の記事では最適なサイズのアイキャッチをどうやって作っていけばいいのか説明します。

あなたのブログもきっと整って美しいアイキャッチ画像を揃えることができるでしょう。

バラバラなアイキャッチを統一する手順確認

まずはザっとこれからやることの手順を確認しましょう。

上の2項目をこなすだけでアイキャッチ画像は揃います。

Cocoon設定の画像

ここから作業に入ります。あなたも一緒にやってみましょう。まずはWordPressの編集画面からCocoon設定→画像です。

スクロールして、2つ目の大項目全体画像設定に注目してください。

サムネイル画像で画像の比率を6種類の中から設定します。デフォルトは9:16です。

あなたもどれか一つ選びましょう。選びやすいように次の項目でそれぞれの比率の画像を並べてみます。

サムネイル画像の縦横比率一覧

Cocoonのサムネイル画像は下の比率に対応しています。あなたにこだわりがないのであれば、デフォルトの9：16か約5：8（黄金比）でいいと思います。

とりあえずよさそうなヤツにして、気に入らなかったらまた変更すれば良いでしょう。

サムネイル画像の比率を選択したら、すぐ下の項目Retinaディスプレイにチェック

一番上までスクロールして変更をまとめて保存しましょう。

これでCocoon設定は終了です。

Regenerate Thumbnailsプラグインで画像の再生成

続いて、プラグインを使ってサムネイル画像をきれいに整えていきます。プラグインを使って画像の再生成を行います。WordPressの編集画面からプラグイン→新規追加までいきましょう。

検索キーワードに「Regenerate　Thumbnails」と入力し、出てきたプラグインを今すぐインストール

インストールが完了したら有効化を忘れずにする

プラグインがインストールできたので、ツールからRegenerate Thumbnailsをクリック

ふたつある青いボタンのうち、上の方を押す。

バーが進みだす。終わるまで待ちましょう。処理中に別の作業をしたり、キャンセルをするのはおかしくなる原因になるのでやめましょう。

バーが最後までいったら終了です。画面が変わったり、完了ボタンを押したりはありません。

これでサムネイル画像の統一化が完了しているはずです。あなたのブログのトップページを確認してみてください。

画像の統一化がうまくいかないとき

もともとのアイキャッチ画像のサイズが小さすぎる場合、プラグインを使って画像を再生成してもうまくサイズの統一化がされないです。

この場合はCocoon設定→画像の全体画像設定より、Retinaディスプレイのチェックをはずしてもう一度Regenerate Thumbnailsプラグインの操作をやってもらうとうまくいくかもしれません。

それでもダメな場合はアイキャッチ画像を新たに作ってアイキャッチを投稿画面で再設定し直すのが現実的な対応になります。

おすすめのアイキャッチ画像サイズ

アイキャッチ画像のサイズって何が正解かよくわからないですよね。そのせいでアイキャッチが統一化できなかったんですもんね。

Cocoon公式をよくよく読んでみると画像サイズについて書いてある部分があります
Cocoon公式テーマのサムネイルをRetinaディスプレイ対応させる方法（スマホで画像がぼやける対策）

ということで、上記の数値とCocoon設定の画像で設定できる比率をまとめて表にしておすすめの画像サイズを確認してみましょう。

縦横比率	最低 800×800以上	できれば 1024×1024以上	推奨 1280×1280
9:16	801×1424	1026×1824	1287×2288
約5:8	約800×1294	約1025×1658	約1280×2071
2:3	800×1200	1024×1536	1280×1920
約5:7	約800×1131	約1025×1449	約1280×1809
3:4	801×1068	1026×1368	1281×1708
1:1	800×800	1024×1024	1280×1280

画像サイズはデカすぎると読み込みに時間がかかりますので、それぞれのサイズのギリギリを狙って、割り切れる数を当てました。

表のサイズでアイキャッチ画像を作っていただければ、今後は見切れたりすることなくピッタリのサムネイルが出来上がります。

私のブログは約5：8の黄金比を設定していて、できればのサイズを採用しています。

新記事のアイキャッチはサイズを統一して作成しよう

フリー素材をダウンロードして、そのままアイキャッチに設定すると比率が合わなくてまたばらばらの感じになってしまいます。

だから今後はアイキャッチは自分でサイズをきれいにトリミングしたり文字入れたりして作る必要がでてきます。

という方もいらっしゃると思いますので、簡単にご説明しておきます。まずブログに使える画像については、下の関連記事に詳しく書きましたのでそちらをご覧ください。
関連記事ブログの画像はどこから選べばいいのか？おすすめのフリー画像素材サイト８選

そして、アイキャッチを編集するツールはCanva Pro が簡単で高機能なのでいいと思います。アプリもあるからスマホからもできるし。

Pro版は月額1,500円かかりますが30日間無料なんでとりあえず使ってみて、で、まあそんなに使わないかなってなったら無料版に切り替えればいいと思います。

せっかくただで30日使えるのにいきなり無料版はちょっともったいないかなって。私はパワポでアイキャッチ作ったりするので、一応リンク貼っときますがあなたのお好みで判断してくださいね。
外部リンク>>Canva Pro

これで1個前の項目と合わせれば、

もうキレイに整ったアイキャッチはすぐそこですね。

なるべく要素は中央に集めたい

アイキャッチ作成の注意点として、できるだけ文字とかアイコンは中央に寄せた方がいいです。

なぜかというとアイキャッチはあなたのブログのほかに、グーグルの検索結果や、Twitterの画面にも反映されます。

良い記事見つけました〜^_^

これを学んで、ブログを見やすくしていくぞ〜🐕‼️https://t.co/JqfrIZSVok

— マルの日常@VYM投資家 (@maruniti_vym) May 1, 2021

それぞれ比率が異なるので、全部を見切れなく表示するのは難しいです。だからせめてアピールしたい部分がわかるように真ん中へもってくるのがいいですね。

サムネイルは揃うとキレイだ

本記事では、【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法

ということで、新着記事一覧などでアイキャッチ画像サイズが統一化できていない問題に直面している人へ向けて、画像の統一化方法を書いてきました。

私の個人的な感想にはなってしまいますが、アイキャッチ画像がきちんとサイズもそろって文字も見切れていないブログは、それだけで印象がとてもいいです。

お！ちゃんとわかってる人のブログだ！初心者じゃないな！って思います。

あなたのブログも脱初心者へ向けて、ぜひアイキャッチ画像サイズの統一化をやってみてください。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ