どうも！たら(@hajimetara)です。
本文の一番上に表示される「アイキャッチ」や記事一覧の「サムネイル画像」。
せっかくアイキャッチを作ったのにサムネイルでカットされて思うように表示されない…ということはありませんか？どんな設定にしたらいいのか、サイズも含めて迷ってしまいますよね。
今回はアイキャッチとサムネイルの設定について書きたいと思います。
アイキャッチ画像の設定方法
アイキャッチとサムネイルって？
アイキャッチは、記事本文の上に表示される画像です。記事の内容がわかるようなイメージ画像や文字を入れた画像にしている方が多いですよね。
サムネイルは、インデックスカード・新着記事・人気記事・関連記事・カルーセルカード・ページ送りナビ・ブログカードに表示される小さめの画像です。アイキャッチ画像を縮小されたものになります。
アイキャッチはTwitterでシェアしたときの画像にもなるので忘れずに設定しておきましょう！
本文上のアイキャッチの表示・非表示
アイキャッチを設定するのはいいけれど「記事の最初に画像が表示されるのはイヤ」という方もいらっしゃると思います。
Cocoon設定→「Cocoon設定」をクリック。
「画像」タブをクリック。
本文画像設定の
アイキャッチの表示の「本文上にアイキャッチを表示する」で表示・非表示の設定ができます。非表示にした場合はチェックを外しましょう。
アイキャッチの便利な設定
Cocoon設定→「Cocoon設定」→「画像」タブの「アイキャッチラベルを表示する」で、カテゴリラベルの表示・非表示が設定できます。
「アイキャッチの中央寄せ」は、本文の幅よりも小さい画像をアイキャッチにして（デフォルトでは左寄せ）に中央寄せにしたい場合に設定します。他ブログからの引っ越しで大きい画像がない方にもおすすめです。
わいひらさんは大きな画像を推奨されています。
出来れば大きな画像を挿入することを推奨いたします。
少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。
「アイキャッチの自動設定」は、アイキャッチを設定していなくても本文中の最初の画像がアイキャッチになる設定です。アイキャッチの設定が面倒な方におすすめ！
アイキャッチ画像のサイズ
Cocoon設定→「Cocoon設定」→「画像」タブの「全体画像設定」
アイキャッチ画像は「サムネイル画像」で設定する縦横比率に合った画像のサイズにします。比率はお好みで。
横幅を1280px以上にする場合の画像サイズ例はこちら。
| 縦横比率 | 画像サイズ |
| 9：16 | 900×1600px |
| 約5：8 | 約1000×1600px |
| 2：3 | 1000×1500px |
| 約5：7 | 約1000×1400px |
| 3：4 | 1200×1600px |
| 1：1 | 1280×1280px |
画像サイズが大きいとどうしても重くなってしまうので、圧縮しておくと安心です。
↑
オンラインで画像圧縮できるサイト
「Retinaディスプレイ」はRetinaディスプレイで表示したときでもキレイに表示される設定なので、チェックしておくといいですね。
Cocoon設定→「Cocoon設定」→「画像」タブの「NO IMAGE設定」は、アイキャッチの設定を忘れたときに便利です。ホームイメージと同じにしておくと違和感がないのでおすすめです。
すべての設定が完了したら
をクリックするのを忘れずに！
