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

メインビジュアル
メインビジュアル

 

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

 

メインビジュアル以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

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

 

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

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

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
the thor メインビジュアルワイド+300
the thor メインビジュアルワイド+600
the thor メインビジュアルワイド+600

 

デモ2
デモ4
デモ9

静止画(画像クリックでTHE THORのデモサイトが開きます)

デモ1
デモ5
デモ7

YouTube背景動画 スマホでは静止画(画像クリックでTHE THORのデモサイトが開きます)

デモ6

スライドショー(画像クリックでTHE THORのデモサイトが開きます)

 

メインビジュアル下

 

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

 

THE THORメインビジュアルは、表示・非表示から選ぶことができます。

 

the thor メインビジュアル表示
the thor 検索窓表示
the thor メインビジュアル非表示
the thor メインビジュアル非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル
カスタマイザー メインビジュアル

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

選択してカスタマイザー公開 をクリック

 

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

 

THE THORメインビジュアルを表示を選択すると、ワイドサイズ・ノーマルサイズ・ビッグサイズの3種類から選択することができます。

 

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

 

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル
カスタマイザー メインビジュアル

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

表示サイズの選択、表示サイズを指定して、最後に カスタマイザー公開 をクリック

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

 

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

 

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

 

デモ2
デモ4
デモ9

静止画(画像クリックでTHE THORのデモサイトが開きます)

 

デモ1
デモ5
デモ7

YouTube背景動画 スマホでは静止画となります(画像クリックでTHE THORのデモサイトが開きます)

 

デモ6

スライドショー(画像クリックでTHE THORのデモサイトが開きます)

 

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

 

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

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

 

the thorマスクブラック

ブラックメッシュ

the thorマスクカラー

the thorマスクカラー+画像グレー

the thorマスクマスクなし

 

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

 

the thor メインビジュアル

 

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル

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

それぞれの選択や登録をして カスタマイザー公開 をクリック

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

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

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

 

ファイルをアップロード
「ファイルをアップロード」をクリック、「ファイルを選択」をクリック
画像選択
使いたい画像を選択して「選択」をクリック
画像選択
選択した画像がダウンロードされて、チェックがついているのを確認してから、「画像を選択」をクリック

 

カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

THE THORメインビジュアルにYouTube動画を背景として使うことができます。YouTube背景動画を使うには、あらかじめ動画をYou Tubeにアップロードする必要がありますので、アップロードが終わってからカスタマイズをすすめるようにしてください。

 

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

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

 

the thorマスクブラック

ブラックメッシュ

the thorマスクカラー

the thorマスクカラー+画像グレー

the thorマスクマスクなし

 

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

 

the thor メインビジュアル

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル
カスタマイザー 静止画

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

それぞれの選択や登録をして カスタマイザー公開 をクリック

動画再生前に表示する画像を登録:動画はスマホに対応されていないことと、動画再生までの読み込みに時間がかかるので画像は必ずを設定してください

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

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

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

 

ファイルをアップロード
「ファイルをアップロード」をクリック、「ファイルを選択」をクリック
画像選択
使いたい画像を選択して「選択」をクリック
画像選択
選択した画像がダウンロードされて、チェックがついているのを確認してから、「画像を選択」をクリック

 

カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

THE THORメインビジュアルは、複数の画像を順番に表示するスライドショーを選択することができます。スライドショーを使うには、あらかじめ複数(2〜5枚)の画像が必要なので、画像を用意してからカスタマイズをすすめるようにしてください。

 

横スライド横スライド:画像を順番に横へスライドさせる

平面回転画像を回転扉のように画像をくるっと回って、スライドさせる

キューブ回転キューブ回転:サイコロを転がすように、画像を回転させてスライドさせる

カバーフローカバーフロー:iTunesやFinderのめくる形式で画像をスライドさせる

 

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

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

 

the thorマスクブラック

ブラックメッシュ

the thorマスクカラー

the thorマスクカラー+画像グレー

the thorマスクマスクなし

 

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

 

the thor メインビジュアル

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル
カスタマイザー スライドショー

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

それぞれの選択や登録をして カスタマイザー公開 をクリック

自動再生機能の選択:クリックをしないときも自動で画像を表示させるか、させないかの設定 自動再生する場合は、時間の指定もします

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

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

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

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

 

ファイルをアップロード
「ファイルをアップロード」をクリック、「ファイルを選択」をクリック
画像選択
使いたい画像を選択して「選択」をクリック
画像選択
選択した画像がダウンロードされて、チェックがついているのを確認してから、「画像を選択」をクリック

 

カラー系のマスクをは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

THE THORは、メインビジュアル下の注目エリアにお知らせ・お知らせに関するリンクボタンをカスタマイズすることができます。

 

メインビジュアル下

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー メインビジュアル下
カスタマイザー メインビジュアル下

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

それぞれの選択や入力をして カスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 


 

おつかれさまでした。

 

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

 

Topページのメインビジュアルは、Webページを開くと一番広い部分に表示されますので、なにを伝えるサイトなのかを視覚的に伝えることができますので、パッと見でもわかるくらいのものがおすすめです。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

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

Chiharu