Luxeritas(ルクセリタス)のナビメニューを設定をしよう！【ヘッダーナビ(グローバルナビ) 編】
なんやそれ、カーナビみたいなもんか？
ということで、今回はLuxeritasのカスタマイズ機能を使ってヘッダーナビの設定をしてみたいと思います。
ヘッダーナビ(グローバルナビ) 機能
① グローバルナビ表示
グローバルナビの表示を設定する機能。なお非表示の場合、以下の設定は反映されません。
【 例：非表示の場合 】
② グローバルナビの位置
グローバルナビの表示位置を設定します。
【 上部 】
ナビをヘッダー上部に表示する。
【 下部 】
ナビをヘッダー下部に表示する。
③ モバイルメニューの種類
モバイル表示時のメニューの種類を設定します。
【 豪華バージョン 】
【 グローバルナビのみ 】
④ モバイルメニューの開閉方法
モバイル表示時のメニューの展開方法を設定します。
【 親と子を個別に開閉 】
親メニューのみを開き、子メニューはそのまま表示。
【 一度に全開閉 】
親・子メニューを全開閉し表示。
⑤ スクロール固定
画面スクロール時のグローバルナビの表示について設定します。
【 スクロール固定しない 】
グローバルナビを固定表示しない。
【 スクロール固定 】
小デバイス、PCサイズともにグローバルナビを固定表示する。
【 小デバイスだけスクロール固定 】
小デバイスで表示の場合のみグローバルナビを固定表示する。
【 PCサイズだけスクロール固定 】
PCサイズで表示の場合のみグローバルナビを固定表示する。
● スクロール固定時の影の濃さ
固定表示された時の影の濃淡について設定します。(例：影最大の場合)
● スクロール固定で半透明にする
固定表示された時のナビを半透明にする機能。(例：ナビ半透明)
● 上スクロールの時だけ表示
上へスクロールした場合のみグローバルナビを固定表示する機能。
⑥ 横幅の大きさ
グローバルナビのサイズ(横幅)を設定します。
【 横幅を自動リサイズ 】
【 横幅を自動リサイズ(幅いっぱい) 】
【 全て同じ幅 】
● 中央揃え
ナビの表示位置を中央に寄せる機能。
● 区切り線を付ける
項目ごとに区切り線を付ける機能。
【 なし 】
【 区切り線を付ける 】
【 両端を含めて区切り線を付ける 】
⑦ ヘッダーナビの色設定
● ナビ文字色
通常時の文字色を設定します。
● ナビバー背景色
通常時のバー背景色を設定します。
● ナビ背景色
通常時のボタン背景色を設定します。
● ナビリンクホバー文字色
ボタンホバー時(マウス等)の文字色を設定します。
● ナビリンクホバー背景色
ボタンホバー時(マウス等)のボタン背景色を設定します。
● ナビカレント文字色
ページ選択中の文字色を設定します。(例：サイトマップボタンを押し、サイトマップページが表示されている時のナビ表示)
● ナビカレント背景色
ページ選択中の背景色を設定します。
● ナビ上の線の色
ナビメニュー上の線の色を設定します。(例：赤色の場合)
● ナビ下の線の色
ナビメニュー下の線の色を設定します。(例：赤色の場合)
● 区切り線の色
ナビメニューの項目ごとの区切り線の色を設定します。(例：緑色の場合)
⑧ ヘッダーナビの枠線とパディング設定
● ナビ上の線の太さ ( px )
● ナビ下の線の太さ ( px )
● ナビ上下パディング ( px )
● ナビバー上下パディング ( px )
各ポイントのサイズを設定します。場所は以下画像のとおり。
ヘッダーナビの設定を終えて…
パンピーなら死んでるで！
以上でヘッダーナビ(グローバルナビ)編のカスタマイズを終了します。
ではまた次回をお楽しみに！