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

Cocoonアイキャッチ画像サイズ統一化 Cocoon

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

  • アイキャッチ画像を統一する方法がわからない
  • アイキャッチ画像の最適なサイズがわからない
  • アイキャッチ画像をどうやって作ればいいかわからない

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

▼アイキャッチ画像が統一されてない▼
アイキャッチがバラバラの図

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

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

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

ではアイキャッチ画像の統一方法から順番に見ていきましょう

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

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

  1. Cocoon設定で画像サイズを設定する
  2. Regenerate Thumbnailsプラグインで画像を整える

なんとたったの2ステップ

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

Cocoon設定の画像

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

▼Cocoon設定→画像▼
Cocoon設定→画像

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

▼全体画像設定で設定する▼
全体画像設定

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

私は約5:8(黄金比)にしています。理由はアドセンス広告となじむから

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

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

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

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

▼縦横比の例▼
縦横比の例

インデックスカード(※)大きなカードタイルカードにはこの比率は適用されないです。Cocoon設定インデックスで下のどれかを選択していないことを確認しましょう。

  • 大きなカード(先頭のみ)
  • 大きなカード
  • タイルカード2列
  • タイルカード3列

※インデックスカード…トップページに並ぶ記事一覧のサムネイル画像+タイトル+記事抜粋のカードのこと

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

Retinaディスプレイにチェック

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

変更をまとめて保存

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

さくさく進めていきましょう

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

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

▼プラグイン→新規追加▼
プラグイン→新規追加

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

▼緑色の画像のプラグインです▼
Regenerate Thumbnaisを今すぐインストール

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

▼有効化をする▼
有効化する

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

▼ツール⇒Regenerate Thumbnails▼
ツール→Regenerate Thumbnails

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

▼上のボタンを押す▼
画像は翻訳されていますが普通は英語表記です
上の青ボタンを押す

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

▼数が多いと1時間くらいかかると思います▼
バーがいっぱいになるまで待つ

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

▼満タンになって終了▼
満タンで終了

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

画像を統一化した後、Cocoon設定→画像でサムネイル画像の比率を変更すると、また画像が揃わなくなることがあります。その時は再度プラグインで画像の再生成をお願いします。

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

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

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

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

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

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

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

  • 最低でも800×800px以上
  • できれば1024×1024px以上は欲しい
  • 推奨は1280×1280px以上

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

▼比率とおすすめ画像サイズ▼
縦横比率最低
800×800以上
できれば
1024×1024以上
推奨
1280×1280
9:16801×14241026×18241287×2288
約5:8約800×1294約1025×1658約1280×2071
2:3800×12001024×15361280×1920
約5:7約800×1131約1025×1449約1280×1809
3:4801×10681026×13681281×1708
1:1800×8001024×10241280×1280
約の部分は小数点切り捨てています

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

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

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

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

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

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

どうやって作ればいいかわからない

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

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

ブロガーはだいたいみんなCanvaつかってますね

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

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

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

  • 最適なアイキャッチサイズがわかって
  • 使える画像素材のありかがわかって
  • アイキャッチ作成に使うツールがわかった

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

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

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

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

▼アイキャッチが検索結果に反映される▼
アイキャッチが反映されている図
▼Twitterにも反映される▼

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

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

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

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

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

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

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

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

Cocoonの使い方

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

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

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

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

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント

  1. cocoonユーザーです!アイキャッチがでかくて困ってましたが
    おかげさまで統一されました!!!
    ありがとうございます

    • まるさん
      この記事を参考にしていただきありがとうございました。
      お役に立てたようでうれしいです!