ヘッダー

ヘッダーは「サイトの名前（ロゴ）、どんなぺージがあるのか（メニュー）」を表現するとても重要なパーツです。ヘッダーメッセージ・メガメニューについても当記事で解説しています。

■■■■■■■■■■ヘッダーがどれのことか示すフロント画像

設定できる内容

設定箇所

ダッシュボード内のTCDテーマ > ヘッダーで設定します。

■■■■■■■■■■TO＞ヘッダーの場所を示す画像

ヘッダーメッセージ

サイト内の最上部に表示され、（固定ページLPでは個別に設定可）タイムリーなお知らせや重要な告知はもちろん、LPへの導線としても使えます。

■■■■■■■■■■ヘッダーメッセージがどれか示すフロント画像

以下の設定項目を埋めるだけで、かんたんに設定・更新可能です。

• 表示/非表示
• メッセージ
• リンク先URL
• 文字色
• 背景色

ヘッダーバー

■■■■■■■■■■TO＞ヘッダー＞ヘッダーバーを展開した画像

各設定項目の解説です。

ドロワーメニュー

■■■■■■■■■■TO＞ヘッダー＞ドロワーメニューを展開した画像

スマホ閲覧時の画面右上「≡」アイコン（ハンバーガーメニューと呼びます）をタップすると展開される画面を「ドロワーメニュー」といいます。

設定項目はこちら。

メガメニュー

「記事カルーセル」「バナースライダー」「カテゴリーリスト」のメガメニューを用意しました。当デモサイトの■■■■■■■■■■（デモサイトで使ってるメガメニューのメニューラベルを入れる）をホバーすると実際の表示を確認できます。

メガメニューとは
通常のドロップダウン表示と比べて、多くの情報をわかりやすく表示できます。たとえば、画像が表示されていることでリンク先の内容を視覚的に表現できます。

以下の3ステップで設定できます。順序は入れ替わっても問題ありません。

1. カラーの設定
2. 表示する内容の設定
3. メニュータイプの設定

1. カラーの設定

TCDテーマ > ヘッダー > メガメニューでメニュー背景色を「ライトカラー」「ダークカラー」から選択します。ドロップダウンメニューにも適用されます。

■■■■■■■■■■TOヘッダー＞メガメニューの「カラー」箇所の画像

2. 表示する内容の設定

TCDテーマ > ヘッダー > メガメニューで「記事カルーセル」「バナースライダー」「カテゴリー記事一覧」の表示内容を設定します。

■■■■■■■■■■記事カルーセルの設定画面の画像

■■■■■■■■■■バナースライダーの設定画面の画像（一番上のアイテム展開する）

■■■■■■■■■■カテゴリー記事一覧の設定画面の画像

3. メニュータイプの設定

外観 > メニューで「グローバルメニュー」を開きます。メガメニューとして表示したいメニュー項目の「メニュータイプ」を変更します。

■■■■■■■■■■外観＞メニューで、メニュー項目を展開して「メニュータイプ」を赤枠でフォーカスした画像

設定が済んだら、必ずPC・スマホそれぞれで表示を確認しましょう。

• ロゴはぼやけず表示されている？　→ロゴ設定
• メニュー項目は適切な数・ラベルになっている？
• メガメニューは意図したように表示されている？

ヘッダーバーをきれいに表示するコツを以下の記事にまとめています。ぜひ参考にしてください。

TCDテーマのヘッダーバーでやってはいけないこと5選 – ワードプレステーマTCD

サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。