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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoon設定の画像

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

▼Cocoon設定→画像▼

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

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

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

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

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

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

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

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

▼縦横比の例▼

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

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

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

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

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

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

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

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

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

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

検索キーワードに「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の黄金比を設定していて、できればのサイズを採用しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

タイトルとURLをコピーしました