【Cocoon】アイキャッチ画像の推奨サイズは？統一感のあるブログにしよう【WordPress】

「アイキャッチ画像の推奨サイズを知りたい」

「アイキャッチ画像のサイズを変更する方法は？」

「アイキャッチ画像が切れる、どうして？」

この記事では、そんな方に向けて、アイキャッチ画像の推奨サイズと画像のサイズを変更する方法をお話しします。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

Cocoonアイキャッチ画像の推奨サイズ

Cocoonでアイキャッチ画像のサイズは、幅1200×高さ675pxに統一することをオススメします。

まず幅について、なぜなら

• 幅1200px以上にすることを推奨している
• 画像の表示速度を遅くなりすぎないようにしたい

ので、幅1200pxちょうどがいいからです。

次は高さについて、

アイキャッチ画像の高さは、アスペクト比(=幅と高さの比率)16:9になるように変更しましょう。

なぜなら、

• 地デジやYouTubeの画面と同じ比率
• なので、普段見慣れている比率で見やすい

からです。

つまり、アイキャッチ画像の高さは

幅1200×9÷16=675px

になります。

Cocoonアイキャッチ画像のサイズを変更する方法

Cocoonでアイキャッチ画像のサイズを変更する方法は、2つあります。

それぞれ詳しく解説します。

Canvaを使う

Canvaでは画像のサイズを

• 拡大/縮小したり
• 自由にカスタマイズしたり

1px単位で変更できます。

Canvaで画像のサイズを変更する方法は、下の記事を参考にしてください。

WordPress管理画面から行う

WordPress管理画面から画像のサイズを変更する方法は、下記の通りです。

Cocoonでアイキャッチ画像が切れる原因の対処法

アイキャッチ画像が切れる原因は

の2つが考えられます。

それぞれ詳しく解説します。

設定した縦横比率になっていない

画像の縦横比率が設定した縦横比率と同じになっていないと、アイキャッチ画像が切れる場合があります。

例えば、縦横比率が16:9の画像の場合、設定も16:9にしなければなりません。

縦横比率の設定を変更する方法は、下記の通りです。

自動で切り抜かれる設定をしている

画像をアイキャッチの推奨サイズに変更しても切れる場合、画像をWordPressにアップロードする際に自動で切り抜かれるよう設定されている可能性があります。

ですので、画像が自動で切り抜かれる設定をOFFにすれば、切れることはなくなります。

画像が自動で切り抜かれる設定を変更する方法は、下記の通りです。

まとめ

今回は、Cocoonでアイキャッチ画像の推奨サイズと画像のサイズを変更する方法を紹介しました。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。