![the thor ヘッダーお知らせ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/HA04.png)
THE THORでできるメインビジュアルのカスタマイズ
THE THORのメインビジュアルは、以下のカスタマイズができます。
- メインビジュアル表示 / 非表示
- メインビジュアルの表示サイズ
- メインビジュアル表示モード(静止画 / You Tube背景 / スライドショー)
- メインビジュアル下の注目エリア
【カスタマイズ1】メインビジュアルの表示 / 非表示
THE THORのメインビジュアルは、表示 / 非表示を選択できます。
![the thor ヘッダーお知らせ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/HA04.png)
![the thor ヘッダーお知らせ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/HA01.png)
![the thor メインビジュアルなし](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVnone02.png)
![the thor メインビジュアルなし](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVnone01.png)
では、ロゴを登録する/しない(表示/非表示)のカスタマイズ手順を紹介します。
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアルの表示 / 非表示
- Topページ設定
- メインビジュアル設定
- メインビジュアル設定
- メインビジュアルを表示するか選択
- 選択して
をクリック
![the thor メインビジュアル](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MainVisual-1024x708.png)
【カスタマイズ2】メインビジュアルの表示サイズ
THE THORメインビジュアルは、ワイドサイズ / ノーマルサイズ / ビッグサイズの中から表示サイズを選択できます。
また、表示サイズの縦幅を300や600などの数値で指定することも可能です。
![the thor メインビジュアル ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/wide01.png)
![the thor メインビジュアル ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/wide02-696x1024.jpg)
![the thor メインビジュアル ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/wide01.png)
![the thor メインビジュアル ノーマル](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/normal01-696x1024.jpg)
![the thor メインビジュアル ビッグ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/big01.png)
![the thor メインビジュアル ビッグ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/big02-696x1024.jpg)
![the thor メインビジュアル 300 ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/300wide.png)
![the thor メインビジュアル 300 ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/300wide-697x1024.jpg)
![the thor メインビジュアル 600 ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/600wide.png)
![the thor メインビジュアル 600 ワイド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/600wide-696x1024.jpg)
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアルの表示サイズ
- Topページ設定
- メインビジュアル設定
- メインビジュアル設定
- メインビジュアルの表示サイズを選択
![the thor メインビジュアル](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MainVisual-1024x708.png)
表示サイズの選択・指定して、最後に をクリックします。
数値の設定しないとデモサイトの数値のまま表示されるので、好みに合わせて調整してください。
(デモサイト01のサイズは600になっています)
【カスタマイズ3】メインビジュアル表示モード
THE THORメインビジュアルの表示モードは、静止画 / YouTube背景動画 / スライドショーから選択できます。
静止画
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo02.png)
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo04.png)
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo09.png)
YouTube背景動画
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo01.png)
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo05.png)
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo07.png)
スライドショー
![the thor デモ3](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/demo3.gif)
![the thor 着せ替え](https://chiharudesign-thethor1.com/wp-content/uploads/2021/06/demo06.png)
【カスタマイズ3−1】メインビジュアルで静止画を選択
THE THORメインビジュアルで静止画を選択すると、画像マスクを下記の5種類から選択できます。
(画像マスクとは、画像に透明度のある色や画像でカバーをかけること)
![the thor メインビジュアル マスクなし](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskNone.png)
![the thor メインビジュアル マスクカラー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskColor.png)
![the thor メインビジュアル マスクブラック](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask4.png)
![the thor メインビジュアル マスクグレイ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskGray.png)
![the thor メインビジュアル マスクブラックメッシュ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask5.png)
THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示 / 非表示を選択できます。
レイアウトは中央揃えで固定されます。
![the thor メインビジュアル マスク](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask.png)
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアルのカスタマイズ
- Topページ設定
- メインビジュアル設定
- メインビジュアル設定
- 静止画時の設定
![the thor メインビジュアル 静止画](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVstill-1024x708.png)
それぞれ選択して をクリックします。
- タイトル:表示する文字を入力(空欄の場合は、何も表示されません)
- サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)
- リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)
【カスタマイズ3−2】メインビジュアルでYouTube背景動画を選択
THE THORメインビジュアルにYouTube動画を背景として使うことができます。
動画をYouTubeにアップロードしてから、カスタマイズをすすめるようにしてください。
THE THORのYouTube背景動画は、画像マスクを下記の5種類から選択できます。
(画像マスクとは、画像に透明度のある色や画像でカバーをかけること)
![the thor メインビジュアル マスクなし](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskNone.png)
![the thor メインビジュアル マスクカラー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskColor.png)
![the thor メインビジュアル マスクブラック](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask4.png)
![the thor メインビジュアル マスクグレイ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskGray.png)
![the thor メインビジュアル マスクブラックメッシュ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask5.png)
THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示 / 非表示を選択できます。
レイアウトは中央揃えで固定されます。
![the thor メインビジュアル マスク](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask.png)
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアルYouTube背景動画のカスタマイズ
- Topページ設定
- メインビジュアル設定
- メインビジュアル設定
- YouTube背景動画時の設定
![the thor メインビジュアル YouTube](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVYouTube-1024x708.png)
それぞれの選択をして をクリックします。
- 動画再生前に表示する画像を登録:動画再生の読み込み時に表示するために必要・スマホで表示(動画未対応のため)
- タイトル:表示する文字を入力(空欄の場合は、何も表示されません)
- サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)
- リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)
【カスタマイズ3−3】メインビジュアルでスライドショーを選択
THE THORメインビジュアルは、複数の画像を順番に表示するスライドショーを選択できます。
スライドショーは、あらかじめ複数(2〜5枚)の画像が必要なので画像を用意してからカスタマイズをすすめてください。
![the thor メインビジュアル スライド](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/スライド1.gif)
横スライド:画像を順番に横へスライドさせる
![the thor メインビジュアル 平面回転](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/平面回転.gif)
平面回転:画像を回転扉のように画像をくるっと回って、スライドさせる
![the thor メインビジュアル キューブ回転](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/キューブ回転.gif)
キューブ回転:サイコロを転がすように、画像を回転させてスライドさせる
![the thor メインビジュアル カバーフロー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/カバーフロー.gif)
カバーフロー:iTunesやFinderのめくる形式で画像をスライドさせる
THE THORスライドショーは画像マスクを下記の5種類から選択できます。
(画像マスクとは、透明度のある色や画像でカバーをかけること)
![the thor メインビジュアル マスクなし](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskNone.png)
![the thor メインビジュアル マスクカラー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskColor.png)
![the thor メインビジュアル マスクブラック](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask4.png)
![the thor メインビジュアル マスクグレイ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/maskGray.png)
![the thor メインビジュアル マスクブラックメッシュ](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask5.png)
THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示 / 非表示を選択できます。
レイアウトは中央揃えで固定されます。
![the thor メインビジュアル マスク](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/mask.png)
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアルのスライドショーのカスタマイズ
- Topページ設定
- メインビジュアル設定
- メインビジュアル設定
- スライドショー時の設定
![the thor メインビジュアル スライドショー](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVSlideShow-1024x708.png)
それぞれの選択をして をクリック
自動再生機能の選択:自動で画像を表示させるどうかの設定
自動再生する場合は、時間の指定も可能
スライドエフェクトの選択:スライドをする方法を選択
タイトル:表示する文字を入力(空欄の場合は、何も表示されません)
サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)
リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)
【カスタマイズ4】メインビジュアル下の注目エリア
THE THORは、メインビジュアル下に注目エリアが設けられています。お知らせ / お知らせに関するリンクボタンを設置できます。
![the thor メインビジュアル 注目エリア](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVnotice.png)
カスタマイザーを開く
- ダッシュボード
- 外観
- カスタマイズ
![ダッシュボード 外観 カスタマイズ](https://chiharudesign-thethor1.com/wp-content/uploads/2023/07/DB01-1024x573.png)
メインビジュアル下の注目エリア
- Topページ設定
- メインビジュアル下お知らせ設定
- メインビジュアル下の注目エリア設定
- それぞれの選択・入力をして
をクリック
![the thor メインビジュアル 注目エリア](https://chiharudesign-thethor1.com/wp-content/uploads/2021/07/MVnotice01-1024x708.png)
以上、THE THORメインビジュアルのカスタマイズは完了です。
以上、【THE THORメインビジュアルのカスタマイズ】初心者向に画像付きで解説でした。
お読みいただき、ありがとうございました。