【THE THORヘッダーのカスタマイズ】初心者向に画像付きで解説

ヘッダー
ヘッダーレイアウトシンプル

 

今回は、THE THOR(ザ・トール)ヘッダーのカスタマイズ方法についてお伝えします。

 

THE THORヘッダー以外のカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

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

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

 

THE THORヘッダーカスタマイズの流れ

 

  • STEP1
    サンプルを見てカスタマイズする内容を決める
  • STEP2
    それぞれのカスタマイズをする
    1.ヘッダーレイアウト
    2.ヘッダーの固定表示する・しない
    3.ヘッダー文字色
    4.ヘッダー背景色
    5.ヘッダーエリアの区切り線の装飾
    6.メニューの表示・非表示
    7.サブメニュー(DOWNLOADのボタン)
    8.サーチパネル(検索用パネル)
    9.メニューパネル
    10.検索窓
    11.お知らせ
    12.SNSアイコン

 

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 検索窓非表示

 

the thor メニューパネル表示
the thor 検索窓表示
the thor SNSアイコン非表示
the thor SNSアイコン非表示

 

【カスタマイズ1】ヘッダーレイアウト

 

THE THORヘッダーのレイアウトは、シンプル・ダイナミックの2種類から選ぶことができます。

 

ヘッダーレイアウトシンプルシンプル

ヘッダーレイアウトダイナミック

ダイナミック

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーのレイアウトを選択

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

 

【カスタマイズ2】ヘッダーの固定表示する・しない

 

THE THORは、ヘッダーの表示を固定表示する・しないから選ぶことができます。

 

ヘッダー動く

固定表示しない(ヘッダーが動きます)

ヘッダー動かない

固定表示する

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーを固定表示するか選択

固定表示のする・しないを選択してカスタマイザー公開 をクリック

 

【カスタマイズ3】ヘッダー文字色

 

THE THORヘッダーの文字色は、黒文字・白文字の2種類から選ぶことができます。

 

黒文字

黒文字

白文字

白文字

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーのテキストカラーを選択

黒文字・白文字を選択してカスタマイザー公開 をクリック

 

【カスタマイズ4】ヘッダー背景色

 

THE THORヘッダーの背景色は、自由に色を指定することができます。

 

ヘッダー背景カラー

 

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーの背景色を指定

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

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

 

【カスタマイズ5】ヘッダーエリア区切り装飾

 

THE THORヘッダーエリアの区切り装飾は、シャドウ・ボーダー・なしの3種類から選ぶことができます。少しわかりずらかったので、サンプル画像では拡大した画像も表示しています。

 

区切り装飾シャドウシャドウ

区切り装飾ボーダーボーダー

区切り装飾無し

なし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー ヘッダー設定

共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーエリアの区切り装飾を選択

区切り装飾を選択してカスタマイザー公開 をクリック

 

【カスタマイズ6】メニュー表示・非表示

 

THE THORメニューは、表示・非表示から選ぶことができます。

 

メニュー表示

表示

メニュー非表示

非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー グローバルメニュー

共通エリア設定>ヘッダーエリア設定>グローバルメニュー設定>グローバルメニューを表示するか選択

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

 

【カスタマイズ7】サブメニュー(DOWNLOADのボタン)

 

THE THORサブメニューとは、「DOWNLOAD」と表示されているボタンのことです。ボタンに表示する文字とリンク先のURLは、自由に決めることができます。

 

ボタンを表示できるのは、グローバルメニューの右・メニューパネル内の上部の2箇所です。

 

グローバルメニュー右グローバルメニューの右

メニューパネル内メニューパネル内の上部

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー サブメニュー

共通エリア設定>ヘッダーエリア設定>サブメニュー設定>PC表示時のサブメニューの表示位置を選択>注目ボタンのテキストを入力>ボタンのリンク先URLを入力

表示方法・ボタンに表示させたい文字の入力・リンク先のURLを入力してカスタマイザー公開 をクリック

 

【カスタマイズ8】サーチパネル(検索用パネル)

 

THE THORサーチパネルは、ブログ内を検索するときに使うパネルのことで、設置するとヘッダーに検索用のアイコンが表示されます。

 

サーチパネル表示表示

サーチパネル非表示非表示

 

パネルは、複数条件検索・キーワード検索の2種類から選ぶことができ、アイコンをクリックすることで開閉されます。

 

複数条件検索複数条件検索

キーワード検索キーワード検索

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー サーチパネル

共通エリア設定>ヘッダーエリア設定>サーチパネルの設定>サーチパネルを表示するか選択>サーチパネル内の検索機能を選択

表示・非表示を選択、表示する場合は検索機能の選択をしてカスタマイザー公開 をクリック

 

【カスタマイズ9】メニューパネル

 

THE THORメニューパネルは、メニューが表示されている開閉のできるパネルのことです。モニターの小さいスマートフォンやタブレットからメニューが見やすくなります。

 

the thor メニューパネル
メニューパネル

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー メニューパネル

共通エリア設定>ヘッダーエリア設定>メニューパネルの設定>メニューパネルを表示するか選択>ウィジェットの見出しデザインを選択>ウィジェット見出しの色を指定

表示・非表示を選択、ウィジェットの見出しデザイン・色の指定をしてカスタマイザー公開 をクリック

 

【カスタマイズ10】検索窓

 

THE THORヘッダー下に表示する検索窓は、表示・表示+注目キーワード表示・非表示の3種類から選ぶことができます。

 

the thor 検索窓表示
the thor 検索窓表示
the thor 検索窓表示+注目キーワード表示
the thor 検索窓表示+注目キーワード表示
the thor 検索窓非表示
the thor 検索窓非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーボトムエリア
カスタマイザー 検索窓

共通エリア設定>ヘッダーボトムエリア設定>ヘッダー検索窓の表示設定>ヘッダーの検索窓を表示するか選択>注目キーワードを表示するか選択>注目キーワードのタイトルを入力>背景色を指定

カラーパネル

表示・非表示を選択、ウィジェットの見出しデザインを選択しカスタマイザー公開 をクリック

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

 

【カスタマイズ11】お知らせ

 

THE THORヘッダー下に表示するお知らせは、非表示・表示から選ぶことができます。

 

the thor お知らせ設定表示
the thor 検索窓表示
the thor 検索窓非表示
the thor 検索窓非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーボトムエリア
カスタマイザー お知らせ

共通エリア設定>ヘッダーボトムエリア設定>ヘッダーお知らせの表示設定>ヘッダーお知らせを表示するか選択>お知らせとして表示する文章を入力>リンク先URLを入力>背景色を指定

それぞれ選択して、最後にカスタマイザー公開 をクリック

 

【カスタマイズ12】SNSアイコン

 

THE THORヘッダーにSNSと連携するためのアイコンを表示することができます。

 

the thor メニューパネル表示
the thor 検索窓表示
the thor SNSアイコン非表示
the thor SNSアイコン非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー SNSフォロー
カスタマイザー フォロー
カスタマイザー フォロー

SNS設定>Follow設定>SNSそれぞれの設定

フェイスブック・インスタグラム・ツイッター・グーグル+・ユーチューブ・リンクトイン・ピンタレスト・RSSの中から表示したいSNSに自分が使っているSNSのURLと入力と「Headerでフォローアイコンを表示する」にチェックを入れてカスタマイザー公開 をクリック

 


 

おつかれさまでした。

 

以上、【THE THORヘッダーのカスタマイズ】初心者向に画像付きで解説でした。

 

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

 

お問い合わせはこちら

 

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

Chiharu