THE THORのメインビジュアルを表示したいけど、設定のやり方がかわからない…そんなお悩みを抱えていませんか？トップページの顔ともいえる部分なので、早めに設定を済ませておきたいですよね。
わたしはメインビジュアルを無料の画像編集ソフトで自作して、初期段階から設置しましたが、それだけで一気に愛着の持てるサイトになりましたよ。
そんなサイトの魅力アップにもつながるメインビジュアルですが、THE THORでの設定自体はとても簡単で、本記事を読み進めていけば、すぐに完了することができます。
そこで今回は、メインビジュアルの設定方法を中心に、一緒にメインビジュアル周りの設定についても解説していきます！是非最後までお付き合いくださいね。
THE THORのメインビジュアルとはどこの部分？
THE THORのメインビジュアルがどこにあるかですが、トップページのヘッダー下の赤枠で囲った部分になります。
一般的にはヘッダー画面を指しますが、テーマによって呼び方が変わることもあり、少々困惑してしまうのですが、THE THORの場合は「メインビジュアル」＝「ヘッダー画像」になります。
いうまでもなく、メインビジュアルはサイトのイメージに直結する部分なので、ここに魅力的な画像や動画を配置する必要があるわけです。
内容しだいで読者の滞在時間や、回遊率アップにつながりそうですね！
THE THORのメインビジュアル設定方法
では早速、メインビジュアルを設定していきますが、初期状態では非表示となっているので、まずは以下の手順で設定を変更しましょう。
WordPressのダッシュボードから「外観 」→ 「カスタマイズ」 → 「TOPページ設定[THE] 」→ 「メインビジュアル設定」と進みます。
次に「メインビジュアル設定」の項目から、「メインビジュアルを表示するか選択」を「表示」へ変更します。
メインビジュアルの表示設定が完了したら、続いて以下の細かい設定に進みます。
①表示サイズの設定
THE THORのメインビジュアルには、下記3つのサイズが用意されていますので、お好みで選んでください。
- ワイドサイズ
- ノーマルサイズ
- ビッグサイズ
初期状態はワイドサイズで、ヘッダーとの隙間がなく（ヘッダーと同化したような状態）、ウインドウ幅いっぱいに表示されています。
横幅がほぼ一緒のノーマルサイズとビッグサイズは、画面いっぱいに広がらない（メインビジュアルが独立したような状態）ので、ヘッダーの下に空白ができます。
設定手順は、先ほどの「メインビジュアル設定」の項目から「表示サイズ[横]を選択」を好みのサイズに変更します。
また、画像の縦サイズは1000px以下で自由に変更できますので、レイアウトが崩れたり画像が切れる場合は「PC表示時の表示サイズ（縦）を指定」で微調整してください。
サイズ変更は使う画像に合わせて行うのがおすすめなので、しっくりくる画像サイズはケースバイケースということになります。
もし画像を作成するなら、縦を1000PX以下にして、横を1000px前後~1900px前後で大き目に作ることをおすすめしますよ。
②表示モード設定
THE THORのメインビジュアルには、下記3つの表示モードが用意されています。
- 静止画
- YouTube背景動画
- スライドショー
設定手順は、さきほどの「メインビジュアル設定」の項目から「メインビジュアルの表示モード設定」を変更します。
ここでは例として、静止画で説明しますが、ほかの表示モードでもカスタマイズできる内容はほとんど一緒です。
- 画像の設定
- 画像マスクの設定
- タイトルとサブタイトルを表示
- 誘導ボタンの設置
③静止画の設定手順
赤枠で囲った部分を上から順に設定していきます。
「画像を登録」
ここで静止画をアップして設定します。
「画像のマスクを選択」「カラー系マスク利用時の色を指定」
こちらでマスクの種類や色を変えることができますので、設定した静止画に色を重ねて、印象を変えてみましょう。
「タイトルを入力」「サブタイトルを入力」
ここはサイトのタイトルやサブタイトルを表示できますので、それぞれ入力してください。
「ボタンテキスト」「ボタンのリンク先URL」
さいごにボタンの設置は任意ですが、必要に応じて入力しましょう。
ちなみに私は画像を作成する際、タイトルも一緒にデザインした為、タイトルとサブタイトルは使っていません。
通常の広告やビジュアル要素として静止画を使うのはもちろん、YouTube背景動画はライバルとの差をつけたり、強烈なインパクトを与えるには打ってつけでしょう。
また、スライドショーは画像が5つまで設定可能でトップページの要素を保ちつつ、コンパクトにスペースの確保が可能です。
メインビジュアル下のお知らせの設定
THE THORはメインビジュアルの下に「お知らせ」を表示させることができますので、何か特別に宣伝したいことなどあれば、ここを利用してみるのもアリですよ。
設定手順は、「外観 」→ 「カスタマイズ」 → 「TOPページ設定[THE] 」→ 「メインビジュアル下お知らせ設定」へ進み、各項目を入力します。
- 「メインビジュアル下の注目エリアを表示するか選択」→「表示」を選択します。
- 「キャッチコピーを入力」→宣伝やお知らせしたい文章を入力しましょう。
- 「ボタンのテキストを入力」→リンク先を表示したい場合「リンク先の名称」を入力できます。
- 「ボタンのリンク先URLを入力」→リンク先のURLを入力します。
- 「背景色を指定」→注目エリアの背景色を指定できます。
まとめ
今回はメインビジュアルの設定方法と併せて、メインビジュアル周りの設定について解説してきました。
主な設定は表示サイズと表示モードだけですが、使う画像サイズによってしっくりくるかどうか変わるので、多少の注意が必要です。
メインビジュアルは画像サイズとデザインがポイントなので、何度も調整して納得のいく仕上がりにしていきましょう。
最後に、今回の記事でなにかわからないことはありませんでしたか？質問や相談、感想や雑談などなんでも受け付けているので、どうぞお気軽にメールくださいね↓
