アイキャッチ画像を大きく表示したい。
iPhoneで見るとアイキャッチがぼやけている。
このように画面いっぱいに表示させることができます。
本記事ではCocoonでアイキャッチ画像の推奨サイズや各種設定方法、非表示にする方法まで解説します。
現状のアイキャッチ表示にピンと来ていない方は参考にしてみてください。
・アイキャッチの推奨サイズや画像比率
・Cocoonアイキャッチの各種設定方法
・アイキャッチの非表示設定方法
アイキャッチ画像のサイズはいくつにすればいい？
アイキャッチ画像は1200×630px（1.91:1）が、見切れず画面に大きく表示できるちょうど良いサイズと言われています。
理由として、TwitterやFacebookなどに記事が載った際に見切れる部分が少ないなどが挙げられます。
こちらが、1200×630の画像をアイキャッチに用いた場合です。
比較のため、同じ縮尺の300×157の画像を使うと、以下のようにかなり小さいアイキャッチになります。
アイキャッチをカラム幅に引き伸ばす
上で解説したような小さい画像を使用する時でも、アイキャッチを大きく表示することができます。
Cocoon設定⇨画像から、アイキャッチの表示欄でアイキャッチをカラム幅に引き伸ばすをクリックしてください。
こちらは、300×157のアイキャッチをカラム幅に合わせるように設定したものです。
このように、小さな画像でも1200×630の画像を使ったときのように大きく表示することができます。
しかし、小さい画像を引き伸ばすと、画質が粗くなってしまうので注意してください。
Google砲を狙うなら1200px以上
Google Discover、通称google砲とは、Googleアプリ使用時に、ユーザーの使用履歴などに基づいて興味関心がありそうな最新情報をおすすめとして表示する機能のことです。
Google砲にあたることで、アクセス数が短時間に急増するなどの大きなメリットがあります。
そして、この”Google 砲を受けるには大きい画像（幅1200ピクセル以上）であることが条件”と言われています。
また、高画質の画像であることも重要のようです。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、
max-image-preview:largeの設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。
Google砲を受けやすくするという意味でも、アイキャッチのサイズは1200×630pxが理想と言えるでしょう。
重要な情報は画像中央に記すと良い
検索結果画面やツイート時の表示などでは、アイキャッチ画像の中央部分しか表示されないことも少なくありません。
したがって、以下のように、文字などの重要な情報は真ん中の正方形に収まるようにした方がいいかもしれません。
⇩⇩⇩
もし、事前にツイートしたときの表示を確認したいという場合には、Card Validatorというサイトで確認することができるので、使ってみてください。
Cocoonアイキャッチの各種設定方法
Cocoonのアイキャッチ画像は、Cocoon設定⇨画像から様々な設定を変更することができます。
アイキャッチ画像の中央寄せ
アイキャッチの画像サイズが小さいと、デフォルトの設定では画像が左側に偏ってしまいます。
これを中央に合わせるように設定することができます。
Cocoon設定⇨画像
アイキャッチの中央寄せの項目にチェックを入れてください。
変更を保存し、プレビュー画面で見てみましょう。
このように、画像を中央に持ってくることができます。
キャプションの追加表示
アイキャッチ画像にはキャプションという簡単な説明書きを追加することができます。
以下のように「アイキャッチにキャプションがある場合は表示する」にチェックを入れます。
キャプションはメディアを追加のあと、メディアライブラリ内で追加することができます。
プレビューすると、アイキャッチの右下に、先ほど入力したキャプションが表示されます。
Retinaディスプレイに対応させる
Retinaとは、Apple製品に対応しているディスプレイの種類です。
ピクセル密度がとても高く高画質であることが特徴です。
しかし、Retinaディスプレイにアイキャッチ画像が対応していないと、Retinaディスプレイが搭載されたデバイスで見るときに、ぼやけて見えてしまうことがあります。
Retinaディスプレイへの対応もCocoonではCocoon設定⇨画像から行うことができます。
下にスクロースし、RetinaディスプレイのサムネイルをRetinaディスプレイに対応するにチェックを入れてください。
これだけで完了ですのでとても簡単ですね！
アイキャッチ画像の非表示方法
アイキャッチを表示しないようにする場合は、Cocoon設定⇨画像のアイキャッチの表示の一番上の項目のチェックを外します。
変更を保存し、ホーム画面で見てみましょう。
このようにアイキャッチ画像を設定した記事であっても、表示させないようにすることができます。
アイキャッチではなくすぐに広告を表示させたい場合などに使ってみるといいでしょう。
まとめ
今回は、Cocoonでアイキャッチ画像の推奨サイズや各種設定方法、非表示にする方法まで解説しました。
アイキャッチの画像サイズには1200×630pxを推奨いたします。
このくらいのサイズがあれば、十分にインパクトのあるアイキャッチになりますし、Google砲も受けやすくなります。
Cocoonであれば、Cocoon設定から、画像の引き伸ばし、Retina対応、アイキャッチの非表示まで簡単に設定することができますので、よろしければ参考にしてください。