THE THOR(ザ・トール)でサイト共通のヘッダーエリアとヘッダーボトムエリアの設定手順

 

THE THOR(ザ・トール)で、ヘッダーエリアとヘッダーボトムエリアのデザインを設定します。このエリアはサイト共通で表示される部分になります。この設定手順をご紹介します。

サイトロゴの設定

 

設定するには、まずWordPressメニューの「外観」、「カスタマイズ」を選択して、THE THORメニューを表示させます。以降省略します。

THE THORメニューの「基本設定」、「サイトロゴの設定」を選択します。

 

 

ロゴ画像があれば、ロゴ画像の設定と、スマホおよびPC表示の時の高さを指定します。

サイトの基本情報で設定したサイト名でも充分ロゴっぽく見えます。

これで満足のため、当方では特にロゴ画像は設定していません。

ヘッダーエリアの設定

 

以下がヘッダーの例になります。これはトップページだけではなく、すべてのページで共通となり、一番上に表示されます。

【ダイナミック指定】

THE THORメニューの「共通エリア設定」、「ヘッダーエリア設定」を選択します。

ヘッダー部分の設定

 

レイアウト選択

「シンプル」か「ダイナミック」を選択します。タイトルが中央にあるのが「ダイナミック」です。
「シンプル」はタイトルが左になります。
下のほうで「シンプル」のサンプルを表示します。

ヘッダーを固定表示するか

スクロールしても、ヘッダーを常時固定表示させるかどうかの設定。

テキストカラー

ヘッダーの文字色を「白文字」か「黒文字」から選択できます。

背景色

ヘッダーの背景色を好きな色に指定できます。

ヘッダーエリアの区切り装飾

ヘッダーエリアとその下との区切り装飾を、「無し」、「シャドウ」、「ボーダー」から選択できます。ほとんど違いはでません。

 

※ 以下はレイアウトがシンプル指定の例です。

メニュー部分の設定

グローバルメニュー設定

グローバルメニューを表示するかどうか以下から選択します。

  • PC/スマホで表示する
  • PC/スマホで表示しない
  • スマホで表示しない
  • PCで表示しない

サブメニュー設定

サブメニューとしてメニューに無いものを一つ追加することができます。

PC表示時の位置

以下の2つから選択します。

  • グローバルメニューの右に表示
  • メニューパネル内で表示(スマホと同じ)

 

「グローバルメニューの右」を選択した場合のイメージ

 

「メニューパネル内」を選択した場合のイメージ

 

注目ボタンのテキスト

ボタンの文字を設定します。

 

ボタンのリンク先URL

リンクさせるURLを設定します。ここが空欄であれば、サブメニューは表示されません

サーチパネルの設定

サーチパネルはサイト内を検索するために使用します。

 

サーチパネルを表示

サーチパネルを表示するかどうか以下から選択します。

  • PC/スマホで表示する
  • PC/スマホで表示しない
  • スマホで表示しない
  • PCで表示しない

サーチパネル内の検索機能

サーチパネルの検索機能を以下の2つから選択します。

  • 複数条件検索
  • キーワード検索

 

複数条件検索は「カテゴリー」と「キーワード」の両方が指定できます。

キーワード検索は「キーワード」のみの指定です。

 

メニューパネルの設定

メニューパネルを表示

メニューパネルを表示するかどうか以下から選択します。

  • PC/スマホで表示する
  • PC/スマホで表示しない
  • スマホで表示しない
  • PCで表示しない

 

ウィジェットの見出しデザイン

ウィジェットの見出しのデザインをどれにするか以下から選択します。

  1. 角丸
  2. シンプル
  3. ボトムボーダー
  4. はみ出すボーダー
  5. シンプル(ワイド)
  6. 内側ボーダー(ワイド)

 

以下、それぞれのサンプル画像です。2.と5.の違いが感じられませんでした。

1.角丸

3.ボトムボーダー

5.シンプル(ワイド)

2.シンプル

4.はみ出すボーダー

6.内側ボーダー(ワイド)

 

ウィジェット見出しの色

ウィジェット見出しの色を指定します。

ヘッダーボトムエリアの設定

 

ヘッダーボトムエリアはヘッダーエリア(サンプルは背景が黒の部分)の下にあり、「ヘッダー検索窓」と「ヘッダーお知らせ」の部分になります。以下がその例になります。

ヘッダーボトムエリアもヘッダーエリアと同様にトップページだけではなく、すべてのページで共通となりますが、使用するかどうかは任意です。

 

 

設定するには、まずTHE THORメニューの「共通エリア設定」、「ヘッダーボトムエリア設定」を選択します。

 

ヘッダー検索窓の表示設定

 

ヘッダー検索窓

ヘッダー検索窓を表示するかどうかを選択します。

「非表示」を選択すれば、「注目キーワード」を含めたヘッダー検索窓全体が表示されません。

注目キーワード

「注目キーワード」を表示するかどうか選択します。

また、「注目キーワード」のタイトルを設定します。リンクはありません。

背景色

この枠の背景色を指定します。

ヘッダーお知らせ部分の設定

流れるテロップのように、流れるお知らせ表示が設定できます。

 

ヘッダーお知らせ

ヘッダーお知らせを表示するかどうか選択します。表示にすれば、お知らせ文章など設定しない場合でも枠は確保されます。

お知らせを表示する文章

お知らせする文章を設定します。

リンク先URL

お知らせ表示する文章にリンクを設定できます。

背景色

ヘッダーの背景色を好きな色に指定できます。

今回は以上で終了です。お疲れさまでした。

コメント

タイトルとURLをコピーしました