【クリック操作のみ】THE THORのアイキャッチ設定と非表示にする方法を解説

こんにちは、ヨッシー(@freeman_yoshi)です！

ブログ運営で記事投稿の際に必ず表示したい情報の1つとして、アイキャッチ画像がありますね。

ワードプレスの人気テーマであるTHE THOR(ザトール)であれば、簡単にアイキャッチ画像を表示できますし、色々なエフェクト(効果)も自由に選ぶことができるんですよ。

ちょっとびっくりするようなエフェクトを設定しておけば、訪問者を飽きさせませんし、楽しいブログになるはず。

というわけで、この記事ではTHE THOR(ザトール)を使ったブログにアイキャッチ画像を表示する方法と詳細な設定方法を中心にお伝えしていきます。

また、THE THOR(ザトール)にはデフォルト設定で、不必要にアイキャッチ画像が表示されてしまうので、これらを非表示にする方法にも触れていきますね！

ヨッシーJr

アイキャッチ画像が表示されている方がクリックしたくなるよね！

ヨッシー

そうだね。ポイントは、記事内容に合った画像を用意することだよ！

THE THOR(ザトール)　アイキャッチの表示方法

最初に、ワードプレスの管理画面から記事投稿の新規作成画面を開きましょう。

下にスクロールすると、右の方にアイキャッチ画像を設定するところが出てきます。設定したい画像を選択し、「アイキャッチ画像を設定」をクリックしましょう。

用意するアイキャッチ画像は、フリーのものを使っても良いですし、ココナラでオリジナル画像を作成してもらっても良いですね。

⇒ココナラの無料登録

アイキャッチ画像に設定したいものを選択して、「アイキャッチ画像を設定」をクリック。

記事投稿した後、トップページの記事紹介部分にアイキャッチ画像が反映されていることを確認します。

続いて、詳細設定の方法をチェックしていきましょう。

目次に戻る▶▶

THE THOR(ザトール)　アイキャッチの詳細設定

詳細設定は、大きく分けて3つ。

それでは1個づつ見ていきましょう。

アイキャッチ設定：NO IMAGE

NO IMAGEの設定は、アイキャッチ画像が設定されていない記事にデフォルトで表示するための画像です。何も設定しないとTHE THORではこのような画像が設定されています。

これだとやる気のないブログだと思われますし、読んでみようという気持ちにもなりませんね・・・。そこで、仮にアイキャッチ画像が設定されていなくても、雰囲気の良い画像を設定することでイメージアップを図りましょう。

最初にワードプレス管理画面の「外観→カスタマイズ」を選択。

基本設定[THE]を選択します。

アイキャッチ画像の設定をクリック。

NO IMAGE画像の設定の下にある、「画像を選択」をクリックしましょう。

メディアライブラリに保存されている画像一覧が出てくるので、好きな画像を選択し、「画像を選択」をクリック。

そして、公開ボタンをクリックすることでブログに反映されます。

アイキャッチ設定：ホバーエフェクト

続いて、ホバーエフェクトについて見ていきましょう。この機能こそTHE THORにおけるアイキャッチ画像の真骨頂と言っても良いと思います。効果の種類も豊富でカッコイイものが多いので、是非あなた好みの設定をして魅力的なブログを作成してください。

「外観→カスタマイズ→基本設定[THE]→アイキャッチ画像の設定」の順にクリックし、「アイキャッチホバーエフェクトの設定」を確認しましょう。

3つの項目があるので、それぞれ好みの設定にしていきます。

アイキャッチホバー時のエフェクトを選択

全部で8種類(無し含む)あるので、好きなものを選択します。選択した状態で右側のプレビューにすぐに確認できるので色々試してみてください。

マスク系エフェクト利用時のマスクカラーを指定

これはアイキャッチホバー時のエフェクトで「マスク系」を選択した際に使う項目です。色指定は、下の基本カラーを選択した後、濃淡をバーで調整することで、かなり細かい色が選べます。あなただけのオリジナルカラーを見つけてみましょう。

マスク系エフェクト利用時のマスク上テキストを入力

こちらもアイキャッチホバー時のエフェクトで「マスク系」を選択した際に使う項目となり、マスク上のテキストを入力していきます。

「続きを見る」「クリック！！」「詳細を確認」「もっと読む」など、しっくりくるフレーズを考えてみましょう。

全ての項目が決まったら公開ボタンをクリックして反映させましょう。

参考例として、僕が別ブログで実際に設定している内容はこんな感じ。

アイキャッチ設定：アイキャッチサイズ

続いてサイズ設定ですね。この「サイズ」は、実際に表示されるサイズではなく解像度を指しています。ですので、大きいものを選択すればより鮮明な画像が表示されるということですね。

アーカイブ表示時とウィジェット内表示時の2つのサイズをそれぞれ選択していきます。ただ、ここは基本的に「アイキャッチ(768×432default)」でOKですよ。

ちなみに、選択できるサイズは、アーカイブ表示時・ウィジェット内表示時ともに共通でこのようになっています。

最後に公開ボタンでブログに反映させましょう。

THE THORの標準仕様では、要所で不必要にアイキャッチ画像で設定されています。これらを非表示にする方法について次の章から触れていきますね。

目次に戻る▶▶

THE THOR(ザトール) アイキャッチを非表示にする方法

THE THORを使用しているブログで、アイキャッチ画像がデフォルト設定されている箇所は以下の3か所。

それでは、順番にチェックしていきましょう。

固定ページのアイキャッチを非表示にする

まずは、ワードプレスの管理画面を開き、「外観→カスタマズ」を開きます。

そして、基本設定をクリック。

固定ページ設定[THE]を開き・・・

スタイル設定をクリック。

そして、ページタイトルデザインを選択を「ノーマル(アイキャッチ無し)」にして、最後に公開ボタンをクリックします。これで固定ページに表示されるアイキャッチ画像が非表示になりますよ！

投稿ページのアイキャッチを非表示にする

続いて、投稿ページですね。固定ページの時と同様に、ワードプレス管理画面から「外観→カスタマイズ→基本設定」を開きます。

そして、投稿ページ設定[THE]をクリック。

そして、スタイル設定をクリックします。

ページタイトルデザインを選択を「ノーマル(アイキャッチ無し)」にして、最後に公開ボタンをクリックします。これで投稿ページに表示されるアイキャッチ画像が非表示になりますよ！

記事一覧のアイキャッチを非表示にする

投稿ページの時と同様に、ワードプレス管理画面から「外観→カスタマイズ→基本設定」を開きます。そして、アーカイブページ設定[THE]をクリック。

記事一覧リスト設定を選択。

画像アスペクト比を選択を0:0(非表示)にして、最後に公開ボタンをクリック。これで記事一覧ページに表示されるアイキャッチ画像が非表示になりますよ！

いかがですか？アイキャッチ画像を非表示にする方法は意外と簡単でしたかね？アイキャッチ画像が必要なところと不要なところって結構好みが分かれると思います。僕は、固定ページには特にいらないなぁと感じますね。

アイキャッチ画像を設定する方法も、THE THORを使えば簡単ということがお判りいただけたかと思います。

エフェクト機能やマスクカラーは豊富に用意されているので、是非あなただけのオリジナル設定を見つけてください！きっと、訪問者を飽きさせないオシャレなブログができるはずですよ♪

目次に戻る▶▶

ヨッシーぶろぐ限定！THE THOR(ザトール)購入特典のご紹介

今回の記事ではTHE THORを使用していることを前提で解説してきましたが、当ブログ経由でTHE THORを購入していただければ、以下の特典をもれなくプレゼント！

詳細は下記リンク先の後半をご覧ください。時間の無い方は目次でジャンプすることも可能♪

THE THORヨッシー限定の特典を確認する！

最後までお読みいただきありがとうございました。何か判らない事があれば何でもお問合せくださいね♪

ヨッシーに問い合わせてしてみる