WordPressで「アイキャッチ画像(サムネイル)のサイズが変更できない。おかしい!」と思ったら、ここをチェックしよう

私のブログ経由などでお問い合わせが多いのは、アイキャッチ画像(サムネイル)に関するもので、特に以下の2つが多いです。

  1. アイキャッチ画像が表示されない
  2. アイキャッチ画像のサイズが変更できない

前回は以下のページで「アイキャッチ画像が表示されない場合」について書きました。

今回は「アイキャッチ画像のサイズが変更できない場合」について書いています。

ここを順番にチェックしよう!という感じで「確認の難易度が低い順」に書きましたので、よろしければご参考ください。

確認操作は、デスクトップPCやノートPCなどで行っていただけるとわかりやすいと思います。よろしくお願いします。

アイキャッチ画像のサイズはここで決められている

まずは、アイキャッチ画像はどういう仕組みで作られるのかをなんとなくでいいので理解することをおすすめしています。これを知っていると、本題の「アイキャッチ画像のサイズ変更」のことがすごく理解しやすくなります。

まずWordPressにログインして、管理画面の左メニューから「設定」→「メディア」をクリックします。

すると右部にメディア設定画面が表示されます。

メディア設定画面

上のメディア設定画面では「サムネイルのサイズ」「中サイズ」「大サイズ」と3つの画像サイズを指定できる項目が用意されています。

投稿画面やメディアから画像ファイルをアップロードした時に、それぞれ3つの画像サイズで作成される仕組みです。WordPressをインストールした直後の状態だと、

  • サムネイル 150×150ピクセル
  • 中サイズ 300×300ピクセル
  • 大サイズ 1024×1024ピクセル

それぞれサイズが指定されています。

ここで、3つの画像サイズの中で「サムネイルのサイズ」に注目しましょう。150×150ピクセルですね。このサイズがアイキャッチ画像のサイズです。

もうお解りだと思います。アイキャッチ画像のサイズは、メディア設定の「サムネイルのサイズ」で決まるということでした~。

以上が前提で、ここから以下が本題です。アイキャッチ画像のサイズを変更しましょう。

アイキャッチ画像のサイズを変更しよう

先ほども書きましたが、アイキャッチ画像のサイズはメディア設定の「サムネイルのサイズ」で決まります。

なので、単純に「サムネイルのサイズ」を変更すればOKです。変更したい幅と高さを決めて「変更を保存」をクリックしましょう。

「サムネイルを実寸法にトリミングする」とは?

サムネイルのサイズの下に、

「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」

というチェックがデフォルトで入っていると思います。

ちょっと文章で説明するのが下手なので、これにチェックを入れた時と入れていない時の画像を比較してみましょう。使う画像は、下のカキフライの画像にします。

この画像は私が東十条にある居酒屋たぬきで撮影したものです。画像では伝わらないと思うんですが、ボリュームがあって、カキフライだけで腹いっぱい。

使う画像

700×525ピクセルの画像。

チェックが入っている時の画像(サムネイルを実寸法にトリミング)

150×150ピクセルで切り取られました。

チェックが入っていない時の画像

150×113ピクセル。元画像の比率を保持したまま縮小されました。

画像を見比べると違いがわかりますね。どちらかお好みで選びましょう。

アイキャッチ画像を変更した後は、注意!

ここまでの操作でアイキャッチ画像のサイズを変更できたんですが「いや・・・サイズ変わってないよ!」と考える方もいます。その気持ちすごくわかる・・・。

実は、メディア設定で画像サイズを変更した後は、今まで設定したアイキャッチ画像のサイズがパパッと連動して変更されるわけではないです。

つまり、今までのアイキャッチ画像を再作成する必要があります。

例えば・・・私のブログは700記事ほどあって、だいたいの記事にアイキャッチ画像を設定しています。全記事のアイキャッチ画像を変更することになります。・・・はああ~、これは大変な作業だ!

そこで。

アイキャッチ画像を一括で再作成してくれる便利なプラグインがありますので、ご紹介します。

アイキャッチ画像を一括で再作成してくれるプラグイン

アイキャッチ画像のサイズを変更した後は、過去に設定したアイキャッチ画像を再作成する必要があると書きました。そこで便利なのが「Regenerate Thumbnails」プラグインです。

今までの投稿のアイキャッチ画像を、現在設定しているのサムネイルのサイズに一括で再作成してくれます。

さっそくインストールしましょう。

WordPressの管理画面の左メニューから「プラグイン」→「新規追加」をクリックします。

キーワードに「Regenerate Thumbnails」を入力して、エンターキーを押します。

プラグインが見つかりますので、「今すぐインストール」をクリックして、インストール後に有効化します。

WordPressの管理画面の左メニュー「ツール」→「Regen. Thumbnails」をクリックします。

右部に下の画面が表示されます。英文ですが、書いてあることは「ボタン押したら画像再作成しますよ」ということなので、「Regenerate All Thumbnails」をクリックします。

アイキャッチ画像が再作成される進捗度が見られます。100%になれば終わり。終わるまで待ちましょう。

以上の作業でアイキャッチ画像が再作成されます。便利なプラグインですね。

さらに上級者向けのプラグインとして「Force Regenerate Thumbnails」という似た名前のプラグインがあります。ある程度知識がある方のみ利用した方がいいかも。自信がある方は、以下のリンクをご参考ください。

アイキャッチ画像以外に考えないといけないことがいくつか出てくるな、って感じです。

まとめ

「アイキャッチ画像のサイズが変更できない」という場合は、まずは上記の順番で確認を行い、作業をするともしかすると解決するかもしれません。

今回ご紹介した方法でも、画像サイズが変更できないという場合。例えば、「画像サイズは問題ないのに、Webで表示させた時にサイズが変わっているな~」ということもあると思います。実際、私はよく聞きます。

その時は、html,css側で画像サイズを変更させている場合がありますので、html,cssと両コードを見直してもいいと思います。

というわけで・・・長くなりましたが、アイキャッチ画像のサイズ1つ取ってもいろんな設定が絡んでるんだなぁ~という事がわかると思います。

状況に合わせて、アイキャッチ画像が表示されない場合とセットで、必要だな~と思う部分だけご参考頂けますと嬉しいです。

著者:bouya Imamura