ブログ

【WordPress】アイキャッチ画像サイズ(高さ)を変更して揃える方法

【WordPress】アイキャッチ画像サイズ(高さ)を変更して揃える方法

悩み

WordPressブログを始めたけど、アイキャッチ画像のサイズを揃える方法がわからない。アイキャッチ画像のサイズを統一したい。

こんな悩みに答えます。

アイキャッチ画像とは、その名のとおり読者の目(Eye)をひきつける(Catch)ための画像のことです。

たとえば、ブログのトップページや各記事のタイトル下に表示される画像で、その記事の顔とも言える存在です。

アイキャッチ画像のサイズを適当に設定していると、ブログのトップページに統一感がなく、読者にダサい印象をあたえてしまいます。

ブログを始めたての頃は、アイキャッチ画像のサイズなんて気にしていなかったので、見栄えの悪いブログでした。

そこで本記事では、プラグインを使わずにアイキャッチ画像のサイズ(高さ)を揃える方法を解説します。

この記事を読めば、ブログ初心者さんでも簡単にアイキャッチ画像のサイズを整えることができますよ。

※まだWordPressブログを開設していない方は、【2022年】WordPressブログの始め方を初心者にもわかりやすく解説をどうぞ。

【WordPress】アイキャッチ画像の最適なサイズとは?

【WordPress】アイキャッチ画像の最適なサイズとは?

アイキャッチ画像の最適なサイズは、Googleの推奨しているサイズがあります。

また、使っているWordPressテーマによっても変わってきます。

Googleの推奨サイズ

Googleが推奨しているサイズは、画像の横幅が「1,200ピクセル以上」です。

また、推奨している画像のアスペクト比(縦横比)は「16:9、4:3、1:1」の3つです。

Googleの推奨サイズ

引用:Google検索セントラル「構造化データタイプの定義」

WordPressテーマの推奨サイズ|JIN

使っているWordPressテーマによって、アイキャッチ画像の最適なサイズは違います。

わたしが使用しているWordPressテーマ「JIN」は、アップロードした画像を自動で「16:9」の比率になるようにトリミングしてくれます。

そのため、横幅が760px以上の画像をいれると綺麗に入ります。(縦は自動で切り取られる)

詳しくは、JIN公式サイトの「アイキャッチ画像の大きさはどれくらいが最適?」をご覧ください。

各テーマの推奨アイキャッチ画像サイズは、公式サイトに記載があると思うので、そちらを参考にしてください。

WordPressテーマによって、最適なサイズが異なるので1度確認しておくことをおすすめします。

【WordPress】アイキャッチ画像サイズ(高さ)を揃える方法

つぎに、アイキャッチ画像のサイズを揃える方法3つを解説していきます。

縦横比を設定してサイズ変更する

記事投稿画面から、アップロードした画像を編集していきます。

アイキャッチ画像のサイズ変更方法

メディアライブラリの中から、編集したい画像を選んで「画像を編集」をクリックします。

アイキャッチ画像サイズ(高さ)を揃える方法

「画像を編集」画面が表示されたら、左上の「切り抜き」をクリックします。

アイキャッチ画像サイズ(高さ)を揃える方法

そしたら、縦横比を「16:9」に設定します。(縦横比は、自由に設定してください)

アイキャッチ画像サイズ(高さ)を揃える方法

縦横比を指定すると、上記のように切り取り範囲が指定されます。

お好みの位置に調整したら、「切り抜き→保存」をクリックして完了です。

画像を切り抜いてサイズ変更する

アップロードした画像を切り抜きして、自由にサイズ変更することができます。

アイキャッチ画像のサイズ変更方法

メディアライブラリの中から、編集したい画像を選んで「画像を編集」をクリックします。

「画像を編集」画面が表示されたら、左上の「切り抜き」をクリックします。

アイキャッチ画像サイズ(高さ)を揃える方法

お好みのサイズに調整したら、「切り抜き→保存」をクリックして完了です。

メディアからサイズ変更する

WordPressに画像をアップロードしたときに、自動で3種類の画像が作られます。

そのため、余計な容量を使っているので設定を変更していきます。

まず、WordPressの管理画面から、「設定→メディア」をクリックします。

画像サイズ変更方法

画像サイズ」の種類を以下3つから設定できます。

  1. サムネイルのサイズ
  2. 中サイズ
  3. 大サイズ

①を好きな数値に変更して、②と③を「0」にして、「変更を保存」をクリックしましょう。

以上で、画像をアップロードしても1種類の画像だけの容量になります。

【WordPress】アイキャッチ画像のサイズ変更におすすめのツール

さいごに、アイキャッチ画像のサイズ変更におすすめのツールを紹介していきます。

  • Optimizilla|画像圧縮
  • BULK Resize Photos|画像リサイズ
  • EWWW Image Optimizer|プラグイン

ひとつずつ解説します。

Optimizilla|画像圧縮

Optimizilla

Optimizillaは、無料で画像を圧縮することができるWebサイトです。

使い方は簡単でドラッグ&ドロップするだけです。

BULK Resize Photos|画像リサイズ

BULK Resize Photos

BULK Resize Photosは、無料で画像をリサイズすることができるWebサイトです。

大きすぎる画像ファイルは、あらかじめリサイズしてサイズを整えて上げましょう。

こちらも使い方は簡単で、ドラッグ&ドロップするだけです。

どちらも無料なので、ぜひブックマークして使ってみてください。

WordPressに画像をアップロードする前に、画像の圧縮・リサイズすることをおすすめします。

ブログに最適な画像容量・サイズと圧縮方法をわかりやすく解説
ブログに最適な画像容量・サイズと圧縮方法をわかりやすく解説本記事では、ブログに最適な画像容量・サイズと、圧縮方法についてわかりやすく解説しています。この記事を読めば、画像を最適化して読者に優しいブログ運営ができますよ。...

EWWW Image Optimizer|プラグイン

EWWW Image Optimizer

EWWW Image Optimizerとは、画像を劣化させることなく圧縮してくれるプラグインです。

新しい画像をWordPressにアップロードしたとき、自動圧縮してくれるだけでなく、すでにアップロードした画像も一括圧縮できるので便利です。

画像をアップロードする前にリサイズ・圧縮して、WordPress内でも圧縮することで、さらに画像ファイルを小さくすることができます。

やりすぎと思うかもしれませんが、記事を書いていけば画像も必然的に増えていきます。

サイトの表示速度はSEOに影響するのでめんどくさいと思いますが、丁寧にやっていきましょう。

後から直すのはかなり大変なので、さいしょから意識してみてください。

EWWW Image Optimizerの使い方は、【画像圧縮プラグイン】EWWW Image Optimizerの設定方法・使い方をどうぞ。

まとめ:アイキャッチ画像のサイズは統一しよう!

まとめ:アイキャッチ画像のサイズは統一しよう!

今回は、アイキャッチ画像のサイズを揃える方法についてまとめました。

アイキャッチ画像のサイズがバラバラだと、読者の目につくので、画像サイズを統一しましょう。

ブログを始めたばかりだと、やることが多くて大変だと思いますが、作業自体は簡単なのでやってみてください。

また、ブログのアイキャッチ画像を、自分でオシャレに作りたいという方には、Canvaがおすすめです。

無料で使えるので、ぜひオリジナルのアイキャッチを作ってみてください。

今回は以上です。

デザインで生産性を向上