デモサイト https://wsp-demo05.hp1.work/ で実物をご覧いただけます。

グローバルナビの仕様について

このページで説明されているサイトヘッダーをお使いになる場合、下記の範囲内でグローバルナビのメニューを作成していただくようお願いいたします。

  • メニューの数は最大5つまで
  • メニューの項目の文字数は最大6文字まで
  • 最後の2つのメニュー以外にアイコンや説明をつけることはできません。

この範囲を超えるとレイアウトがくずれる可能性があります。ご了承ください。

上記は最上位のメニューについての制約事項です。サブメニューにはこの制約はありません。

  • ヘッダーに背景色を設定してあります。
    ※背景色に合うヘッダーロゴ画像をご用意いただく必要があります。
  • グローバルナビの最後のメニュー2つを目立たせています。

ページ先頭を表示しているとき

キーカラー #1e73be カスタムカラー 1#dd3333

ページ先頭を表示しているとき

以下の部分の色は キーカラー になっています。

  • ヘッダー背景色
  • 最後から2番目のメニューのアイコンとテキスト (最後から2番目のメニューの背景色は白です)

以下の部分の色は カスタムカラー 1 になっています。

  • 最後のメニューの背景色

マウスホバー効果を設定してあります。

スクロール時

スクロール時にヘッダーロゴ画像は表示されません。

スクロール時

バリエーション(1)

すべてのメニュー項目にアイコンをつけることもできます。

バリエーション(1)
ページ先頭を表示しているとき
バリエーション(1)
スクロール時

バリエーション(2)

すべてのメニュー項目にアイコンをつけないシンプルなデザインにもできます。

バリエーション(2)
ページ先頭を表示しているとき
バリエーション(2)
スクロール時

バリエーション(3)

キーカラー #d90b91 カスタムカラー 1#a6034f

すべてのメニュー項目にアイコンと英語表記をつけるデザインにもできます。

バリエーション(3)
ページ先頭を表示しているとき
バリエーション(3)
スクロール時

バリエーション(4)

キーカラー #d90b91 カスタムカラー 1#a6034f

アイコンなしで、テキストと英語表記のデザインにもできます。

バリエーション(4)
ページ先頭を表示しているとき
バリエーション(4)
スクロール時