WordPressテーマのCocoonを使っているけど…
- アイキャッチ画像を統一する方法がわからない
- アイキャッチ画像の最適なサイズがわからない
- アイキャッチ画像をどうやって作ればいいかわからない
なんとなく画像を選び、なんとなく記事を更新していくと新記事一覧が並ぶトップページなんかはバラバラのサイズのアイキャッチが並んでしまうことがあります。
本記事では、そういった悩みに対してどうやったら画像のサイズがそろってきれいに見えるようになるのか、画像をたっぷり使いながら丁寧に解説していきます。
また、現状のアイキャッチ画像が統一されたら、今後の記事では最適なサイズのアイキャッチをどうやって作っていけばいいのか説明します。
あなたのブログもきっと整って美しいアイキャッチ画像を揃えることができるでしょう。
ではアイキャッチ画像の統一方法から順番に見ていきましょう
バラバラなアイキャッチを統一する手順確認
まずはザっとこれからやることの手順を確認しましょう。
- Cocoon設定で画像サイズを設定する
- Regenerate Thumbnailsプラグインで画像を整える
なんとたったの２ステップ
上の2項目をこなすだけでアイキャッチ画像は揃います。
Cocoon設定の画像
ここから作業に入ります。あなたも一緒にやってみましょう。まずはWordPressの編集画面からCocoon設定→画像です。
スクロールして、2つ目の大項目全体画像設定に注目してください。
サムネイル画像で画像の比率を6種類の中から設定します。デフォルトは9:16です。
私は約5:8（黄金比）にしています。理由はアドセンス広告となじむから
あなたもどれか一つ選びましょう。選びやすいように次の項目でそれぞれの比率の画像を並べてみます。
サムネイル画像の縦横比率一覧
Cocoonのサムネイル画像は下の比率に対応しています。あなたにこだわりがないのであれば、デフォルトの9：16か約5：8（黄金比）でいいと思います。
とりあえずよさそうなヤツにして、気に入らなかったらまた変更すれば良いでしょう。
サムネイル画像の比率を選択したら、すぐ下の項目Retinaディスプレイにチェック
一番上までスクロールして変更をまとめて保存しましょう。
これでCocoon設定は終了です。
さくさく進めていきましょう
Regenerate Thumbnailsプラグインで画像の再生成
続いて、プラグインを使ってサムネイル画像をきれいに整えていきます。プラグインを使って画像の再生成を行います。WordPressの編集画面からプラグイン→新規追加までいきましょう。
検索キーワードに「Regenerate Thumbnails」と入力し、出てきたプラグインを今すぐインストール
インストールが完了したら有効化を忘れずにする
プラグインがインストールできたので、ツールからRegenerate Thumbnailsをクリック
ふたつある青いボタンのうち、上の方を押す。
画像は翻訳されていますが普通は英語表記です
バーが進みだす。終わるまで待ちましょう。処理中に別の作業をしたり、キャンセルをするのはおかしくなる原因になるのでやめましょう。
バーが最後までいったら終了です。画面が変わったり、完了ボタンを押したりはありません。
これでサムネイル画像の統一化が完了しているはずです。あなたのブログのトップページを確認してみてください。
画像の統一化がうまくいかないとき
もともとのアイキャッチ画像のサイズが小さすぎる場合、プラグインを使って画像を再生成してもうまくサイズの統一化がされないです。
この場合はCocoon設定→画像の全体画像設定より、Retinaディスプレイのチェックをはずしてもう一度Regenerate Thumbnailsプラグインの操作をやってもらうとうまくいくかもしれません。
それでもダメな場合はアイキャッチ画像を新たに作ってアイキャッチを投稿画面で再設定し直すのが現実的な対応になります。
おすすめのアイキャッチ画像サイズ
アイキャッチ画像のサイズって何が正解かよくわからないですよね。そのせいでアイキャッチが統一化できなかったんですもんね。
Cocoon公式をよくよく読んでみると画像サイズについて書いてある部分があります
Cocoon公式テーマのサムネイルをRetinaディスプレイ対応させる方法（スマホで画像がぼやける対策）
- 最低でも800×800px以上
- できれば1024×1024px以上は欲しい
- 推奨は1280×1280px以上
ということで、上記の数値と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 が簡単で高機能なのでいいと思います。アプリもあるからスマホからもできるし。
ブロガーはだいたいみんなCanvaつかってますね
Pro版は月額1,500円かかりますが30日間無料なんでとりあえず使ってみて、で、まあそんなに使わないかなってなったら無料版に切り替えればいいと思います。
せっかくただで30日使えるのにいきなり無料版はちょっともったいないかなって。私はパワポでアイキャッチ作ったりするので、一応リンク貼っときますがあなたのお好みで判断してくださいね。
外部リンク>>Canva Pro 
これで1個前の項目と合わせれば、
- 最適なアイキャッチサイズがわかって
- 使える画像素材のありかがわかって
- アイキャッチ作成に使うツールがわかった
もうキレイに整ったアイキャッチはすぐそこですね。
なるべく要素は中央に集めたい
アイキャッチ作成の注意点として、できるだけ文字とかアイコンは中央に寄せた方がいいです。
なぜかというとアイキャッチはあなたのブログのほかに、グーグルの検索結果や、Twitterの画面にも反映されます。
それぞれ比率が異なるので、全部を見切れなく表示するのは難しいです。だからせめてアピールしたい部分がわかるように真ん中へもってくるのがいいですね。
サムネイルは揃うとキレイだ
本記事では、【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
ということで、新着記事一覧などでアイキャッチ画像サイズが統一化できていない問題に直面している人へ向けて、画像の統一化方法を書いてきました。
私の個人的な感想にはなってしまいますが、アイキャッチ画像がきちんとサイズもそろって文字も見切れていないブログは、それだけで印象がとてもいいです。
お！ちゃんとわかってる人のブログだ！初心者じゃないな！って思います。
あなたのブログも脱初心者へ向けて、ぜひアイキャッチ画像サイズの統一化をやってみてください。
Cocoon関連記事
本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。
コメント
cocoonユーザーです！アイキャッチがでかくて困ってましたが
おかげさまで統一されました！！！
ありがとうございます
まるさん
この記事を参考にしていただきありがとうございました。
お役に立てたようでうれしいです！