Luxeritas(ルクセリタス)のナビメニューを設定をしよう!【ヘッダーナビ(グローバルナビ) 編】

2018年10月6日ブログ管理Luxeritas, Luxeritasカスタマイズ, ブログ管理, ヘッダーナビ, 初心者

ヘッダーナビヘッダー

トリ師匠
トリ師匠
今日はブログの上んとこに表示されてるヘッダーナビをイジってみるで。
ぐず夫
ぐず夫
ヘッダーナビ?
なんやそれ、カーナビみたいなもんか?
トリ師匠
トリ師匠
ブログの上に並んどるメニューみたいなやつじゃ。早速設定してみるで。

ということで、今回はLuxeritasのカスタマイズ機能を使ってヘッダーナビの設定をしてみたいと思います。

ヘッダーナビ(グローバルナビ) 機能

ヘッダーナビ選択

トリ師匠
トリ師匠
ブログの上に並んでるメニューみたいなのを「ヘッダーナビ」と呼んどる。この部分の見栄えを設定するメニューやな。じゃ「ヘッダーナビ(グローバルナビ)」を選択するで!

① グローバルナビ表示

グローバルナビの表示を設定する機能。なお非表示の場合、以下の設定は反映されません

【 例:非表示の場合 】

ナビなし

 

② グローバルナビの位置

グローバルナビの表示位置を設定します。

【 上部 】
ナビをヘッダー上部に表示する。

ナビ上部表示

【 下部 】
ナビをヘッダー下部に表示する。

ナビ下部表示

 

③ モバイルメニューの種類

モバイル表示時のメニューの種類を設定します。

【 豪華バージョン 】

豪華バージョン

【 グローバルナビのみ 】

ナビのみ

 

④ モバイルメニューの開閉方法

モバイル表示時のメニューの展開方法を設定します。

【 親と子を個別に開閉 】
親メニューのみを開き、子メニューはそのまま表示。

個別表示

【 一度に全開閉 】
親・子メニューを全開閉し表示。

全開閉

 

⑤ スクロール固定

画面スクロール時のグローバルナビの表示について設定します。

【 スクロール固定しない 】
グローバルナビを固定表示しない。

【 スクロール固定 】
小デバイス、PCサイズともにグローバルナビを固定表示する。

【 小デバイスだけスクロール固定 】
小デバイスで表示の場合のみグローバルナビを固定表示する。

小デバイス固定

【 PCサイズだけスクロール固定 】
PCサイズで表示の場合のみグローバルナビを固定表示する。

PC固定

 

● スクロール固定時の影の濃さ
固定表示された時の影の濃淡について設定します。(例:影最大の場合)

ナビ表示濃淡

 

● スクロール固定で半透明にする
固定表示された時のナビを半透明にする機能。(例:ナビ半透明)

ナビ半透明

 

● 上スクロールの時だけ表示
上へスクロールした場合のみグローバルナビを固定表示する機能。

上スクロール時のみ表示

 

⑥ 横幅の大きさ

グローバルナビのサイズ(横幅)を設定します。

【 横幅を自動リサイズ 】

自動リサイズ

【 横幅を自動リサイズ(幅いっぱい) 】

自動リサイズ(幅いっぱい)

【 全て同じ幅 】

等分(幅いっぱい)

トリ師匠
トリ師匠
例の「全て同じ幅」みたいに文字がオーバーしてるとはみ出るからの。注意したってちょ

 

● 中央揃え
ナビの表示位置を中央に寄せる機能。

中央揃え

 

● 区切り線を付ける
項目ごとに区切り線を付ける機能。

【 なし 】

ラインなし

【 区切り線を付ける 】

区切り線を付ける

【 両端を含めて区切り線を付ける 】

区切り線を全て付ける

 

⑦ ヘッダーナビの色設定

● ナビ文字色
通常時の文字色を設定します。

通常時の文字色
文字色を黒に設定

 

● ナビバー背景色
通常時のバー背景色を設定します。

通常時のナビ背景色
ナビバー背景色を黄色に設定

 

● ナビ背景色
通常時のボタン背景色を設定します。

ナビ背景色
ナビ背景色を青色に設定

 

● ナビリンクホバー文字色
ボタンホバー時(マウス等)の文字色を設定します。

● ナビリンクホバー背景色
ボタンホバー時(マウス等)のボタン背景色を設定します。

ホバー時
ナビリンクホバー文字色を白、背景色を青に設定

 

● ナビカレント文字色
ページ選択中の文字色を設定します。(例:サイトマップボタンを押し、サイトマップページが表示されている時のナビ表示)

● ナビカレント背景色
ページ選択中の背景色を設定します。

ナビカレント時
ナビカレント文字色を白、背景色を緑に設定

 

● ナビ上の線の色
ナビメニュー上の線の色を設定します。(例:赤色の場合)

ナビ上線の色

 

● ナビ下の線の色
ナビメニュー下の線の色を設定します。(例:赤色の場合)

ナビ下線の色

 

● 区切り線の色
ナビメニューの項目ごとの区切り線の色を設定します。(例:緑色の場合)

ナビ区切り線の色

 

⑧ ヘッダーナビの枠線とパディング設定

● ナビ上の線の太さ ( px )
● ナビ下の線の太さ ( px )
● ナビ上下パディング ( px )
● ナビバー上下パディング ( px )

各ポイントのサイズを設定します。場所は以下画像のとおり。

各ポイントの説明

 

ヘッダーナビの設定を終えて…

ぐず夫
ぐず夫
グロッキーや、8ラウンド終えたボクサーの気分や…
トリ師匠
トリ師匠
もう8ラウンドやるかの?
ぐず夫
ぐず夫
無茶言うなや!
トリ師匠
トリ師匠
へ~。

以上でヘッダーナビ(グローバルナビ)編のカスタマイズを終了します。

ではまた次回をお楽しみに!