WordPress初心者必見!アイキャッチの作り方と設定方法を解説します

こんにちは。
最近コロナ渦でキャンプに目覚め、週末にはキャンプ場をうろついているyama_muraです。

WordPressでブログ開設し、さあこれから記事を作成しよう!と意気込んでいるあなた。
そんな方に落とし穴が・・・
それがアイキャッチです。

「なにそれ?そんなのいらない。」
「どうして必要なの?」

と思っている方も多いのではないでしょうか。
しかし、アイキャッチは記事の顔になる重要な部分です。

よく考えてださい。
顔の見えない初対面の人と話をしようと思いますか?
興味さえ持たずに、クリックすらしてもらえない記事になってしまいます。

まず読者の注意を引くためには、アイキャッチは欠かせないものです。
目を引くアイキャッチを作れば毎日クリック率の確認が楽しくなります。

見栄えのいいサイトになりブログ構築が楽しくなりますよ。
この記事ではそんなアイキャッチの設定の仕方、画像の作り方など詳しく解説していきます。

そもそもWordPressのアイキャッチってどうして必要なの?

アイキャッチはどうして必要なのでしょうか。
本当に必要なのかな?作るのが面倒くさい。と思いがちですが、どんないい記事を書いたとしても読まれなければ意味がありません。
アイキャッチは読者に記事を誘導するためのものなのです。

WordPressのアイキャッチとは?

アイキャッチとは、英語になおすとEyeが目、Catchが捕まえるという直訳です。
具体的にいうと、WordPress内で記事ごとに設定するサムネイル画像のことです。

タイトルと同じように、アイキャッチには「読者へ記事の印象を伝える」という重要な役割があります。
読者に記事の内容を示すためのもので、そのページの印象を大きく左右するものです。

アイキャッチが表示される場所
• トップページの記事一覧
• 記事一覧ページ
• 記事下のレコメンド記事一覧
• 記事内のリンク
• SNSでのシェア時
など、いろいろな場所で表示されます。

どんなメリットがあるのか?

多くの記事のなかで、ユーザーに自分の記事をクリックしてもらうためには読者の目を引くものが必ず必要になってきます。
タイトルや記事の内容はもちろんですが、一番はじめに目につくアイキャッチ画像を他の記事よりもいいものにすることで、クリック率に直結するのです。

集客がアップする

WordPressで投稿した記事をSNSでシェアすると、投稿にアイキャッチが表示されます。
これで集客を狙うのですが、SNSのタイムラインには数多くの投稿が表示されているので自分の投稿にユーザーがアクセスしてくれるとは限りません。

しかし、アイキャッチが存在することで他の記事との差別化がはかれクリック率があがるのです。

内容を一目で確認できる

読者は記事の内容をたくさんのタイトルの中から読み取っていかなくてはいけません。
しかし、わかりやすいアイキャッチを設定しておけば、記事の内容をより早く見つけることができます。
それにより、よく見られる記事になるのです。

サイト内の他の記事を読んでもらいやすくなる

サイト内には関連記事一覧などで他の記事も表示しています。
アイキャッチを設定しておくことで、自分の記事へ訪れた読者にサイト内の他の記事を見てもらいやすくなります。
直帰率を減らすことができ、サイト内の滞在時間が増えることに繋がります。

WordPressアイキャッチの画像の作り方、設定方法の説明

ではそのアイキャッチをどう作るのか?
今回は有名な無料作成ツールのCanvaで順番に説明していきますね。

【Canva】アイキャッチ画像の作り方

Canvaのホーム画面左上の「デザインを作成」をクリックし、カスタムサイズを入力します。


記事下でも紹介しますがブログのアイキャッチ画像は「横幅1200px」がおすすめです。

デザイン作成

 

デザイン作成画面では最初に、テンプレートを選びます。
デザイン作成画面左側に、Canvaが用意している様々なテンプレートが表示されています。

テンプレートを選びクリックすると、横のキャンバスに表示されるようになっています。
最初から自分で作る手間がはぶけるので、アイキャッチに時間が取れないときは、これを使うのもおすすめです。

オリジナルのものを作りたい場合は、他から取ってきた画像を使うのもおすすめ。


左側のアップロードをクリックすると、画像または動画のアップロードというアイコンが出てくるのでクリック。

デバイスを選択すると自分のパソコンの画像フォルダーが出てくるので選択してください。
そこで画像を選ぶと、右側のページに画像が表示されるので大きさや位置の配置をしてください。

画像を選択している間はキャンバス上にエフェクト、フィルター調節、切り抜き、反転などが表示されています。
いろいろ試してみて下さい。

文字の挿入

画像の次は文字です。


一番左側のテキストをクリックすると、見出しを追加、追加小見出しを追加、追加本文を追加と表示されます。
自分のイメージする大きさを選び、クリックしてください。

キャンバスに反映されますので、文字を消して自分の記事の題名や内容を打ち込んでください。
文字は移動させたり傾けたりすることができます。

文字を選択している間はキャンパス上にフォントやサイズ色などを調節できるタグがありますのでそこで編集可能です。

ダウンロード

このようにアイキャッチが完成すると。
右上にあるダウンロードを選択して、作ったアイキャッチをダウンロードしてください。

画像取得方法

画像はCanva内の写真でも取得できますが、
そこでいいものがいいのが見つからなかった場合はフリー素材のサイトから取得する方法があります。

 ぱくたそ
 タダピク
 Pixabay
 GIRLY DROP
 いらすとや
 afb イラストひろば
など

このようにたくさんのフリー素材サイトがありますので、イメージに合った画像をその中から探してみて下さい。

WordPress新エディタGutenbergのアイキャッチ設定の仕方

では、作ったアイキャッチをどのようにWordPressに設定していけばいいのか。
今回は新エディタGutenbergでのアイキャッチ設定を説明します。

アイキャッチの設定方法

アイキャッチを設定するためには画面右の「文書」メニューを使います。


記事編集画面で右上の設定→「文書タブ」→下にスクロールすると「アイキャッチ画像」があります。

クリックするとファイルをアップロードという画面が表示されるのでファイル選択をクリック。
そうすると自分のフォルダーへ飛ぶようになっています。
上で作成したアイキャッチをここで選択してください。

WordPressでアイキャッチを表示する際の3つの注意点

アイキャッチはどんな画像でもOKというわけではありません。
気を付けなければいけない点もあるんです。

記事に合ったアイキャッチかどうか

まず、アイキャッチ画像は記事の内容とリンクするようなものを選びましょう。
内容がネットビジネスなのに、猫のアイキャッチ画像だとかなりずれていますよね。
このように関係のない画像にしていると、せっかく訪れた読者が混乱し離脱率をあげる要因になってしまいます。

著作権にあたらないか

画像には著作権が存在します。
ネットにあるどの画像を取ってきてもいい、というわけではありません。
上で紹介したフリー素材のサイトで取るのが一番です。

画像サイズが合わず、きれてしまっていないか

アイキャッチには適切なサイズが存在します。
・横1200ピクセル×縦630ピクセル(Googleも推奨)
・比率 1:1.91(縦:横)

比率を守っていれば、サイズが変わっても表示は可能です。
もし切れてしまった場合でも、アイキャッチ画像を作成する際に中央に大切なことを表示させておくと、内容がわかるのでおすすめです。

WordPressでアイキャッチが表示されない?対処法をご紹介

手順通りしてもアイキャッチが表示されない場合があります。
そんな方へ向けて多い質問とその対処法について説明します。

記事作成の際アイキャッチの設定ボックスが右側に表示されていない

項目の表示・非表示は、管理画面の右上にある表示オプションから行えます。
アイキャッチ画像の項目にチェックが入っているか確認してください。

アイキャッチ画像の設定をテーマがサポートしていない

選択しているテーマが、アイキャッチをサポートしていない可能性があります。
テーマを変えるか、WordPressのソースコードを編集する必要があります。
編集は、必ずバックアップをとってから行うようにしましょう。

アイキャッチだけ表示されない又は真っ白になった場合

この場合は、プラグインが大きくかかわっている可能性があります。
一度必要最低限のプラグインを停止してみて下さい。

これで改善された場合は、相性の悪いプラグインが存在していたということになります。
キャッシュクリア系のプラグインが、悪さをしている可能性があるので要注意です。

まとめ

いかがでしょうか?
今回はアイキャッチの作りかたと、それをWordPressにどのように表示させるかについてご紹介しました。
WordPressのアイキャッチは記事の顔となるものなので、きちんと作り込んでおくことが必要です。

アイキャッチをこだわれば、他の記事と比較しても見栄えが良くなりクリック率も上がります。
あなたの素敵な記事作りの参考にしていただければ嬉しいです。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?