ルクセリタスでヘッダーナビ(グローバルナビ)をカスタマイズする

CSS, メニュー

こんにちは!
今日はサイトのヘッダー辺りに配置されるグローバルナビのカスタマイズについてご案内します!
ルクセリタスなら、外観のカスタマイズで選択したり色を選んだりするだけで、簡単に変更することが可能です!
では、始めてみましょう!

グローバルナビをカスタマイズする

デフォルトのデザイン

グローバルナビキャプチャ画面

区切り線を入れて同じ幅にする

グローバルナビキャプチャ画面2
開く「外観」「カスタマイズ」「ヘッダーナビ(グローバルナビ)」

  • 横幅の大きさ→ すべて同じ幅
  • 中央揃え→ ☑
  • 区切り線を付ける→ 区切り線を付ける

ナビゲーションの色を変える

グローバルナビキャプチャ画面
開く「外観」「カスタマイズ」「ヘッダーナビ(グローバルナビ)」

  • ナビ文字色→ #ffffff
  • ナビバー背景色→ #1e73be
  • ナビ背景色→ #1e73be
  • ナビカレント背景色→ #116ebf

上記の箇所以外も、ライブプレビューを見ながら、自由に色を変えたりサイズを変えたりして好みのデザインにしてくださいね!

ナビゲーションの高さを変える

グローバルナビキャプチャ画面
開く「外観」「カスタマイズ」「ヘッダーナビ(グローバルナビ)」

  • ナビ上下パディング(px)→ 8px(好みの高さに)

CSSを編集してカスタマイズする

区切り線にくぼみをつける

Header navigation separator line

CSS子テーマのスタイルシートに追記する

#gnavi div > ul > li > a {
	border-left: 1px solid #5aaaf0; /* ヘッダーカラーに合わせて変更 */
	box-shadow: -1px 0px 0px #1e73be; /* ヘッダーカラーに合わせて変更 */
}
#gnavi div > ul > li:first-child > a{
	border-left: none;
	box-shadow: none;
}
#gnavi li li span {
    border-bottom: 1px solid #5aaaf0; /* ヘッダーカラーに合わせて変更 */
	box-shadow: 0px 0px 2px #1e73be; /* ヘッダーカラーに合わせて変更 */
}

ヘッダーナビの下に影をつける

Shadow of Header Navi

CSS子テーマのスタイルシートに追記する

/* Header Naviの影 */
#nav {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .30);
}

カスタマイザーに用意されたアニメーションをつける

開く「外観」「カスタマイズ」「アニメーション」 ヘッダーナビ(グローバルナビ)

「上方移動」にチェックを入れる

Animation of Header Navi

自分でアニメーションをつける

Header Navi

CSS子テーマのスタイルシートに追記する

/* Header Navi Animation */
#gnavi li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 3px solid #fff;
	transition: 0.4s;
}
#gnavi li a:hover:after {
	width: 100%;
}

メニュー構造を変更する

グローバルナビに表示させるメニュー構造を見直す

サイトのコンテンツに合わせて自由に組み合わせましょう。

サンプルです

Global navi menu

あとがき

見よう見まねでWordPressを使い始めた頃、メニューってなんぞい?どうやって使うん?と、かなりとっつきにくいものでした。
でも今は、ほほぉ~そんな風にも使えたか!と感心しております。
ルクセリタスなら、孫構造まで表示できるのでバリエーションが広がりますね!

関連帯状メニューのプチカスタマイズはこちらでどうぞ

1

使い方

Posted by どらみ