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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

アイキャッチ画像の設定方法が知りたい場合は、下の記事をご覧ください。

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

目次

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

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

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

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

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

次は高さについて、

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

なぜなら、

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

からです。

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

幅1200×9÷16=675px

になります。

かめコンパス

当ブログのアイキャッチ画像のサイズも幅1200×高さ675pxにしているよ!

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

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

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

Canvaを使う

Canvaでは画像のサイズを

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

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

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

WordPress管理画面から行う

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

STEP

WordPress管理画面で、メディアライブラリの順にクリックする

「メディア」、「ライブラリ」がある場所
STEP

アイキャッチにしたい画像をクリックする

アイキャッチにしたい画像をクリックしている様子
STEP

画像を編集をクリックする

「画像を編集」がある場所

画像のサイズを覚えておいてください。

STEP
  1. 切り抜きをクリックし、「縦横比」に変更したいサイズのアスペクト比を入力する
  2. 切り抜きたい部分に画像を移動させ、切り抜きを適応をクリックする
画像のアスペクト比を変更している様子
STEP

編集を保存をクリックする

「編集を保存」がある場所

画像の高さが変更されます。

STEP

画像を編集をクリックする

「画像を編集」がある場所
STEP
  1. 伸縮をクリックし、「新規サイズ」に変更したいをサイズ入力する
  2. 伸縮をクリックする
画像のサイズを変更している様子
STEP

画像のサイズを変更できた!

画像のサイズを変更できた様子

画像の幅も変更されます。

画像のサイズが変更できたことを確認している様子

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

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

  • 画像が設定した縦横比率になっていない
  • 画像が自動で切り抜かれる設定をしている

2つが考えられます。

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

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

画像が切れる場合と切れない場合の縦横比率の違い

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

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

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

STEP

WordPress管理画面で、Cocoon設定画像の順にクリックする

「Cocoon設定」、「画像」がある場所
STEP

「サムネイル画像」内で画像の縦横比率と同じになるように設定する

「サムネイル画像」内で画像の縦横比率と同じになるように設定している様子

アイキャッチ画像の推奨サイズである幅1200×高さ675px(=16:9)になっていれば、設定は16:9にする。

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

アイキャッチ画像と設定の縦横比率が同じになった!

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

自動で切り抜かれる設定をしている場合の画像サイズの変化の様子

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

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

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

STEP

WordPress管理画面で、設定メディアの順にクリックする

「設定」、「メディア」がある場所
STEP

サムネイルを実寸法に切り抜くの✔を外す

「サムネイルを実寸法に切り抜く」がある場所
STEP

変更を保存をクリックする

「変更を保存」がある場所

画像が自動で切り抜かれる設定をOFFにできた!

まとめ

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでアイキャッチ画像を推奨サイズに変更する方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次