大きさを調べると、アイキャッチ画像の大きさが統一されていないことに気づきました。
特に最初の方で、設定したアイキャッチ画像は大きさがいびつなので修正していこうとおもっています。
もともとアイキャッチ画像の加工については、O-danでダウンロードして、TinyPNGで縮小して、そのままアップするか、
O-danから、Canvaを利用してから、TinyPNGで縮小して、アップしています。
ただしサイズの違いがあるので、最近は、O-danや、Canvaの画像を利用して、Canvaで加工するようにしています。そうすると、アイキャッチ画像の大きさを固定した方が楽なので、大きさを決めることにしました。
Cocoonでの画像設定 サムネイル画像
実際、ネットで調べると、Wordpress管理画面から、左メニューバーのCocoonの設定から「画像」タブを選択して、サムネイル画像を変更することができます。
ただこの比率についての設定なので、変えてしまうと、レイアウトがかなり変わってしまうので、おすすめしません。
どうしても変えたい場合は、サムネイルを変更するプラグインをCocoonの公式でも載せているで、使う必要があります。
Regenerate Thumbnails
このプラグインを利用すると、サムネイル画像を変更することができます。
標準では、サムネイル画像の比率は、9:16(1:1.777)になっています。youtubeが利用しているアスペクト比だそうです。
推奨サイズ
Cocoonの設定は、9:16でしたが、
FacebookのOGPで利用する場合、比率が、1:1.9111で、推奨サイズが、「630×1200」とになります。
Cocoonの幅の推奨が800以上なので、この設定であれば、高さが変わりますが、問題ないようなので、Canvaで使用する際、「630×1200」のサイズで、アイキャッチ画像を作成しています。
当サイトでは、暫定的に「630×1200」のサイズで、設定しています。
アスペクト比率を変えたくない方は、
全てを9：16で統一するには、「450×800」か、「900×1600」で作成すると、バランスが良いです。ただ「450×800」だと画像がぴったりサイズになってしまうので、「900×1600」サイズがいいと思います。それよりも小さいサイズで、「630×1200」に近いサイズだと「630×1120」でもいいかもしれません。
ヘッダー画像のサイズは？
またヘッダー画像は、最近のディスプレイサイズを考えて、横幅1900ピクセル以上の方が、画像がきれいに表示されるみたいです。
1200ピクセルだと、24インチディスプレイで表示すると、画像が粗くなってしまいました。
このヘッダー画像を作成するのも、Canvaがおすすめです。
画像をアップロードして、テキストを入れれば、それなりに見えますし、
アピールエリアを利用して、コメントを追加して表示することもできます。
Canvaは、ipadで作成しても、PCで作成しても、クラウドでデータが保存されているので、1度作ったものは、Canvaの全てのデータに保存されています。
ちょっとデザイン変えたいなど、便利です。
複製もできるので、一度作ったデザインを再利用することができます。
また、O-danや自分の撮った画像をアップロードして、加工することもできます。
有料になりますと、利用できるデザインや写真が格段に増えますので、画像などのサブスクリプションに申し込んでいなければおすすめです。
Canvaより細かい加工がしたい場合は、Photoshopやillustratorなどのソフトを使うと、テンプレート以外のデザインが作成できて、人と違ったデザインが楽しめます。
まだ試していませんが、こちらの本を利用して、ヘッダー画像を作ろうか検討しています。
UdemyでもPhotoshopやillustratorの講座があるのですが、
これといったものが見つかっていないので、いいのがありましたら、紹介させていただきます。
まとめ
今回は、Cocoonのアイキャッチ画像サイズを、FacebookのOGPなどで推奨比率の「1:1.9111」の「630×1200」が暫定的な推奨サイズかと思います。
「9:16」のサイズで統一してもいいので、「900×1600」がおすすめです。「630×1120」でもいいかもしれません。
一度設定すると、変更する際、大変なので、Wordpressをインストールした後に、サイズを決めるの外衣と思います。
コメント