今回は、THE THOR（ザ・トール）メインビジュアルのカスタマイズ方法についてお伝えします。
メインビジュアル以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。
初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに？・THE THORのTOPページは、なにからカスタマイズすればいい？ Chi[…]
THE THORメインビジュアルカスタマイズの手順
- STEP1サンプルを見てカスタマイズする内容を決める
- STEP2それぞれのカスタマイズをする１．メインビジュアルの表示・非表示
２．メインビジュアルの表示サイズ
３．メインビジュアル表示モード（静止画・You Tube背景・スライドショー）
４．メインビジュアル下の注目エリア
当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。
これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。
THE THORメインビジュアルのカスタマイズサンプル
表示表示非表示非表示
ワイド+数値指定なしワイド+数値指定なしノーマル+数値指定なしノーマル+数値指定なしビッグ+数値指定なしビッグ+数値指定なしワイド+300ワイド+300ワイド+600ワイド+600
静止画（画像クリックでTHE THORのデモサイトが開きます）
YouTube背景動画 スマホでは静止画（画像クリックでTHE THORのデモサイトが開きます）
スライドショー（画像クリックでTHE THORのデモサイトが開きます）
【カスタマイズ１】メインビジュアルの表示・非表示
THE THORメインビジュアルは、表示・非表示から選ぶことができます。
表示表示非表示非表示
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル設定＞メインビジュアル設定＞メインビジュアルを表示するか選択
選択して をクリック
【カスタマイズ２】メインビジュアルの表示サイズ
THE THORメインビジュアルを表示を選択すると、ワイドサイズ・ノーマルサイズ・ビッグサイズの3種類から選択することができます。
また、表示サイズの縦幅を300や600などの数値で指定することも可能です。
ワイド+数値指定なしワイド+数値指定なしノーマル+数値指定なしノーマル+数値指定なしビッグ+数値指定なしビッグ+数値指定なしワイド+300ワイド+300ワイド+600ワイド+600
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル設定＞メインビジュアル設定＞メインビジュアルを表示するか選択
表示サイズの選択、表示サイズを指定して、最後に をクリック
数値の設定しないとデモサイトの数値のまま表示されますので、好みに合わせて調整するようにしてください。
（デモサイト01のサイズは600になっています）
【カスタマイズ３】メインビジュアル表示モード
THE THORメインビジュアルの表示モードは、静止画・YouTube背景動画・スライドショーの３種類から選択できます。
静止画（画像クリックでTHE THORのデモサイトが開きます）
YouTube背景動画 スマホでは静止画となります（画像クリックでTHE THORのデモサイトが開きます）
スライドショー（画像クリックでTHE THORのデモサイトが開きます）
【カスタマイズ３−１】メインビジュアルで静止画を選択
THE THORメインビジュアルで静止画を選択すると、画像マスクを下記の5種類から選択することができます。
（画像マスクとは、画像に透明度のある色や画像でカバーをかけること）
ブラック
ブラックメッシュ
カラー
カラー+画像グレー
マスクなし
THE THORメインビジュアルに表示できるものは下記の３つです。それぞれ、表示・非表示を選ぶことができ、レイアウトはどれも中央揃えで固定されています。
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル設定＞メインビジュアル設定＞静止画時の設定
それぞれの選択や登録をして をクリック
タイトル：表示させたい文字を入力（空欄の場合は、何も表示されません）
サブタイトル:表示させたい文字を入力（空欄の場合は、何も表示されません）
リンクボタン：表示させたい文字の入力とURLを入力（空欄の場合は、何も表示されません）
カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。
色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。
【カスタマイズ３−２】メインビジュアルでYouTube背景動画を選択
THE THORメインビジュアルにYouTube動画を背景として使うことができます。YouTube背景動画を使うには、あらかじめ動画をYou Tubeにアップロードする必要がありますので、アップロードが終わってからカスタマイズをすすめるようにしてください。
THE THORのYouTube背景動画は、画像マスクを下記の5種類から選択することができます。
（画像マスクとは、画像に透明度のある色や画像でカバーをかけること）
ブラック
ブラックメッシュ
カラー
カラー+画像グレー
マスクなし
THE THORメインビジュアルに表示できるものは下記の３つです。それぞれ、表示・非表示を選ぶことができ、レイアウトはどれも中央揃えで固定されています。
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル設定＞メインビジュアル設定＞YouTube背景動画時の設定
それぞれの選択や登録をして をクリック
動画再生前に表示する画像を登録：動画はスマホに対応されていないことと、動画再生までの読み込みに時間がかかるので画像は必ずを設定してください
タイトル：表示させたい文字を入力（空欄の場合は、何も表示されません）
サブタイトル:表示させたい文字を入力（空欄の場合は、何も表示されません）
リンクボタン：表示させたい文字の入力とURLを入力（空欄の場合は、何も表示されません）
カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。
色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。
【カスタマイズ３−３】メインビジュアルでスライドショーを選択
THE THORメインビジュアルは、複数の画像を順番に表示するスライドショーを選択することができます。スライドショーを使うには、あらかじめ複数（2〜5枚）の画像が必要なので、画像を用意してからカスタマイズをすすめるようにしてください。
横スライド：画像を順番に横へスライドさせる
平面回転：画像を回転扉のように画像をくるっと回って、スライドさせる
キューブ回転：サイコロを転がすように、画像を回転させてスライドさせる
カバーフロー：iTunesやFinderのめくる形式で画像をスライドさせる
THE THORスライドショーは画像マスクを下記の5種類から選択することができます。
（画像マスクとは、画像に透明度のある色や画像でカバーをかけること）
ブラック
ブラックメッシュ
カラー
カラー+画像グレー
マスクなし
THE THORメインビジュアルに表示できるものは下記の３つです。それぞれ、表示・非表示を選ぶことができ、レイアウトはどれも中央揃えで固定されています。
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル設定＞メインビジュアル設定＞スライドショー時の設定
それぞれの選択や登録をして をクリック
自動再生機能の選択：クリックをしないときも自動で画像を表示させるか、させないかの設定 自動再生する場合は、時間の指定もします
スライドエフェクトの選択は、スライドをする方法を選択
タイトル：表示させたい文字を入力（空欄の場合は、何も表示されません）
サブタイトル:表示させたい文字を入力（空欄の場合は、何も表示されません）
リンクボタン：表示させたい文字の入力とURLを入力（空欄の場合は、何も表示されません）
カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。
色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。
【カスタマイズ４】メインビジュアル下の注目エリア
THE THORは、メインビジュアル下の注目エリアにお知らせ・お知らせに関するリンクボタンをカスタマイズすることができます。
- WordPressのダッシュボード
- 外観
- カスタマイズ
Topページ設定＞メインビジュアル下お知らせ設定＞メインビジュアル下の注目エリア設定
それぞれの選択や入力をして をクリック
以上、THE THORメインビジュアルのカスタマイズは完了です。
おつかれさまでした。
以上、【THE THORメインビジュアルのカスタマイズ】初心者向に画像付きで解説でした。
Topページのメインビジュアルは、Webページを開くと一番広い部分に表示されますので、なにを伝えるサイトなのかを視覚的に伝えることができますので、パッと見でもわかるくらいのものがおすすめです。
わからないことや、ご相談は、お気軽にお声がけくださいね。
お読みいただき、ありがとうございました。
Chiharu