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

使い方

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

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

デフォルトのデザイン

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

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

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

「外観」→「カスタマイズ」→「ヘッダーナビ(グローバルナビ)」を開く

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

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

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

「外観」→「カスタマイズ」→「ヘッダーナビ(グローバルナビ)」を開く

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

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

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

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

「外観」→「カスタマイズ」→「ヘッダーナビ(グローバルナビ)」を開く

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

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

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

Header navigation separator line

#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

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

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

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ