こんにちは、テンテンです。
今回は、THE THORでアイキャッチ画像のデザインを変更する方法について解説します。
THE THORでは、かなり細かいところまでデザインの設定ができて、アイキャッチ画像のデザインまでいじることができます。
また、アイキャッチ画像に動きを与えることもできるんです。
【アイキャッチ画像のデザインの参考例】
これは当ブログのアイキャッチ画像のデザイン参考例ですが、上記のようにアイキャッチ画像にカーソルを合わせることによって回転式の動きを与えています。
THE THORでは、動きの種類を変更したり、色付けを行うことも出来たりもします。
必須のデザイン設定ではないですが、サイトデザインに拘りたい方は是非チャレンジしてみましょう。
では早速解説に進みます。
THE THORでアイキャッチ画像の設定を変更する方法について
THE THORでは、以下4つの設定を変更することができます。
- NO IMAGEの際の画像設定をすることができる
- アイキャッチ画像にカーソルを合わせることで色を変更することができる
- アイキャッチ画像にカーソルを合わせることで動きを与える
- アイキャッチのサイズを変更することができる
では一つ一つ解説していきます。
①「外観」→「カスタマイズ」に進みます。
②「基本設定[THE]→「アイキャッチ画像の設定」に進みます。
③アイキャッチ画像の各デザイン設定を行います。
ここで、先ほどお伝えした4つのデザイン設定を行うことができます。
では一つ一つ見ていきましょう。
①NO IMAGEの際、固定画像を表示させることができる
文章のみだと、なかなか理解がしにくいので画像で解説します。但し、ほぼ使う必要がない設定なので読み飛ばしていただいて問題はありません。
通常、アイキャッチ画像を設定しない場合、下記画像のように表示されます。
【アイキャッチ画像を設定していない場合】
THE THORでは、一つ設定を加えることで、アイキャッチ画像を設定しなくとも固定のアイキャッチ画像を表示させることができます。
では、「アイキャッチ画像の設定」に戻ります。
ここに、画像をアップロードをすることで、アイキャッチ画像を毎回設定しなくとも固定の画像が表示されるようになります。
気になる方は試してみてください。
②アイキャッチホバーエフェクトの設定について
ここでは、アイキャッチ画像にカーソルを合わせることにより、動きを与えたり、色付けしたりすることができます。
下記画像をご覧ください。
ここで、動きや色などの設定を変更することができます。
・「アイキャッチホバー時のエフェクトを選択」→アイキャッチ画像をカーソルに合わせた際の動きの変更ができます。
【動きの種類】
- ズーム
- ズームグレイ
- ズームセピア
- ズーム回転
- マスク
- マスクズーム
- マスクズーム回転
- 無し
以上、8つから選ぶことができます。⑤〜⑦までは、動きと同時に色をを与えることができます。
気になる方は一つ一つ試してみることをオススメします。
・「マスク系エフェクト利用時のマスクカラーを指定」→色の指定ができます。
⑤〜⑦を選択した場合、動きと同時に色の指定をすることができます。
※それ以外は色の指定は不可
・「マスク系エフェクト利用時のマスク上テキストを入力」→アイキャッチ画像上にテキスト表示させることができます。
文字では伝わりにくいかと思いますので、実際テスト設定してみましたのでご覧ください。
【サンプルアイキャッチ画像】
緑の箇所がテキスト部分です。このようにかなり細かいところまで、アイキャッチ画像のデザイン設定を加えることができるので、色々と試してみてください。
③アイキャッチサイズの設定について
ここでは、アイキャッチのサイズを設定することができます。デフォルトでは、768×432の設定となっていますが、必要に応じて変更することができます。
アイキャッチサイズの設定は左下の赤枠で囲っている箇所から設定を行うことができます。
初心者の方でもわかりやすいように、色分けをしておりますので、ご参考にしてください。
さいごに
アイキャッチ画像の細かいデザイン設定はできましたでしょうか？
当ブログでは、THE THORの設定からブログ運営で学んできたことなどをアウトプットしていますので、いろいろとご参考にしていただけると嬉しい限りです。
最後まで読んでいただき、ありがとうございました。