ブログ開設&設定&操作

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?
めいた
めいた
ワードプレスでブログ始めたんだけど、アイキャッチ画像のサイズ変更のやり方がわからない・・・

そんな方向けに、ワードプレスでアイキャッチ画像のサイズ変更をするやり方をご紹介します。

めっちゃ簡単です!

また、おすすめのアイキャッチ画像の大きさがあるので、しっかり設定しておきましょう!

ワードプレスのアイキャッチ画像サイズは、シンプルのようで奥が深い。

アイキャッチ画像のサイズ変更と言っても、縦横比の割合とかもあるので!

今回はそこまで深いところを、かなり噛み砕いて簡単にお話しますね。

カズマ
カズマ
こんにちは、カズマです。

僕は副業でブログをスタートして、現在は家族との時間を大切にしながら在宅で自由にビジネスをしています。

僕がいまのような家族中心の生活を手に入れた方法を、期間未定で特別に公開しています。

是非一度、見てみてくださいね。

 

ワードプレスでアイキャッチ画像のサイズ変更のやり方

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

ワードプレスでアイキャッチ画像のサイズ変更をするやり方は3つ。

  1. 「アイキャッチ画像の設定」でのサイズ変更
  2. 「画像の切り抜き」でのサイズ変更
  3. 「メディア」の設定でのサイズ変更

あとはやっておきたい設定がもう1つあるのでご説明します。

 

アイキャッチ画像を設定でサイズ変更するやり方

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

ワードプレスの右側「アイキャッチ画像」にある画像をクリックします。

 

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

「添付ファイルの詳細」から「画像を編集」をクリック。

 

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

「新規サイズ」の左枠が画像横のピクセル数、右枠が画像縦のピクセル数です。

横もしくは縦のどちらかのピクセル数を変更することで、アイキャッチ画像のサイズ変更ができます。

超簡単ですね!

※どちらか一方の数字を変更することで、もう一方が自動でサイズ変更されます。

アイキャッチ画像のサイズ変更をしたら「縮尺変更」のボタンをクリックして完了です。

 

画像の切り抜きでアイキャッチ画像のサイズ変更をする

アップロードした画像をワードプレスの中で「切り抜き」してサイズ変更もできます。

ワードプレスの機能でこれができちゃうのは便利ですね!

先ほどと同様、アイキャッチ画像から「画像を編集」をクリック。

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

左上にある「切り抜き」をクリック。

 

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

アイキャッチ画像の必要な部分だけを選択して、「保存」をクリックすることでサイズ変更が完了!

これまた簡単です♪

 

僕がお勧めのメディアからサイズ変更する設定のやり方

続いて、メディアを使ったおすすめのサイズ変更のやり方を解説します。

ワードプレスは画像を読み込ませた時、3つの画像に勝手にサイズ変更されるようになっています。

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

「設定」の中から「メディア」を選択。

 

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

画像サイズの種類は、

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

の3種類があります。

これ、実はワードプレスに画像をアップロードした際に自動的に3種類の画像が勝手に作られるんですね。

で、知らぬ間に3種類の画像を作られるので、その分画像容量を使います。

これって、もったいないですよね!?!?

なので!

①のサムネイルのサイズだけ数字を設定したら、②と③は全て0を推奨します。

あとは「変更を保存」して完了です。

 

ワードプレスでサイズ変更する前にやっておきたいこと

僕はアイキャッチ画像のサイズ変更をワードプレスで行う手間を防ぐために、毎回統一の画像サイズでワードプレスに読み込ませています。

横:680 px × 縦:380 px

このサイズで常にアイキャッチ画像を読み込ませると、わざわざワードプレスでサイズ変更する手間がなくなるのでおすすめですよ!

少しでも手間を省くことで、記事を書くスピードがアップしますよ!

 

アイキャッチ画像はCanvaというWebサービスを使って作ってます♪

基本な機能は無料で使えちゃうので、初心者の方でも安心して使えますよ!

Canvaを使ってワードプレスのアイキャッチ画像をぜひ作ってみてください。

Canvaを使ったアイキャッチの作り方についてはこちらから>>

 

ワードプレスのアイキャッチ画像のおすすめの大きさ

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

続いてはアイキャッチ画像のおすすめの大きさをご説明します。

これ、初心者の方は結構惑わされるところ。

というのもGoogleの推奨サイズと、世間のブロガーが使用しているサイズが全然違うからです。笑

 

Googleの推奨サイズ

Googleが推奨しているサイズは、

画像の横幅は1,200 px 以上

と正式に公言しています。

「Google検索セントラル」というサイトの上級者SEOの中に、「記事」というページがあります。

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

また、推奨する画像のアスペクト比(縦横比)は,

横:縦 = 16:9、4:3、1:1

この3種類です。

僕はアイキャッチ画像は全て16:9で作ってますよ!

 

僕の推奨サイズ

横:680 px × 縦:380 px

僕はこのサイズでいつも画像を作っています。

めいた
めいた
え?Googleの推奨じゃないの?

そうなんです。

なんで!?って思われるかもしれませんが。笑

 

ただ実際に、有名なブロガーや例えばSEOで有名なバズ部さんの記事はGoogleの推奨サイズの画像にはなっていません。

なぜか???

Googleの推奨サイズ(横1,200 px以上)は画像容量が大きいからです。

容量が大きい画像を記事に多用すると、読み込み速度がめっちゃ遅くなります。

読み込み速度が遅いと、Googleの評価が落ちてしまうんですね。

なんだか矛盾しているようですが、実際に有名なサイトやブログがGoogleの推奨サイズじゃないんですよ!

今どきスマホを使って見る人がほとんどなので、横1,200px以上もいらないのが現実!

横680pxもあればスマホで十分に綺麗に表示されます。

 

縦横比はテーマによって変わる

アイキャッチ画像の横縦比は、テーマによって変わります。

僕の使っているブログテーマ「JIN」は16:9のアイキャッチ画像を使うとぴったんこです!

記事内に入れる画像も全部16:9が多いですね。

使っているテーマでアイキャッチ画像にキレイに収まる大きさは変わってくるので、一度確認してみてください。

何度も繰り返しますが、Canvaで最初から680×380pxの画像サイズで作っておけば問題なしです。

 

ワードプレスのアイキャッチ画像のサイズ変更におすすめなツール

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

最後に、アイキャッチ画像のサイズ変更におすすめなツール(プラグイン)を3つご紹介します。

ワードプレスの画像サイズは見た目の問題もありますが、SEOにも大きく影響します。

そこを考慮して、ツールも上手く使いこなしましょう!

 

TinyPNG画像圧縮

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

TinyPNGは画像の容量を圧縮するサイト。

圧縮する方法は超簡単!

画像をドラッグするだけです。

シンプル!!!

最初の画像より容量が小さくなった画像をそのままダウンロードできるので、ワードプレスに入れる前に圧縮するのがおすすめ。

無料で使えるので、是非ブックマークして使い倒しましょう!!!

 

BJ Lazy Load

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

ワードプレスのプラグインBJ Lazy Loadは「画像を意図的に後から読み込ませる」プラグイン。

Googleは画像の読み込み速度を重要視していて、記事のランキングを決める1要素にしています。

このプラグインはまずページ(テキスト)を先に読み込ませ、読み込みの遅い画像を後から送らせて表示することで違和感なくページを読み込ませます。

Googleだけでなく、検索者も開くのが遅いサイトは超ストレス!

実は離脱の原因にもなってしまうんですね。

そのストレスを少しでも減らしてあげると、ユーザービリティが向上してGoogleの評価も良くなります。

もちろん、Googleでなく検索者のとってもメリットになるのでぜひやっておきましょう!

 

EWWW Image Optimizer

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

3つ目はEWWW Image Optimizer。

このプラグインは画像をワードプレスにアップロードした際、自動的に画像を圧縮してくれます。

先ほどご紹介したTinyPNGで圧縮した画像を、さらにこのプラグインで圧縮する。

そんなにやる必要あるの?笑

と思われるかもしれませんが、画像はそれほどページ表示速度に影響を及ぼす原因になります。

このプラグインも多くのブロガーが必ずと言っていいほど入れてるので、おすすめ!

アイキャッチ画像のサイズ変更というより、ワードプレスで使う画像についての話になりましたがぜひやっておきましょう♪

 

ワードプレスでアイキャッチ画像のサイズ変更するやり方:まとめ

ワードプレスでアイキャッチ画像のサイズ変更のやり方!おすすめの大きさは?

ここまで、ワードプレスでアイキャッチ画像のサイズ変更をするやり方や、おすすめの大きさ設定について解説してきました。

アイキャッチ画像のサイズ変更のやり方は3つ。

  1. 「アイキャッチ画像の設定」でのサイズ変更
  2. 「画像の切り抜き」でのサイズ変更
  3. 「メディア」の設定でのサイズ変更

どれも非常に簡単なので覚えましょう!

特に③のメディア設定はやっておくと、画像を入れる際に手間が省けるのでおすすめ。

ワードプレスのアイキャッチ画像、記事に入れる画像はサイズだけでなくその容量の大きさも重要です。

できるだけ小さく、だけど画像がキレイなままで表示できる680×380pxはぜひともマネしてみてくださいね!

新しい働き方を今、あなたの手の中に

※1:登録直後に自動返信メール1通目似て登録者限定の特典をお届けしています。
※2:お預かりしたメールアドレスなどのプライバシー情報は当サイトのプライバシーポリシーに則り厳守します。
※3:メール最下部の解除リンクからいつでも登録を解除できます。

\1年後を変えるなら、いま!/
知識0経験0文章力0でも、初年度で年収100万円UPする方法。
無料特典を受け取る
\1年後を変えるなら、いま!/
知識0経験0文章力0でも、初年度で年収100万円UPする方法。
無料特典を受け取る