「アイキャッチ画像の推奨サイズを知りたい」
「アイキャッチ画像のサイズを変更する方法は？」
「アイキャッチ画像が切れる、どうして？」
この記事では、そんな方に向けて、アイキャッチ画像の推奨サイズと画像のサイズを変更する方法をお話しします。
かめコンパスこんにちは、かめコンパスです！
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！
アイキャッチ画像の設定方法が知りたい場合は、下の記事をご覧ください。
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
＼もっと早く乗り換えればよかった…／
使い心地バツグン、高機能でオシャレ！
Cocoonアイキャッチ画像の推奨サイズ
Cocoonでアイキャッチ画像のサイズは、幅1200×高さ675pxに統一することをオススメします。
まず幅について、なぜなら
- 幅1200px以上にすることを推奨している
- 画像の表示速度を遅くなりすぎないようにしたい
ので、幅1200pxちょうどがいいからです。
次は高さについて、
アイキャッチ画像の高さは、アスペクト比(=幅と高さの比率)16:9になるように変更しましょう。
なぜなら、
- 地デジやYouTubeの画面と同じ比率
- なので、普段見慣れている比率で見やすい
からです。
つまり、アイキャッチ画像の高さは
幅1200×9÷16=675px
になります。
かめコンパス当ブログのアイキャッチ画像のサイズも幅1200×高さ675pxにしているよ！
Cocoonアイキャッチ画像のサイズを変更する方法
Cocoonでアイキャッチ画像のサイズを変更する方法は、2つあります。
- Canvaを使う※おすすめ！
- WordPress管理画面から行う
それぞれ詳しく解説します。
Canvaを使う
Canvaでは画像のサイズを
- 拡大/縮小したり
- 自由にカスタマイズしたり
1px単位で変更できます。
Canvaで画像のサイズを変更する方法は、下の記事を参考にしてください。
WordPress管理画面から行う
WordPress管理画面から画像のサイズを変更する方法は、下記の通りです。
WordPress管理画面で、メディア⇒ライブラリの順にクリックする
アイキャッチにしたい画像をクリックする
画像を編集をクリックする
- 切り抜きをクリックし、「縦横比」に変更したいサイズのアスペクト比を入力する
- 切り抜きたい部分に画像を移動させ、切り抜きを適応をクリックする
編集を保存をクリックする
画像の高さが変更されます。
画像を編集をクリックする
- 伸縮をクリックし、「新規サイズ」に変更したいをサイズ入力する
- 伸縮をクリックする
画像のサイズを変更できた！
画像の幅も変更されます。
Cocoonでアイキャッチ画像が切れる原因の対処法
アイキャッチ画像が切れる原因は
- 画像が設定した縦横比率になっていない
- 画像が自動で切り抜かれる設定をしている
の2つが考えられます。
それぞれ詳しく解説します。
設定した縦横比率になっていない
画像の縦横比率が設定した縦横比率と同じになっていないと、アイキャッチ画像が切れる場合があります。
例えば、縦横比率が16:9の画像の場合、設定も16:9にしなければなりません。
縦横比率の設定を変更する方法は、下記の通りです。
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
「サムネイル画像」内で画像の縦横比率と同じになるように設定する
変更をまとめて保存をクリックする
アイキャッチ画像と設定の縦横比率が同じになった！
自動で切り抜かれる設定をしている
画像をアイキャッチの推奨サイズに変更しても切れる場合、画像をWordPressにアップロードする際に自動で切り抜かれるよう設定されている可能性があります。
ですので、画像が自動で切り抜かれる設定をOFFにすれば、切れることはなくなります。
画像が自動で切り抜かれる設定を変更する方法は、下記の通りです。
WordPress管理画面で、設定⇒メディアの順にクリックする
サムネイルを実寸法に切り抜くの✔を外す
変更を保存をクリックする
画像が自動で切り抜かれる設定をOFFにできた！
まとめ
今回は、Cocoonでアイキャッチ画像の推奨サイズと画像のサイズを変更する方法を紹介しました。
当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
コメント