WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressで【アイキャッチ画像】を設定する方法を初心者向けに解説した記事です。アイキャッチ画像とは、ブログの記事冒頭や記事一覧ページに配置されているサムネイル画像です。この画像で記事が見られる確率が上がるので設定しておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

吉﨑 智正

トゥービーコンティニュード合同会社代表。1995年ぐらいからHTMLを生業としており、ここ7年はWordPressを中心に仕事をしています。直近2年半は神奈川と広島で2拠点生活をおくっています。

WordPressでは、記事1つ1つにサムネイル画像(アイキャッチ画像)を設定できます。

ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。

 

テックアカデミーマガジンの場合は、このように表示されています。

eye1

 

アイキャッチ画像を設定すると、下記のメリットがあります。

  • 記事の内容がひと目で分かる
  • 記事一覧の画面でわかりやすい
  • 記事のクリック率が上昇する
  • SNSなどでシェアされた時に目立つ
1時間でできる無料体験!

 

そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。

目次

 

大石ゆかり

田島メンター!!記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜?

田島悠介

アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。

大石ゆかり

はい、お願いします!

 

Gutenberg(標準ブロックエディタ)でWordPressのアイキャッチ画像を設定する方法

WordPressバージョン5.0から、標準エディタがブロックエディタ(通称Gutenberg)に変更になっています。

ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。

 

【Gutenberg】アイキャッチ画像の設定エリアを表示する

Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。

アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。

 

 

【Gutenberg】アイキャッチ画像を設定する

「アイキャッチ画像の設定」ボタンをクリックします。

上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。

 

「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。

アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。

 

投稿画面に、設定したアイキャッチ画像が反映されます。

これで設定は完了です。

 

設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。

また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。

設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。

 

旧エディタ(Classic Editor)でWordPressのアイキャッチ画像を設定する方法

WordPressは5.0から、標準のエディタがブロックエディタ(Gutenberg)になりました。

しかし旧バージョンから使用している方は、いままでの旧エディタ(Classic Editor)のほうが使い慣れている方も多いでしょう。

Classic Editorはプラグインとして追加することで、切り替えが可能です。

ここでは旧エディタ(Classic Editor)でアイキャッチ画像を設定する方法をご説明します。

アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。

 

投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。

eye2

 

すると、投稿画面で表示されるオプションリストが表示されます。

その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。

eye3

 

すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。

これでアイキャッチ画像追加の準備はできました。

eye4

 

【旧エディタ】アイキャッチ画像を設定する

アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。

すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。

 

アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。

eye6

 

投稿画面に、設定したアイキャッチ画像が反映されます。

eye7

間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。

 

記事を公開し、どのように反映されているかを見てみましょう。

eye8

これでアイキャッチ画像の設定は完了です。

 

[PR] WordPressで挫折しない学習方法を動画で公開中

WordPressのアイキャッチ画像が表示されないときの対処法とは

大石ゆかり

田島メンター!!アイキャッチ画像を設定したんですけど、表示されません…!

田島悠介

原因はいくつかあるから順番に対処法みていこうか。

大石ゆかり

お願いします!

 

ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。

前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。

オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。

 

functions.php

/**
 * アイキャッチ画像の機能を有効化
 */

add_theme_support( 'post-thumbnails' );

いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。

このような場合は、有効化しているプラグインを順番に無効化していきます。

これにより、影響をおよぼしているプラグインを特定できます。

プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。

または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。

最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

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

アイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。

 

画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。

縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。

この例では、元の画像は横620pxで縦349pxの画像です。

この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。

4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。

この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。

固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。

アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。

様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。

 

まとめ:アイキャッチ画像を設定して魅力的なサイトを作ろう

標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。

アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。

アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。

 

他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。

 

大石ゆかり

アイキャッチ画像があると、記事のイメージがつかめていいですね♪

田島悠介

そうだね。 アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね!

大石ゆかり

はい、分かりました!

 

1時間でできる無料体験!

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか?

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

 

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する