「ヘッダー」とヘッダーメッセージの設定

ロゴやメニューを表示する「ヘッダー」のほか、ヘッダーメッセージ・ドロワーメニュー・メガメニューについても当記事で解説します。

ヘッダーは「このサイトの名前やロゴ、どんなぺージがあるのか（メニュー）」を表現するとても重要なパーツです。

設定できる内容

設定箇所

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

ヘッダーメッセージ

サイトの全ページの最上部に表示されます。タイムリーなお知らせや重要な告知のほか、LPへの導線としても利用いただけます。

設定すると次のように表示されます。

設定項目は以下のとおり。とてもシンプルです。

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

ヘッダーバー

ロゴやメニューを表示します。「横書き」選択時は検索フォームと言語ボタンを表示できます。

言語ボタンは以下のようなUIで設定できます。別途作成した他言語サイトへの導線としてご活用ください。

テーマには「翻訳機能」「多言語サイトの作成機能」は搭載されておりません。
ZENの英語版サイトは別ドメインで作成しています。

ドロワーメニュー

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

設定項目はこちら。

メガメニュー

「記事カルーセル」「バナーリスト」のメガメニューを表示できます。実際の表示は当デモサイトの「季節の行事」「取扱説明書」にマウスカーソルをあわせて確認してみてください。

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

以下の3ステップで設定できます。順序は入れ替わっても大丈夫です。

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

1. カラーの設定

まずはメガメニューのカラーを設定しましょう。「記事カルーセル」「バナーリスト」両方に適用されます。

2. 表示する内容の設定

TCDテーマ > ヘッダー > メガメニューで「記事カルーセル」「バナーリスト」の表示内容を設定します。それぞれの設定項目は以下のようになっています。

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

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

ヘッダーの設定が完了したら、PC・スマホから以下のポイントを確認しておきましょう。

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

ロゴがぼやけている場合は、大きいサイズの画像を設定して、高さを調整してください。
ヘッダーバーでやってはいけないことを以下の記事でまとめています。

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

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