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

Chiharu
Chiharu

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

ヘッダーとは

ヘッダーとは、ページ上部のブログ名やメニューなどが表示されるエリアのこと。また、ヘッダーは一般的に全ページ共通で表示されます。

THE THORでできるヘッダーのカスタマイズ

THE THORのヘッダーは、以下のカスタマイズができます。

  • ヘッダーレイアウト
  • ヘッダーの固定表示する・しない
  • ヘッダー文字色
  • ヘッダー背景色
  • ヘッダーエリアの区切り線の装飾
  • メニューの表示・非表示
  • サブメニュー(DOWNLOADのボタン)
  • サーチパネル(検索用パネル)
  • メニューパネル
  • 検索窓
  • お知らせ
  • SNSアイコン

ヘッダーレイアウトのカスタマイズ

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

下記のサンプル画像を参考してください。

ロゴ レイアウト シンプル
シンプル
PC  ロゴを登録する
ダイナミック

では、ヘッダーレイアウトのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリアの設定 ヘッダーのレイアウト

レイアウトを選択して 公開 をクリックすればカスタマイズは完了です。

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

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

ヘッダー文字色のカスタマイズ

THE THORヘッダーの文字色は、黒文字 / 白文字から選択できます。

白文字を選択すると背景色はテーマカラーが自動で反映され、下記のサンプル画像のようになります。

PC  ロゴを登録する
黒文字
白文字

では、ヘッダー文字色のカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定

ヘッダーのテキストカラーを選択して 公開 をクリックすればカスタマイズは完了です。

ヘッダー背景色のカスタマイズ

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

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

ヘッダーエリアの区切り線の装飾のカスタマイズ

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

メニューの表示・非表示のカスタマイズ

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

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

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

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

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

メニューパネルのカスタマイズ

THE THORのヘッダーは、固定表示のする / しないを選択できます。

下記のサンプル画像を参考してください。

固定表示しない(ヘッダーが動く)
固定表示する(ヘッダーが動かない)

では、ヘッダーの固定表示する・しないのカスタマイズ手順を紹介します。

カスタマイザーを開く

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

ロゴを設置するレイアウトの選択

  1. 共通エリア設定
  2. ヘッダーエリア設定
  3. ヘッダー設定
共通エリア設定 固定表示するかしないか

ヘッダーを固定表示するか選択して 公開 をクリックすればカスタマイズは完了です。

検索窓のカスタマイズ

お知らせのカスタマイズ

SNSアイコンのカスタマイズ

 ヘッダーホームページ上部に表示される部分であり、メニューやページタイトルなどを掲載するのが一般的です。

 

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

 

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

 

the thor ヘッダー背景色

 

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

カスタマイザー ヘッダー共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーの背景色を指定

 

THE THOR カラーパネル

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

 

色の指定は「色を選択」をクリック

カラーパネルが表示されたら、白い丸・白い四角をクリックしながら動かして色を選択

 

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

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

 

THE THORヘッダーエリアの区切り装飾は、シャドウ・ボーダー・なしから選択できます。(◯内は拡大画像)

 

the thor ヘッダー区切り線シャドウ

the thor ヘッダー区切り線ボーダー

the thor ヘッダー区切り線

なし

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

カスタマイザー ヘッダー共通エリア設定>ヘッダーエリア設定>ヘッダー設定>ヘッダーエリアの区切り装飾を選択

区切り装飾を選択、公開 をクリック

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

 

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

 

表示

非表示

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

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

表示方法を選択、公開 クリック

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

 

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

 

ボタンの表示は、グローバルメニューの右・メニューパネル内の上部から選択します。

 

グローバルメニューの右

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

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

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

表示方法・ボタンに表示させたい文字の入力・リンク先のURLを入力、公開 をクリック

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

 

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

 

the thor 検索パネル表示

the thor 検索パネル非表示

パネル内容は、複数条件検索・キーワード検索から選択できます。

 

the thor サーチパネル複数条件検索

the thor サーチパネルキーワード検索

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

カスタマイザー サーチパネル メニューパネル共通エリア設定>ヘッダーエリア設定>サーチパネルの設定>サーチパネルを表示するか選択>サーチパネル内の検索機能を選択

表示・非表示を選択、表示する場合は検索機能の選択、公開 をクリック

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

 

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

 

 
the thor メニューパネル
ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

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

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

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

 

THE THORヘッダー下に表示する検索窓は、表示・表示+注目キーワード表示・非表示から選択できます。

 

the thor 検索窓表示
the thor 検索窓表示
the thor 検索窓表示+注目キーワード表示
the thor 検索窓表示+注目キーワード表示
the thor ヘッダーお知らせ非表示
the thor ヘッダーお知らせ非表示
ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

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

 

THE THOR カラーパネル

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

 

色の指定は「色を選択」をクリック

カラーパネルが表示されたら、白い丸・白い四角をクリックしながら動かして色を選択

 

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

【カスタマイズ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 SNS非表示
the thor SNS非表示
ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

カスタマイザー ヘッダーSNSフォローSNS設定>Follow設定>SNSそれぞれの設定

 

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


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

 

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

THE THORカスタマイズ

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

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