ルクセリタスのグローバルナビメニュー作成・設定方法~カスタマイズ

2019-05-15使い方

 

ルクセリタスには「グローバルナビメニュー」と「ヘッダー上の帯状メニュー」の2つがあります。

メニューの作成は2か所から可能です。

  • ルクセリタスのカスタマイザー「外観」→「カスタマイズ」→「メニュー」
  • 「外観」→「メニュー」

 

今回は、サイトのメインメニューとなる「グローバルナビ」の設定方法です。

 

7237_01

 

グローバルナビメニューを作る

 

外観→メニューから作成

メニューの作成はルクセリタスのカスタマイザーからも行えますが、「外観」→「メニュー」で作成・編集する事も可能です。

こちらの方が使いやすい為、先にメニューはそちらから作成しておいて、ルクセリタスのカスタマイザーからグローバルナビ設定と詳細設定を行うのがお勧めです。

 

「外観」→「メニュー」から作成・編集する場合は以下をご覧ください。

 

上記方法でメニューを作成した場合は、以下の「ルクセリタスカスタマイザーから作成する場合」の項を飛ばして デザインの変更 へお進み下さい。

 

ルクセリタスカスタマイザーから作成する場合

新規作成

 「外観」→「カスタマイズ」を開きます。

6894_11

 

 「メニュー」を選択します。

 

7188_12

 

 「メニューを新規作成」ボタン

 

7188_13

 

 わかりやすい名前を付け「グローバルナビ」にチェックを入れて「次へ」ボタン

 

7188_14

 

項目追加

 「項目を追加」ボタン

 

7188_15

 

 表示したい項目を「+」を押して追加

 

カスタムリンク、固定ページ、投稿、カテゴリーをそれぞれ開いて選択します。

7188_16

 

ラベル入力

 ラベルを入力

追加した項目の右上の▲を開いて編集できます。

7188_18

 

「Home」メニュー追加

メニューに「Home」などを追加したい際は、「カスタムリンク」で設定します。

7252_01

 

 

並べ替え

「並べ替え」ボタンを押し、並び順を変更できます。

7188_20

 

矢印マークを押して並べ替え「完了」を押します。

7188_19

 

副項目(親子)設定

 

 ドラッグ&ドロップで親にしたい項目の下で少しずらして配置します。

7237_02

 

7237_03

 

 最後に公開を押せば完了です。

 

7188_17

 

デザインの変更

 「外観」→「カスタマイズ」→「ヘッダーナビ」を選択します。

7188_31

 

色の設定

 

ナビバーの背景色、文字色、ホバー色、枠線の色や有無、余白の設定や、モバイル画面でのメニュー表示方法を選択し、見え方を確認できます。

 

 それぞれを好みの色に設定します。

7188_37

 

色の変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名 配色パターンサンプル

 

アニメーション設定

カーソルが載った際、「上方移動」するのアニメーション効果を選択可能です。

7237_06

 

 「Luxeritas」→「カスタマイズ」を開き「アニメーション」を選択します。

7237_04

 

7237_05

 

 

モバイルメニュー選択

画面サイズごとの確認は、カスタマイザーの左メニュー下にあるアイコンの選択で行います。

7188_32

 

7188_35

豪華バージョン

7188_33

 

 「Menu」展開例

7188_38

 

 Sidebar展開例

7188_36

 

 

グローバルナビ

ハンバーガーメニューで「メニュー」とだけ表示され、クリックすると展開します。

7188_34

 

 

カスタマイズ

 

ナビバーの右寄せ

以下のCSSで可能です。

/* ナビ右寄せ */ #gnavi ul {float: right;}

 

アイコンフォントを利用

7237_01

 

この方法は以下をご覧ください。

 

 

使い方

Posted by 綾糸