THETHORでアイキャッチ画像を設定する方法!!

 
マーシー
この記事ではTHETHORで【アイキャッチ画像を設定する方法】について紹介しているよ!!

アイキャッチ画像とは
・ブログ記事の冒頭や記事一覧ページなどに表示される画像です。

アイキャッチ画像を設定することで、記事が見られる確率がグッと上がるので「No Image」とならないようにきちんと設定しましょう!!

アイキャッチ画像の設定

記事の公開時、アイキャッチ画像が設定されていないと「No Image」という黒い画面が表示されてしまいます。まずは各記事ごとにアイキャッチ画像を設定する方法から見ていきましょう!!

各記事ごとの設定方法

記事投稿画面の右上にある「設定アイコン」をクリックします。歯車アイコンの部分ですね。

設定アイコンをクリックすると、文章とブロックの2種類を選択できますが、ココでは文章の方をクリックします。

文章の設定画面内、中段あたりにアイキャッチ画像の「アイキャッチ画像を設定」という項目がありますので、画面をスクロールします。

この「アイキャッチ画像を設定」からアイキャッチ画像に設定したい画像を登録することができます。

2種類の設定方法

アイキャッチ画像の設定方法は「ファイルをアップロード」「メディアライブラリ」の2種類から選択することができます。

ファイルをアップロード
・新規でアイキャッチ画像を設定したい場合は「ファイルをアップロード」を選択。
メディアライブラリ
・既にアップロード済みの画像をアイキャッチ画像として設定したい場合は「メディアライブラリ」を選択。

プレビューで確認

さきほどの「アイキャッチ画像を設定」の部分に画像が反映されれば完了です。

念のため、記事の冒頭部分などに画像がきちんと反映されているのか?を確認するために「下書き保存」で一度保存して「プレビュー」で確認しましょう。

画像カスタマイズまでの手順

ここからは、画像カスタマイズ項目の「ホバーエフェクトの設定」「画像サイズの設定」「NO IMAGE画像の設定」について紹介していきます。

【ダッシュボード】

【外観】

【カスタマイズ】

カスタマイズ画面

カスタマイズ画面が表示されたら【基本設定[THE]】をクリックして、基本設定画面へ進みます。

基本設定[THE]画面

基本画面が表示されたら【アイキャッチ画像の設定】をクリックして、アイキャッチ画像の設定画面へ進みます。

アイキャッチ画像の設定画面

カスタマイズ項目
・ホバーエフェクトの設定
・画像サイズの設定
・NO IMAGE画像の設定

ホバーエフェクトの設定

ココでは、ホバーエフェクトの設定ができます。ホバーエフェクトとはマウスのカーソルをアイキャッチ画像に重ねる(マウスオーバー)するとかかるエフェクトのことです。

ホバーエフェクトの設定でできること
・エフェクトを選べる。
・マスクカラーを指定できる。
・マスク上にテキストを入力できる。

エフェクト一覧と効果内容

THETHORでは、7種類のホバーエファクトが搭載されています。デフォルトでは「ズーム(default)」が設定されていますが、イヤな場合は自分好みのエフェクトに設定を変更しましょう!!

アイキャッチホバー時のエフェクト一覧
・ズーム(default)
・ズームグレイ
・ズームセピア
・ズーム回転
・マスク
・マスクズーム
・マスクズーム回転
・無し

ズーム(default)

デフォルトで設定されている「ズーム(default)」は、マウスオーバー時にアイキャッチ画像が少しズームアップされます。ズーム系のエフェクトは、画面いっぱいに文字を入れてるとズーム時に文字が見えなくなる可能性がありますので注意が必要です!!

ズームグレイ

「ズームグレイ」を選択すると、アイキャッチ画像がグレーに変化します。マウスオーバー時にアイキャッチ画像がカラーに戻り、少しズームアップされます。

ズームセピア

「ズームセピア」を選択すると、アイキャッチ画像がセピアに変化します。マウスオーバー時にアイキャッチ画像がカラーに戻り、少しズームアップされます。

ズーム回転

「ズーム回転」は、マウスオーバー時にアイキャッチ画像が少しズームアップされながら時計回りに回転します。回転といっても少しひねりが加わるくらいです。

マスク

「マスク」は、マウスオーバー時、アイキャッチ画像の上に半透明のフィルターが加わります。マスク系のエフェクトは、自分が選択しているアイキャッチ画像が見た目で判別できるので、記事一覧などには効果的です。

マスクズーム

「マスクズーム」は、マウスオーバー時にアイキャッチ画像が少しズームアップされながら半透明のフィルターが加わります。

マスクズーム回転

「マスクズーム回転」は、マウスオーバー時にアイキャッチ画像が少しズームアップ、時計回りに回転しながら半透明のフィルターが加わります。

マスクカラーの指定

「■マスク系エフェクト利用時のマスクのカラーを指定」の項目では、マウスオーバー時のマスクの色を指定できます。

テキストの表示

「■マスク系エフェクト利用時のマスク上テキストを入力」の項目では、マウスオーバー時のマスク上に表示させるテキストの入力ができます。テキスト表示しない場合は空白でOK。

画像サイズの設定

アイキャッチサイズの設定では「アーカイブ表示時のサイズ」「ウィジェット内表示時のサイズ」をそれぞれ設定できます。サイズの設定といっても「解像度」の設定になりますので注意してくださいね。

サイズ一覧
・アイキャッチ(768×432 default)
・アイキャッチミニ(375×375)
・サムネイル(150×150)
・ミディアム(300×300)
・ラージ(1024×1024)
・フル

画像サイズが小さくなれば容量が軽くなるかわりに、画像の劣化がおきやすい。画像サイズが大きくなれば綺麗な画像が表示されるけど容量が重い。自分が作成した画像の解像度とのバランスを見ながら設定してみるといいですよ。

No Image画像の設定

アイキャッチ画像を設定しない場合、アイキャッチ画像の部分には「No Image」と表示されます!

設定すると、どうなるの?
NO IMAGE画像の設定で登録した画像が「No Image画像」として表示されます。

画像設定の手順

NO IMAGE画像の設定の「■アイキャッチ画像未設定時に表示されるNO IMAGE画像を登録」という項目で設定ができます。

「画像を選択」をクリックして先に進みます。

2種類の設定方法

画像の設定方法は「ファイルをアップロード」「メディアライブラリ」の2種類から選択することができます。

ファイルをアップロード
新規でNO IMAGE画像を設定したい場合は「ファイルをアップロード」を選択。
メディアライブラリ
既にアップロード済みの画像をNO IMAGE画像として設定したい場合は「メディアライブラリ」を選択。