WordPress関連コラム  2020.9.16

初心者向け!ワードプレスの画像サイズ変更する方法をマスターしよう

「ワードプレスの画像サイズが変えられない!」とお悩みですね。

ワードプレスの画像は、簡単にサイズ変更できます

手順を知っておかなければ、「思っていたサイズより小さくなってしまった」と焦ってしまうかもしれません。

今回は、ワードプレスの画像サイズの変更方法や最適な画像サイズについて解説します。

簡単に画像サイズを変更し、思い通りのコンテンツを作りましょう。

まずはワードプレスに画像をアップロードしよう

画像サイズの変更をする前に、ワードプレスの画像をアップロードしましょう。

記事(投稿や固定ページ)に画像を挿入するのであれば、記事の編集画面の左上にある「メディアを追加」をクリックします。

ワードプレスで画像を挿入する方法

「ファイルをアップロード」もしくは「メディアライブラリ」のタブから、メディアを挿入しましょう。

ドラッグ&ドロップでアップロードできます。

ワードプレスのメディア追加方法

画像サイズによって時間がかかりますが、完了すると自動で「メディアライブラリ」に追加されます。

これで画像がワードプレス の中に入り、コンテンツの中に自由に挿入できるようになりました。

ただし、設定をしなければ元のサイズのままです。

次の章で、画像サイズを変更する方法を確認していきましょう。

ワードプレスの画像のサイズ変更の方法

ワードプレスの画像サイズを変えるには、以下の2つの方法があります。

  • 決められた画像サイズの中から選ぶ
  • 自分で決めた画像サイズに変更する

画像のサイズを自由に変更できれば、デザイン性が高まります。

また、画像を見やすくしたりコンテンツに緩急を付けたりできるので、ユーザビリティを向上させることも可能です。

しっかりと画像サイズ変更の方法を確認しましょう。

方法1.決められた画像サイズの中から選ぶ

決められた画像サイズの中から選んで、コンテンツの中に挿入することができます。

画像を選んで挿入する時に、以下の4つのサイズから画像サイズを指定するのです。

  • サムネイル
  • 大サイズ
  • 中サイズ
  • フルサイズ

このようにタブの中から選びましょう。

メディアサイズ変更

画像サイズを変えたのに「小さいサイズで挿入してしまう」という場合は、ここでサムネイルや中サイズを選んでしまっていることが原因かもしれません。

元の画像サイズに合わせたい場合は、「フルサイズ」を選択しましょう。

もし、サムネイル・大サイズ・中サイズの3つのサイズが合わないのであれば、デフォルト設定から変えることができます。

ワードプレス管理画面のメニューから「設定」→「メディア」から変更可能です。

画像のサイズが大きかったり小さかったりする場合は、幅の上限と高さの上限を定め、サイズを変更しておきましょう。

「コンテンツ内に挿入する画像はすべて700ピクセルにする」等、ルールを決めて大サイズの幅を700ピクセルに設定しておくと、毎回画像サイズを変更する必要はありません

しかし、個別で画像のサイズを変えたい人もいると思います。

そのような場合は、自分で決めた画像サイズに変更する方法を次の章で確認しましょう。

方法2.自分で決めた画像サイズに変更する

サムネイル・大サイズ・中サイズ以外のサイズで画像を挿入したいときは、画像のオリジナルサイズを変更しなければなりません。

メディアライブラリでサイズ変更したい画像を選択すると、右側に「添付ファイルの詳細」が出てきます。

その項目の中に今の画像サイズが記載されているので、確認しましょう。

メディアのサイズ変更方法

画像を変更するには、「画像編集」をクリックしましょう。

すると、画像縮尺の変更ができるようになります。

メディアの画像変更方法オリジナル

サイズはピクセル(px)単位で指定しましょう。

「縮尺変更」>「戻る」の順にクリックをすると、画像サイズが変更されています。

ここまでは、画像サイズの変更方法について見てきました。

しかし、「そもそもどれくらいの画像サイズが良いのか分からない」という人もいるかもしれません。

そこで、次の章ではアイキャッチ・記事中の最適な画像サイズを確認しましょう。

ワードプレスの最適な画像サイズとは?

ワードプレスの最適な画像サイズが分からない人は多いと思います。

以下の2つの画像サイズを確認していきましょう。

  • アイキャッチの最適な画像サイズ
  • ページに挿入するときの最適な画像サイズ

最適なサイズが分からずに適当に決めてしまうと、せっかく作った画像がきれいに表示されないかもしれません

詳しく確認しましょう。

(1)アイキャッチの最適な画像サイズ

アイキャッチに最適な画像サイズは、横1200・縦630ピクセルです。

というのも、縦:横の比率が1:1.91であれば勝手に切り取られずに、サイトのトップや記事一覧に表示されるからです。

800ピクセル程度でも問題なく表示されますが、小さいサイズに設定してしまうと画像が荒くなってしまうこともあります。

また、FacebookやTwitterなどで記事を拡散する時に、サムネイルにアイキャッチが画像されます。

このとき、端末によっては真ん中部分が正方形でトリミングされて表示されてしまうので注意しなければなりません。

文字を入れたり見せたいアイコンがあるなら、真ん中に配置するように意識しましょう。

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

アイキャッチ画像のサイズ変更は、「添付ファイルの詳細」から自分で設定するしか方法はありません

サムネイル・中サイズ・大サイズから選ぶことはできないので、気をつけましょう。

(2)ページに挿入するときの最適な画像サイズ

投稿や固定頁に挿入する場合の最適な画像サイズは、横幅650〜1000ピクセル程度です。

正直なところ、「このサイズが絶対良い!」というサイズはありません。

パソコンでサイトを見た時に「小さい」と感じなければ、OKです。

最近はタブレットやスマートフォンでサイトを見る人が増えているので、その幅に合わせて700ピクセルや750ピクセルに設定しているサイトもあります。

また、「Cocoon」というワードプレステーマを使っているのであれば、1200ピクセルがおすすめです。

幅が大きい方が、記事全体が整って見えます。

このように、自分の使っているワードプレステーマに合わせて最適な画像サイズを見つけましょう。

ただし、500ピクセル程小さくなるとパソコンで見た時に「小さくて見にくい」と感じます。

逆に1200ピクセルを超えると、画像サイズが多すぎてサイトの読み込みの遅延を引き起こすかもしれません。

サイトの表示スピードが遅いと、ユーザーの離脱に繋がります。

SEO的にもサイトの表示時間は早い方が良いと言われているので、大きすぎる画像はやめておく方が無難です。

そのため、基本的には横幅650〜1000ピクセル程度がおすすめと言えます。

ワードプレスの画像サイズの変更ができない原因と解決方法

中には、「ちゃんと設定しているのに、画像サイズが変更できない!」とお困りの人がいるかもしれません。

画像サイズの変更ができない原因は、以下の2つが考えられます。

  • 添付ファイルの表示設定が指定されている
  • 元の画像サイズが小さい

解決策と一緒に確認していきましょう。

原因1.添付ファイルの表示設定が指定されている

もしかすると、投稿に挿入するときに「添付ファイルの表示設定」でサイズ指定をしてしまっているかもしれません。

もう一度「メディアを追加」をクリックし、「メディアライブラリ」から挿入したい画像を選択してみて下さい。

すると、右下に以下のような「添付ファイルの表示設定」という項目から「サイズ」を確認してみましょう。

もしかすると、サイズが「サムネイル」や「中サイズ」となっているかもしれません。

サムネイルサイズ設定

このようにサイズ指定されていると、自分で設定したオリジナルサイズよりかなり小さいサイズで挿入されてしまいます。

焦ってしまうかもしれませんが、一度挿入した画像を消して「メディア追加」から画像を挿入し直しましょう。

挿入する前に「添付ファイルの表示設定」のサイズを「フルサイズ」に指定すれば、オリジナルサイズで挿入されます。

原因2.元の画像サイズが小さい

挿入や画像サイズが小さいと、大きいサイズで挿入することはできません。

たとえば、大サイズを640ピクセルと設定していたと仮定します。

しかし、550ピクセルの画像を挿入すると、大サイズを選ぶことはできません。

画像サイズが変更できない場合
このように、設定した画像サイズより小さい画像サイズをアップロードすると、それより大きいサイズで挿入することができないのです。

そのため、サムネイルより小さい140ピクセルの画像をアップロードすると、「フルサイズ」しか選べなくなるので注意しましょう。

もし、大きなサイズで画像を表示させたいのであれば、表示させたいサイズ以上の画像をアップロードすることで解決します。

ワードプレスで勝手に作られている画像とは?!

実は、ワードプレスに1つの画像をアップロードすると、同時に3つの画像が生成されています。

というのも、サムネイルサイズ・中サイズ・大サイズとそれぞれのサイズに圧縮した画像が自動的に作成されているのです。

目に見えないため気づかない人もいるかもしれません。

しかし、そのまま放置しているとメディアファイルが重くなってサーバーに負荷がかかる原因になることも考えられます。

そのため、普段使わないサイズがあるのであれば、自動生成しないように設定しておきましょう。

設定方法は、以下の通りです。

  • ワードプレス管理画面のメニューから「設定」>「メディア」の順にクリック
  • 自動生成したくない画像の幅・高さの数値を「0」にする
  • 「変更を保存」をクリック

以上で、数値を0にしたサイズの画像は自動生成されなくなりました。

もし、サムネイルと中サイズを生成されないようにしたのであれば、「添付ファイルの表示設定」には大サイズとフルサイズしか表示されなくなっています。

これだけの作業でサーバーの負荷を軽減させることができるので、普段使わないサイズがあるのであれば、自動生成しないよう設定しておきましょう。

まとめ

ワードプレスの画像サイズは、やり方を知っていると簡単に変更できます。

適切な画像サイズに合わせることで、ユーザビリティ向上やデザイン性向上が可能です。

また、知らない間に自動生成されている画像があります。

サーバーに負荷をかけないためにも、早めに自動生成しないよう設定しておくと回避可能です。

スムーズに画像サイズを変更し、美しいデザインのサイト作りをしましょう。