• 管理画面【外観】>【カスタマイズ】>【Lightning ヘッダー設定】または、ヘッダー左の鉛筆マークをクリックすると直接編集セクションにジャンプします

様々なヘッダーレイアウトを選べます。また、スクロール時のグローバルナビの挙動とレイアウトを選べたり、ヘッダーを透過させたりなどもできます。

ヘッダー設定についてはこちらの動画でもご覧ください。

ヘッダーレイアウト

ヘッダーレイアウトは以下の5種類から選べます。

  • ナビゲーション回り込み
  • 中央揃え
  • タイトル中央&ナビ貫通
  • ヘッダーコンタクトあり&ナビ貫通
  • ヘッダーウィジェットあり&ナビ貫通
ナビゲーション回り込み
中央揃え
タイトル中央&ナビ貫通
ヘッダーコンタクトあり&ナビ貫通
ヘッダーウィジェットあり&ナビ貫通

ウィジェットエリアについて

「ヘッダーウィジェットあり&ナビ貫通」を選んだ場合、【外観】>【カスタマイズ】>【ウィジェット】【ヘッダー右側エリア】が表示されます。

  • この領域には テキストウィジェット / カスタムHTMLウィジェット / 固定ページ本文ウィジェット / バナーウィジェット などを配置する事を想定しています。
  • 内容に応じてCSSによるデザイン指定が別途が必要です。モバイル時に表示にする場合は、「外観 > カスタマイズ」画面の「追加CSS」パネルなどに以下を記載してください。(※CSSの書き方はサポート対象外です。)
@media (max-width: 991px){
.site-header-sub { display:block; }
}

グローバルナビスクロール時のレイアウト

ページをスクロールした時のグローバルナビをページトップに固定するかどうか、またその際のレイアウトを以下より選択することができます。

  • 固定しない
  • 固定 ナビ中央揃え
  • 固定 ナビコンテナ幅
  • 固定 ロゴ&ナビ回り込み
  • 固定 ロゴ&ナビ回り込み全幅
  • 固定しない あるいは その他のレイアウトに切り替えた場合は、一度保存して再読み込みしないと反映されません。
  • ナビ回り込み を選択した場合は、ナビゲーションがロゴを覆わないように、必要に応じてナビゲーションの数と文字の数を調整してください。

スクロール時のロゴ

未設定の場合はヘッダーロゴが反映されます。設定する場合は、ヘッダーロゴと同じサイズの画像にしてください。

ヘッダーカラー

ヘッダー 背景色 / グローバルナビ背景色の 設定ができます。
「グローバルナビの上部に線を追加する」にチェックを入れると、キーカラーの線が追加されます。

ヘッダー透過

ヘッダー部分を透過させて、トップページのスライドやビジュアルを印象的に見せることができます。また、トップページだけでなく、固定ページでもヘッダーの透過を有効にするかどうか個別に設定することができるので、ページ毎に設定が可能です。

「ヘッダーの透過を有効にする」にチェックを入れるとヘッダー部分が透過になります。ヘッダーを透過にした場合、ヘッダーの下にあったコンテンツはヘッダーの下に埋まります。

透過時 ヘッダー背景色 / テキストカラー / ヘッダー透過度 / ヘッダー上部透過度/ ヘッダーロゴ画像 をそれぞれ設定できます。