【THE THORメインビジュアルのカスタマイズ】初心者向に画像付きで解説

the thor ヘッダーお知らせ

 

Chiharu
Chiharu
今回は、WordPressテーマ「THE THOR(ザ・トール)」メインビジュアルのカスタマイズについてお伝えします。

 

THE THORメインビジュアルカスタマイズの手順

 

  1. サンプルを見てカスタマイズする内容を決める
  2. それぞれのカスタマイズをする
    1. メインビジュアルの表示・非表示
    2. メインビジュアルの表示サイズ
    3. メインビジュアル表示モード(静止画・You Tube背景・スライドショー)
    4. メインビジュアル下の注目エリア

 

THE THORメインビジュアルのカスタマイズサンプル

 

the thor ヘッダーお知らせ表示
the thor ヘッダーお知らせ表示
the thor メインビジュアルなし非表示
the thor メインビジュアルなし非表示

 

the thor メインビジュアル ワイドワイド+数値指定なし
the thor メインビジュアル ワイドワイド+数値指定なし
the thor メインビジュアル ノーマルノーマル+数値指定なし
the thor メインビジュアル ノーマルノーマル+数値指定なし
the thor メインビジュアル ビッグビッグ+数値指定なし
the thor メインビジュアル ビッグビッグ+数値指定なし
the thor メインビジュアル 300 ワイドワイド+300
the thor メインビジュアル 300 ワイドワイド+300
the thor メインビジュアル 600 ワイドワイド+600
the thor メインビジュアル 600 ワイドワイド+600

 

静止画

the thor 着せ替え
the thor 着せ替え
the thor 着せ替え

YouTube背景動画

the thor 着せ替え
the thor 着せ替え
the thor 着せ替え

スライドショー

the thor デモ3
the thor 着せ替え

 

the thor メインビジュアル 注目エリア

 

【カスタマイズ1】メインビジュアルの表示・非表示

 

THE THORのメインビジュアルは、表示・非表示を選択できます。

 

the thor ヘッダーお知らせ表示
the thor ヘッダーお知らせ表示
the thor メインビジュアルなし非表示
the thor メインビジュアルなし非表示

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアルTopページ設定>メインビジュアル設定>メインビジュアル設定>メインビジュアルを表示するか選択

選択して公開 をクリック

 

【カスタマイズ2】メインビジュアルの表示サイズ

 

THE THORメインビジュアルは、ワイドサイズ・ノーマルサイズ・ビッグサイズの中から表示サイズを選択できます。

 

また、表示サイズの縦幅を300や600などの数値で指定することも可能です。

 

the thor メインビジュアル ワイドワイド+数値指定なし
the thor メインビジュアル ワイドワイド+数値指定なし
the thor メインビジュアル ノーマルノーマル+数値指定なし
the thor メインビジュアル ノーマルノーマル+数値指定なし
the thor メインビジュアル ビッグビッグ+数値指定なし
the thor メインビジュアル ビッグビッグ+数値指定なし
the thor メインビジュアル 300 ワイドワイド+300
the thor メインビジュアル 300 ワイドワイド+300
the thor メインビジュアル 600 ワイドワイド+600
the thor メインビジュアル 600 ワイドワイド+600

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアルTopページ設定>メインビジュアル設定>メインビジュアル設定>メインビジュアルを表示するか選択

 

表示サイズの選択・指定して、最後に 公開 をクリック

数値の設定しないとデモサイトの数値のまま表示されるので、好みに合わせて調整してください。
(デモサイト01のサイズは600になっています)

 

【カスタマイズ3】メインビジュアル表示モード

 

THE THORメインビジュアルの表示モードは、静止画・YouTube背景動画・スライドショーから選択できます。

 

静止画

the thor 着せ替え
the thor 着せ替え
the thor 着せ替え

 

YouTube背景動画

the thor 着せ替え
the thor 着せ替え
the thor 着せ替え

 

スライドショー

the thor デモ3
the thor 着せ替え

 

【カスタマイズ3−1】メインビジュアルで静止画を選択

 

THE THORメインビジュアルで静止画を選択すると、画像マスクを下記の5種類から選択できます。

(画像マスクとは、画像に透明度のある色や画像でカバーをかけること)

 

the thor メインビジュアル マスクなしマスクなし

the thor メインビジュアル マスクブラックブラック

the thor メインビジュアル マスクブラックメッシュブラックメッシュ

the thor メインビジュアル マスクカラーカラー

the thor メインビジュアル マスクグレイカラー+画像グレー

 

THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示・非表示を選択できます。レイアウトは中央揃えで固定されます。

 

the thor メインビジュアル マスク

 

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアル 静止画Topページ設定>メインビジュアル設定>メインビジュアル設定>静止画時の設定

 

それぞれ選択して 公開 をクリック

タイトル:表示する文字を入力(空欄の場合は、何も表示されません)

サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)

リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)

 

画像アップロード

「ファイルをアップロード」をクリック

「ファイルを選択」をクリック

画像選択
使う画像を選択して「選択」をクリック
画像選択
選択した画像にチェックがついているのを確認してから「画像を選択」をクリック

 

THE THOR カラーパネル

カラー系マスクの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

公開 をクリック

 

【カスタマイズ3−2】メインビジュアルでYouTube背景動画を選択

 

THE THORメインビジュアルにYouTube動画を背景として使うことができます。

 

動画をYouTubeにアップロードしてから、カスタマイズをすすめるようにしてください。

 

THE THORのYouTube背景動画は、画像マスクを下記の5種類から選択できます。

(画像マスクとは、画像に透明度のある色や画像でカバーをかけること)

 

the thor メインビジュアル マスクなしマスクなし

the thor メインビジュアル マスクブラックブラック

the thor メインビジュアル マスクブラックメッシュブラックメッシュ

the thor メインビジュアル マスクカラーカラー

the thor メインビジュアル マスクグレイカラー+画像グレー

 

THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示・非表示を選択できます。レイアウトは中央揃えで固定されます。

 

the thor メインビジュアル マスク

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアル YouTubeTopページ設定>メインビジュアル設定>メインビジュアル設定>YouTube背景動画時の設定

 

それぞれの選択をして 公開 をクリック

動画再生前に表示する画像を登録:動画再生の読み込み時に表示するために必要・スマホで表示(動画未対応のため)

タイトル:表示する文字を入力(空欄の場合は、何も表示されません)

サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)

リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)

 

画像アップロード

「ファイルをアップロード」をクリック

「ファイルを選択」をクリック

画像選択
使う画像を選択して「選択」をクリック
画像選択
選択した画像にチェックがついているのを確認してから「画像を選択」をクリック

 

THE THOR カラーパネル

カラー系マスクの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

公開 をクリック

 

【カスタマイズ3−3】メインビジュアルでスライドショーを選択

 

THE THORメインビジュアルは、複数の画像を順番に表示するスライドショーを選択できます。

 

スライドショーは、あらかじめ複数(2〜5枚)の画像が必要なので画像を用意してからカスタマイズをすすめてください。

 

the thor メインビジュアル スライド横スライド:画像を順番に横へスライドさせる
the thor メインビジュアル 平面回転平面回転画像を回転扉のように画像をくるっと回って、スライドさせる
the thor メインビジュアル キューブ回転キューブ回転:サイコロを転がすように、画像を回転させてスライドさせる
the thor メインビジュアル カバーフローカバーフロー:iTunesやFinderのめくる形式で画像をスライドさせる

 

THE THORスライドショーは画像マスクを下記の5種類から選択できます。

(画像マスクとは、透明度のある色や画像でカバーをかけること)

 

the thor メインビジュアル マスクなしマスクなし

the thor メインビジュアル マスクブラックブラック

the thor メインビジュアル マスクブラックメッシュブラックメッシュ

the thor メインビジュアル マスクカラーカラー

the thor メインビジュアル マスクグレイカラー+画像グレー

 

THE THORメインビジュアルに表示できるのは下記の3つ、それぞれ、表示・非表示を選択できます。レイアウトは中央揃えで固定されます。

 

the thor メインビジュアル マスク

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアル スライドショーTopページ設定>メインビジュアル設定>メインビジュアル設定>スライドショー時の設定

 

それぞれの選択をして 公開 をクリック

自動再生機能の選択:自動で画像を表示させるどうかの設定 自動再生する場合は、時間の指定も可能

スライドエフェクトの選択は、スライドをする方法を選択

タイトル:表示する文字を入力(空欄の場合は、何も表示されません)

サブタイトル:表示する文字を入力(空欄の場合は、何も表示されません)

リンクボタン:表示する文字の入力とURLを入力(空欄の場合は、何も表示されません)

 

画像アップロード

「ファイルをアップロード」をクリック

「ファイルを選択」をクリック

画像選択
使う画像を選択して「選択」をクリック
画像選択
選択した画像にチェックがついているのを確認してから、「画像を選択」をクリック

 

THE THOR カラーパネル

カラー系マスクの色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

公開 をクリック

 

【カスタマイズ4】メインビジュアル下の注目エリア

 

THE THORは、メインビジュアル下に注目エリアが設けられています。お知らせ・お知らせに関するリンクボタンを設置できます。

 

the thor メインビジュアル 注目エリア

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor メインビジュアル 注目エリアTopページ設定>メインビジュアル下お知らせ設定>メインビジュアル下の注目エリア設定

 

それぞれの選択・入力をして  をクリック

色の指定をして公開 をクリック

THE THOR カラーパネル

色の指定は、白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

 

以上、THE THORメインビジュアルのカスタマイズは完了です。

 


 

以上、【THE THORメインビジュアルのカスタマイズ】初心者向に画像付きで解説でした。

 

お読みいただき、ありがとうございました。

THE THORカスタマイズ

1人で悩んでいませんか?
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ >