ヘッダーメッセージやヘッダーエリアを設定しよう

GRAVITYのヘッダーまわりの設定についてご紹介します。

ヘッダーには、サイトロゴやメニューだけでなく、ヘッダーメッセージやメガメニューを表示できます。

サイトの下層ページへのリンクや、問い合わせに繋がる導線となる重要なパーツです。正確に設定しておきましょう。

設定箇所

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

用意されているオプション

↓項目をクリックして詳しい設定を確認できます。

ヘッダーメッセージ

サイトの全ページの最上部に表示され、目立たせたいリンクに最適です。タイムリーにお知らせしたいことや重要な告知のほか、LPへの導線としても活用できます。

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

以下の項目を設定可能です。

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

ヘッダーバー

ロゴやメニューといった一般的な内容だけでなく、「店舗情報」も表示できます。

以下の項目を設定できます。

メガメニュー

「記事カルーセル」「バナーリスト」のメガメニューを表示できます。

メガメニューとは
従来のテキストメインのナビゲーションよりも多くの情報をひと目でわかりやすく表示できます。スペースを効率的に活用できるため、情報量の多いコーポレートサイトなどでよく利用されています。

メガメニューを表示する手順は以下の通りです。

1. メニュータイプを設定する
2. 表示する内容を設定する

1. メニュータイプを設定する

外観 > メニューの各メニュー項目の「メニュータイプ」で表示するメガメニューを選択します。

2. 表示する内容を設定する

TCDテーマ > ヘッダー > メガメニューで表示する内容を「記事カルーセル」「バナーリスト」それぞれ設定します。

記事カルーセルでは、表示する記事をカテゴリーやIDで指定可能です。

画像とテキスト、リンク先URLを登録してバナーリストを表示できます。

バナーリストを使って、自由に導線をつくってみてください。当デモサイトではこだわり条件でまとめた「物件タグアーカイブページ」へのリンクを設置しています。

すべて設定できたら、以下を確認しておきましょう。

• ヘッダーに表示されているロゴのサイズは意図したサイズ？
• 店舗情報の電話番号やリンク先は正しい？
• メニューの項目数は多すぎない？

ヘッダーバーでやってはいけないことは、こちらの記事にもまとめています。参考にチェックしてみてください。

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

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

チェックが済んだら次の設定に進みましょう。

フッターの設定に進む