こんにちは！ブログを書いて1年で月収60万円突破したみのりんです。
ブログを読むときに、最初に目にとまるのがアイキャッチです。書いてある記事のイメージができる画像を効果的に配置していくことで読みやすくなります。THE THORでも各投稿記事に設定できるアイキャッチと、画像を設定しない場合の「NO IMAGE画像」があります。
THE THORでの2種類のアイキャッチの設定方法をお伝えしていきます。
THE THORのアイキャッチはどんなもの？
THE THORのアイキャッチの表示は他のものと少し違います。上部に大きく映し出されたアイキャッチと右側に小さくなった画像がでてきます。カテゴリーをそのまま見せることもできますしい、更新日、Veiwも目に入りますので機能的ですしカッコいい配置です。
個別記事にアイキャッチを設置した場合
記事一覧には通常通り表示されます。
個別記事にアイキャッチ画像を設置しない場合
個別記事にアイキャッチ画像を設置しない場合にはデフォルトの「NO IMAGE画像」がでてくるようになっています。黒でしまって見えますが、これだけではさすがに味気ない感じもしますね。
こちらも、トップページの記事一覧では同じ黒いサムネイルが表示されます。
THE THORのアイキャッチ「NO IMAGE画像」か「個別設定」かの考察
ブログを作っていくと記事も増え大規模なブログなどを作る場合にはすべて違う画像を設定するとかなりの容量になります。100記事くらいまでならプラグインで画像の容量を小さくすればよいですが、それ以上になればやはりブログの表示速度も重くなってきます。
Googleの評価でも「表示速度」は関係してきますので、なにか対策が必要です。
もし、最初から大きなブログを作ろうと思っている場合にはきれいな画像で「NO IMAGE画像」を設定しておくのも良いかもしれません。
THE THORのアイキャッチ「NO IMAGE画像」の推奨サイズは？
まず、NO IMAGE画像の設定をしていきます。最適なサイズはカスタマイザーに記載されています。
推奨サイズとありますのでこのサイズが理想ですが、一般的なブログアイコンサイズでも問題なく使えます。
簡単な画像を設定すると以下のような表示となります。
黒い色ばかりだとつまらなく見えますので、少し色を加えた方が良いと思います。
THE THORのアイキャッチ「NO IMAGE画像」の設置方法
NO IMAGE画像を作ったら、設置をしていきましょう。
アイキャッチホバーエフェクトの設定
同じ画面で、アイキャッチの効果を設定します。ユーザーが「NO IMAGE画像」に矢印をもっていくと大きく表示されたりする効果です。さらに色を指定して同時に表示させます。
以下の図は、色のついていない画像を設置しマスクカラーを黄色にした場合の表示です。
このような設定は「アイキャッチホバーエフェクトの設定」で指定します。ここは、ご自身で完成図を見てどの効果が良いのか試しながら設定をしてください。
- ズーム・・・デフォルト
- ズームグレイ・・・グレイの画像に矢印で色が出てくる
- ズームセピア・・・セピアの画像に矢印で色が出てくる
- ズーム回転・・・矢印をもっていくと画像が傾く
- マスク・・・矢印で指定した色に変化
- マスクズーム・・・指定した色に変化しズームにもなる
- マスクズーム回転・・・指定した色に変化しズームし画像が傾く
- 無し
THE THORのアイキャッチを作る方法を補足
THE THORでも他のテーマでも、記事の最初にアイキャッチを設置する場合にはなにが画像を用意しなければいけません。作成といってもソフトのペイントだけでは透過などもできないためにカッコいい画像ができません。
そこで、簡単にアイキャッチを作る方法をご紹介します。
アイキャッチを作るためのツール「CANVA」
CANVAは、ブログのアイキャッチだけではなく、Twitterの投稿やFacebookのカバーなども定型が用意されているツールです。アイキャッチのサイズを悩むことなくそのままクリックひとつで作れます。
今回は、THE THORの推奨アイキャッチサイズがありますのでその寸法で作ってみます。
⇒ CANVA公式
登録には、「氏名」「メールアドレス」「パスポート」が必要ですが、とても便利なのでサクッと登録しておいてください。
カスタムサイズをクリックすると、サイズ入力ができますので、760×760を入力します。作り方はいろんなアレンジ方法がありますが、ここでは一番オーソドックスで簡単な作成方法をお伝えします。
「テンプレート」を利用すれば、いろんなデザインが使えます。（無料のみ）それぞれのアイコンに矢印を持っていくと右下に「無料」と出ればそのまま使えますので気に入ったものをクリック。
右のスペースではカスタマイズが可能です。
テキストの変更
テキストを「NO IMAGE」に変更します。（文字はなんでもOKです）
テキストも複数用意されていて無料でも使えるものが多いのでここでアレンジします。
フォントの有料無料の見分け方
フォントの部分をクリックすると、数多くのフォント名が出てきます。右側に王冠がついているものは有料です。無料で使えるのはそれ以外となりますが無料だけでも相当ありますので十分使えます。
好きなテキストがあったらクリックすると表示されます。
背景を変更したい時
もし、好きな背景の画像等があればここで加えることも可能です。アップロードで画像を取り込みましょう。
クリックすると上部に現れますので、広げていきます。
背景を後ろにするには、右側の「配置」をクリックします。
背景を指定し「背面へ」をクリックすると画像が後ろになります。
テキスト部分のエリアの色指定と透過
よく、アイキャッチでもテキストを書いた帯部分が透過している画像を見かけることがあります。CANVAでは透過も簡単にできますのでぜひ活用してみてください。
まずは、帯部分の色変更です。
左上に指定範囲の色が出てきますので、クリックすると色の変更が可能になっています。色コード番号でも可能なので好きな色があればそこからもってきてください。
透過させる
色を変更した部分を透過させてみます。部分を指定すると右に「透明度」というアイコンがでてきます。
数値が出てきますが、100が透明度なしでスライドさせると徐々に帯の部分が透過していきますので、ご自身のちょうど良いところまで透過させてみてください。
他のサイズも作ることができますので、もし設置してみてイメージが違うなら作り直しながら調整します。
THE THORのアイキャッチは効果だけでもかなり凝っていますので、自分で好きなアレンジをしてみてください。
