本記事では、プラグインを使わずにアイキャッチ画像のサイズ(高さ)を揃える方法を解説します。
アイキャッチ画像とは、その名のとおり読者の目(Eye)を惹きつける(Catch)ための画像のこと。
例えば、ブログのトップページや各記事のタイトル下に表示され、その記事の顔とも言える存在です。
アイキャッチ画像のサイズを適当に設定していると、トップページに統一感がなく、読者にダサい印象を与えてしまう。
この記事を読めば、ブログ初心者でも簡単にアイキャッチ画像のサイズを整えることができますよ。
※まだブログを開設していない方は、【2023年】WordPressブログの始め方を初心者にもわかりやすく解説をどうぞ。
【WordPress】アイキャッチ画像の最適なサイズとは?
![【WordPress】アイキャッチ画像の最適なサイズとは?](https://www.yasutaroublog.com/wp-content/uploads/2020/10/undraw_Content_re_33px-e1641802593342.png)
アイキャッチ画像の最適なサイズは、Googleの推奨しているサイズがあります。
また、使っているWordPressテーマによっても変わってきます。
Googleの推奨サイズ
Googleが推奨しているサイズは、画像の横幅が「1,200ピクセル以上」です。
![Googleの推奨サイズ](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-14.55.56.jpg)
また、推奨している画像のアスペクト比(縦横比)は「16:9、4:3、1:1」の3つです。
WordPressテーマの推奨サイズ|JIN
アイキャッチ画像の最適なサイズは、使っているWordPressテーマによっても違います。
僕が使用しているWordPressテーマ「JIN」は、アップロードした画像を自動で「16:9」の比率になるようにトリミングしてくれる。
そのため、横幅が760px以上の画像をいれると綺麗に入ります。(縦は自動で切り取られる。)
詳しくは、JIN公式サイトの「アイキャッチ画像の大きさはどれくらいが最適?」をご覧ください。
各テーマが推奨しているアイキャッチ画像サイズは、公式サイトに記載があると思うので、そちらを参考にしてください。
WordPressテーマによって最適なサイズが異なるので、1度確認しておくことをおすすめします。
【WordPress】アイキャッチ画像サイズ(高さ)を揃える方法
続いて、アイキャッチ画像のサイズ(高さ)を揃える方法を3つ解説します。
縦横比を設定してサイズ変更する
記事投稿画面から、アップロードした画像を編集していきます。
メディアライブラリの中から、編集したい画像を選んで「画像を編集」をクリックします。
![アイキャッチ画像のサイズ変更方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.44.43.jpg)
「画像を編集」画面が表示されたら、左上の「切り抜き」をクリックします。
![アイキャッチ画像サイズ(高さ)を揃える方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.49.50.png)
そして、縦横比を「16:9」に設定します。(縦横比は、自由に設定してください。)
![アイキャッチ画像サイズ(高さ)を揃える方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.53.25.png)
縦横比を指定すると切り取り範囲が指定されるので、お好みの位置に調整して「切り抜き→保存」をクリックしたら完了です。
![アイキャッチ画像サイズ(高さ)を揃える方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.57.21.png)
画像を切り抜いてサイズ変更する
アップロードした画像を切り抜いて、自由にサイズ変更していきます。
メディアライブラリの中から、編集したい画像を選んで「画像を編集」をクリックします。
![アイキャッチ画像のサイズ変更方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.44.43.jpg)
「画像を編集」画面が表示されたら、左上の「切り抜き」をクリックします。
![](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-15.49.50.png)
あとは、お好みのサイズに調整して「切り抜き→保存」をクリックしたら完了です。
![アイキャッチ画像サイズ(高さ)を揃える方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-10-16.47.30.png)
メディアからサイズ変更する
WordPressに画像をアップロードすると、自動で3種類の画像が作られます。
そのため、余計な容量を使っている状態なので設定を変更していきます。
まず、WordPressの管理画面から「設定→メディア」をクリックします。
![【WordPress】アイキャッチ画像サイズ(高さ)を揃える方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/2023-01-01-21.22.16.jpg)
「画像サイズ」の種類が3つあり、それぞれ設定します。
- サムネイルのサイズ
- 中サイズ
- 大サイズ
①を好きな数値に変更して、②と③を「0」にしたら「変更を保存」をクリックしてください。
![画像サイズ変更方法](https://www.yasutaroublog.com/wp-content/uploads/2021/08/スクリーンショット-2021-08-29-15.34.43.png)
これで、画像をアップロードしても1種類の画像だけが作成されます。
【WordPress】アイキャッチ画像のサイズ変更におすすめのツール
さいごに、アイキャッチ画像のサイズ変更におすすめのツールを紹介します。
- Optimizilla|画像圧縮
- BULK Resize Photos|画像リサイズ
- EWWW Image Optimizer|プラグイン
1つずつ解説していきます。
Optimizilla|画像圧縮
![Optimizilla](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2021-08-29-16.25.47.jpg)
Optimizillaは、無料で画像を圧縮することができるWebサイトです。
使い方は簡単でドラッグ&ドロップするだけですよ。
BULK Resize Photos|画像リサイズ
![BULK Resize Photos](https://www.yasutaroublog.com/wp-content/uploads/2021/08/スクリーンショット-2021-08-29-16.00.11.png)
BULK Resize Photosは、無料で画像をリサイズすることができるWebサイトです。
大きすぎる画像ファイルは、あらかじめリサイズしてサイズを整えて上げましょう。
どちらも無料なので、ぜひブックマークして使ってみてください。
※WordPressに画像をアップロードする前に、画像の圧縮・リサイズすることをおすすめします。
![ブログに最適な画像サイズ・容量とは?【おすすめの圧縮方法】](https://www.yasutaroublog.com/wp-content/uploads/2021/05/632_generated-1-320x180.jpg)
EWWW Image Optimizer|プラグイン
![EWWW Image Optimizer](https://www.yasutaroublog.com/wp-content/uploads/2020/11/スクリーンショット-2022-01-08-17.21.51.png)
EWWW Image Optimizerは、画像を劣化させることなく圧縮してくれるプラグインです。
新しい画像をWordPressにアップロードしたとき、自動圧縮してくれるだけでなく、すでにアップロードした画像も一括圧縮できるので便利。
画像をアップロードする前にリサイズ・圧縮して、WordPress内でも圧縮することで、さらに画像ファイルを小さくすることができます。
サイトの表示速度はSEOに影響するのでめんどくさいと思いますが、丁寧にやっていきましょう。
後から直すのはかなり大変なので、最初から意識してみてくださいね。
![【2022年】EWWW Image Optimizerの設定方法・使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/08/EWWW-Image-Optimizer-320x180.jpg)
まとめ:アイキャッチ画像のサイズは統一しよう
![まとめ:アイキャッチ画像のサイズは統一しよう](https://www.yasutaroublog.com/wp-content/uploads/2020/10/undraw_online_stats_0g94-1-e1672576403527.png)
今回は、アイキャッチ画像のサイズ(高さ)を揃える方法を解説しました。
アイキャッチ画像のサイズがバラバラだと、読者の目につくので統一しましょう。
ブログを始めたばかりだと、やることが多くて大変だと思いますが、作業自体は簡単なので、ぜひ取り入れてみてください。
ちなみに、ブログのアイキャッチ画像を自分で作りたい方には、Canvaがおすすめです。
無料で使えるので、ぜひオリジナルのおしゃれなアイキャッチを作ってみてください。
その他、ブログ運営に役立つ記事を載せておきますね。
![セルフバック(自己アフィリエイト)の仕組みとやり方を徹底解説](https://www.yasutaroublog.com/wp-content/uploads/2021/06/selfback-e1644152156951-320x180.jpg)
![ブログで使えるおすすめのフリー素材・画像サイト11選【商用利用OK】](https://www.yasutaroublog.com/wp-content/uploads/2021/06/vecteezy_seo-search-engine-optimization-with-graph-and-chart-analysis_-e1647333742296-320x180.jpg)
![【2023年】WordPressおすすめ無料&有料テーマ7選|初心者向け](https://www.yasutaroublog.com/wp-content/uploads/2022/09/1166_generated-e1662021978261-320x180.jpg)
![ブログ運営に必須のおすすめツール11選【収益化を加速させる】](https://www.yasutaroublog.com/wp-content/uploads/2022/09/vecteezy_online-survey-concept-with-people-and-checklist-surveys_-e1662886207625-320x180.jpg)