こんにちは、テンテンです。
今回は、THE THOR（ザ・トール）で初期設定の一つであるメインビジュアルの設定方法について解説します。また、一緒にお知らせ機能の設定についても触れていきます。
まだ、サイトロゴとヘッダーエリアの初期設定をしていない方は、まずはこちらから設定していくことをオススメします。
→【画像付】THE THOR(ザ・トール)でサイトロゴとヘッダーエリアの設定をしよう〜初期設定編①〜
当ブログでは、下記のようにスライドショーの設定しており、上部ではお知らせのテロップが流れるように設定をしています。
【当ブログのメインビジュアル例】
「記事詳細へ」という赤いボタンがあり、こちらをクリックすると特定のページに飛ぶように設定をしています。
スライドショーにしたくない方もいるでしょう。なので、メインジュアルのスライドショーの設定だけでなく、全般的に解説していきます。
※画像選択やタイトルを考える時間を考慮している為。準備している方はそれほど時間はかかりません。
では、早速解説に進ます。
THE THORでメインビジュアルを設定する手順について
まずメインビジュアルの設定をしていきます。
①「外観」→「カスタマイズ」に進みます。
②「TOPページ設定[THE]」→「メインビジュアル設定」に進みます。
まず、赤枠の箇所でメインビジュアルを表示させるかどうかの設定が可能です。必要がない場合は、非表示にしましょう。
また、スマホだけメインビジュアルの非表示も可能なので、その場合は、「スマホは非表示にする」にチェックを入れます。
一方で青枠の箇所でメインビジュアルの画像サイズを調整することができます。当ブログでは、上記のように設定をしておりますので、ご参考までに…
③「メインビジュアルの表示モード」を選択しよう。
当ブログのようにメインビジュアルをスライドショーにしたい場合は、「スライドショー」にチェックを入れましょう。
そうでない場合は、「静止画」もしくは「YouTube背景動画」にチェックを入れてください。
④各設定を行います。
当ブログでは、スライドショーを指定しているので、スライドショーの設定を軸に説明をさせていただだきます。
※基本的には、すべて同じような設定です。
まず、スライドショーの場合、最大5枚の画像をアップロードすることが可能です。
赤枠で囲っている箇所は、必ず設定しておくべき場所です。青枠で囲っている箇所に関しては必要に応じて設定しましょう。
（1）「自動再生機能の選択」
当ブログのように、自動でスライドショーを行いたい場合は、「自動再生ON」を選択しましょう。
※そうでない場合は、「自動再生OFF」を選択します。「自動再生OFF」にすると、ユーザーが操作しないと動かない仕組みとなっています。
（2）「自動再生ON時の再生速度の設定」
デフォルト（空白）の状態だと、約3秒間づつスライドしていきます。再生速度を設定する場合は、ミリ単位で秒数を設定しましょう。
例）1秒＝1000
※例えば、1など誤った設定しているとデフォルトの設定になるぽっいです。
（3）「スライドエフェクトの選択」
スライドする際の形式を変更することが可能です。かなり細かい設定なので、あまり気にする必要はないかも…
ちなみに、当ブログでは、「キューブ回転」を選択しています。
（4）「画像を登録」
画像は忘れずに用意してアップロードをしましょう。
（5）「画像のマスクを選択」
画像の背景の基本スタイルを変更することができます。基本的にかなり細かい設定なので、デフォルトのままで問題ないかと思います。
当ブログでは、ブラックメッシュを選択しています。
（6）「カラー系マスク利用時の色を指定」
これもかなり超細かい設定なので、デフォルトのままで問題ないです。
（7）「タイトルの入力」と「サブタイトルの入力」、「ボタンのテキストを入力」、「リンク先をURLを入力」
背景をブラックメッシュを指定しているので、若干ぼやけてしまってますが、各場所の表示項目です。
ボタンを設置する場合、忘れずにリンク先のURLを入力しましょう。
設定が完了したら、忘れずに「公開」をしましょう。
THE THORでメインビジュアル付近のお知らせ機能の設定について
メインビジュアル付近では、主に2つの場所にお知らせ表示をさせることができます。
【メインビジュアル付近のお知らせ機能の場所】
①メインビジュアルの上部のお知らせ
※テロップとして表示されている場所です。
②メインビジュアルの下部にのお知らせ
ここでは、主に２つに分けて解説させていただきます。
メインビジュアル上部のお知らせ設定する方法
具体的な場所については、下記画像をご参考にください。
【参考例】
デフォルトの状態だと、メインビジュアル上部のお知らせ機能は非表示になっています。
この部分を表示させたい方向けの内容となりますので、表示させたくない方は読み飛ばしていただいて問題ありません。
①「外観」→「カスタマイズ」→「共通エリア設定」→「ヘッダーボトムエリア[検索窓・お知らせ]」に進みます。
必ず入力すべき箇所は、赤枠で囲っています。
【入力項目】
（1）ヘッダーのお知らせを表示させるかを選択→表示を選択する
（2）お知らせとして表示する文章を入力→お知らせの内容を決めて入力しましょう
（3）背景色の選択
（4）必要に応じてリンク先URLを入力しましょう
メインビジュアル上部のお知らせ設定はこれで完了です。
ヘッダーボトムエリアのおまけ簡単解説
すでに気づいている方もいるかと思いますが、「ヘッダーボトムエリア[検索窓・お知らせ]」では、お知らせ機能だけでなく、検索窓の設置をすることが可能です。
この機能は、あまり使っている方がおらず、特に設定の必要はないかと考えています。ただ、当ブログでは、検証として試しに導入してみました。
【検索窓導入事例】
当ブログでは下記のように設定しましたので、ご参考にください。
背景色を指定しないとデフォルトの色となるようです。
注目キーワードを表示させないようにすることもできます。この辺りは、詳しい解説の必要がないのでここまでとさせていただきます。
メインビジュアルの下部にのお知らせ
この設定もあまり使っている方を見ないのですが、メインビジュアルの下にお知らせ機能を設置することも可能です。
【参考例】
現在、メインビジュアル下部のお知らせ機能は、当ブログでは使っていませんが、設置したい方もいるかもしれませんので、簡単に解説を入れておきます。
①「外観」→「カスタマイズ」→「TOPページ[THE]」
→「メインビジュアル下お知らせ設定」に進みます。
注意点としては、「メインビジュアル下の注目エリアを表示するか選択」で「非表示」を選択していると、キャッチコピーやリンクボタンを入力していても表示されません。
また、リンクボタンを設置する場合、忘れずにリンク先のURLを入力しましょう。
これでメインビジュアル下部のお知らせは設置完了です。
さいごに
少し長くなってしまいましたが、やっていること自体はとても簡単でしたよね！
当ブログでは、THE THORの初期設定から細かい設定について、画像付きでわかりやすく解説していますので、もし良かったらご参考にください。
検索窓も設置していますので、THE THORの使い方がわからない場合は、検索窓も活用してみてください。
最後まで読んでいただき、ありがとうございました。