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

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

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

 

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

 

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

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

 

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

目次

• Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法
• 旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法
• WordPressのアイキャッチ画像が表示されないときの対処法とは
• WordPressのアイキャッチ画像の最適なサイズとは
• まとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう
• WordPressを学習中の方へ

 

 

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

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

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

 

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

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

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

 

 

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

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

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

 

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

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

 

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

これで設定は完了です。

 

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

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

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

 

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

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

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

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

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

functions.php

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

add_theme_support( 'post-thumbnails' );

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

• OGP画像シミュレータ

 

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

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

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

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

 

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

 

 

WordPressを学習中の方へ

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

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

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

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

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

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

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