THE THORのアイキャッチ画像のデザインを変更したいけど、どうやって設定するのかわからなくて困っていませんか？
アイキャッチ画像を記事のトップに表示するかしないか？アイキャッチ画像にはどんなデザインがあってどれにしたらいいのか？色々と悩みますよね。
わたしはアイキャッチ画像の存在こそ知ってはいたものの、今回の記事を書くまで、その役割や効果については考えたことがありませんでした。
つまり、そこまで重要視していなかったのですが、アイキャッチ画像の重要性を理解した今は、文字を入れたりもっと目立つ画像に差しかえていくべきだと感じています。
まずは手っとり早い方法として、THE THORのアイキャッチ画像の設定をしてみましたが、色付けや動きの種類を変更するだけで、一覧表示などで読者さんの目を多くひくことにつながります。
今回は、THE THORのアイキャッチ画像の設定方法を解説していきますが、とても簡単なのでこの機会に済ませておきましょう。
【THE THOR】アイキャッチ画像についてくわしく！
THE THORのアイキャッチ画像を設定するまえに、とくに初心者さんが疑問に思いがちな、「アイキャッチ画像ってなに？」について簡単な説明をしておきますね。
アイキャッチ（Eye Catch）画像とは、「目（Eye）をひきつける（Catch）」ための画像のことで、記事ページの最初（タイトル下）に大きく表示されます。
例えば、今回わかりやすくアイキャッチ画像をかんたんに作ってみましたが、本記事のタイトル下に表示されている下の画像がアイキャッチ画像です。
印象的なアイキャッチ画像であるほど、記事への流入率やサイト内の回遊率、また滞在時間アップにつながり、よりたくさんの読者に記事を読んでもらえる確率が高くなりますよ。
また、適切でわかりやすいアイキャッチ画像が設定されていることで、読者がさがしている情報をすぐに見つけやすくしてあげる役割もあります。
それぞれの記事が「どんな記事なのか？」を明確にあらわす画像なんですね！
まさに「記事の顔」ともいえる大切な存在だね♪
【THE THOR】アイキャッチ画像を設置する方法を解説
では早速、THE THORのアイキャッチ画像を設定をしていきましょう。
まず記事に設置する方法ですが、投稿画面から直接できますので、投稿画面の【アイキャッチ画像を設定】をクリックします。
画像を選択する画面が表示されたら、右上の【ファイルをアップロード】→【ファイルを選択】をクリックします。
挿入したい画像にチェックを入れて、アップロードできたら【アイキャッチ画像を設定】をクリックして下さい。
すると選択した画像が【アイキャッチ画像】に反映されます。
続いて【プレビュー】ボタンをクリックして、アイキャッチ画像が投稿画面に反映されているのを確認してみましょう。
アイキャッチ画像を設置する方法は以上です。
「THE THOR無料サポート」受付中！質問、疑問etc…どんな些細なことでもOK！お問い合わせはこちらからお気軽にどうぞ！
【THE THOR】アイキャッチ画像のデザインを変更する方法
THE THORでアイキャッチ画像のデザインに変化をつけたい場合、可能な設定は以下の3つになります。
NO IMAGEで固定画像の表示ができる
アイキャッチホバーエフェクトの設定ができる
- アイキャッチのサイズ変更ができる
では、上記のアイキャッチ画像の設定項目を解説していきますが、まずは【WordPressダッシュボード 】→【外観 】→【 カスタマイズ】と進んでください。
次に【基本設定[THE]】→【アイキャッチ画像の設定】に進みましょう。
下の画面にて、先ほどお伝えしたアイキャッチ画像の3つのデザイン設定を進めていきます。
① 「NO IMAGE」設定
THE THORのアイキャッチ画像では、通常なにも設定しない場合、「NO IMAGE」という画像がデフォルトで表示されます。
ご覧のとおりこのままですと、読者は読んでみようという気持ちにならないですよね。
通常、アイキャッチ画像は一記事ごとに、別々の画像を設置しますが、念のため固定画像を設定しておくと安心ですよ。
そこで、以下の手順にしたがい、アイキャッチ画像が設定されていない場合でも、イメージのよい特定の画像を表示させておきましょう。
先ほどの【アイキャッチ画像の設定】に戻り、NO IMAGE画像の設定をしていきますが、まず【画像を選択】をクリックして下さい。
保存されている画像一覧が表示されたら、好きな画像をえらんで【画像を選択】をクリックしましょう。
選択した画像が反映されたら、最後に【公開】を忘れずにします。
② 「アイキャッチホバーエフェクト」設定
次に、「アイキャッチホバーエフェクト」について解説していきますが、なにができるのかというと、下の画像を見てわかるとおり、アイキャッチ画像にカーソルを合わせたときの動きや色、テキストを設定できます。
アイキャッチホバー時のエフェクトの設定
まずはじめに、【アイキャッチホバー時のエフェクトの選択】ですが、全部で8種類の中から、好きなものを選択しましょう。
右側のプレビューにすぐ反映されるので、確認しながら色々試してみてくださいね。
マスク系エフェクト利用時のマスクカラーを指定
これは「アイキャッチホバー時のエフェクトを選択」で「マスク、マスクズーム、マスク回転」を選択した際にえられる効果です。
「マスク系エフェクト利用時のマスクカラーを指定」の項目で【色を選択】をクリックすると、色や濃淡を調整できるパネルが展開されますので、あなた好みに設定しましょう。
例えば、黒であれば上画像の左側のようになりますよ。
マスク系エフェクト利用時のマスク上テキストを入力
続いても「アイキャッチホバー時のエフェクト」で「マスク、マスクズーム、マスク回転」を選択した際の効果になります。
設定方法ですが、「マスク系エフェクト利用時のマスク上テキストを入力」の項目で自由に変更してみましょう。
デフォルトでは「READ MORE」となっていますが、わかりやすい日本語で「続きを読む」「クリックする！」「もっと見てみる」など、アピールするのも一つのアイデアですよね。
③ 「アイキャッチサイズ」の設定
最後は「アイキャッチサイズ」の設定ですが、アーカイブ内やウィジェット内で表示される画像を、必要に応じて変更することができます。
設定方法は、「アイキャッチサイズの設定」の項目で、6種類のサイズの中から選択しましょう。
まとめ
お疲れ様でした！アイキャッチ画像の設定とデザインの変更は完了できましたでしょうか？
おさらいになりますが、アイキャッチ画像の役目は、単純にデザイン性をよくするためだけのものではありませんでしたね。
読者が記事を閲覧したときのファーストビューとなる画像にふさわしい、印象的なものにすることがポイントです。
最後に、今回の記事でなにかわからないことはありませんでしたか？質問や相談、感想や雑談などなんでもOK！あなたからのメール待ってます↓
