Luxeritas(ルクセリタス)でメニュー（グローバルナビ）を一から作ってみよう！

無料WordpressのLuxeritas(ルクセリタス)のメニューの作り方。メニューは、画面の非常に重要な部分です。

悩む女性１

実際に作ろうと思っても、どのようにメニューを作ったら良いのかわからない方

そんな悩みを持たれる方も多いのではないでしょうか？

管理者

そこで、メニューの枠線や背景色等の作り方をもっと詳しく徹底的に解説していきましょう。

Luxeritasのメニューの表示方法について

Luxeritas(ルクセリタス)では、一般的に言われるメニューバーのことを「グローバルナビ」や「ヘッダーナビ」という言い方で表現することもありますので、覚えておきましょう。

まずはメニューをどのように表示したらよいのか、まずは表示の仕方から解説していきましょう。

メニューを表示するための項目を作ってみよう！

一番最初にすることは、まずメニューを表示するための、項目づくりからです。項目内容が決まっていなくては、何も始まらないですよね。

管理者

あなたは、どんな項目を作りたいですか？その項目名を決定したら、まずは「固定ページ」もしくは「カテゴリー」を登録していきましょう。

最初のうちは、固定ページを作ってメニューの表示を試していきましょう！その方が設定しやすいです。

但しこれだけでは、ただ固定ページやカテゴリーに項目を登録しているだけで、何もサイトには表示されません。

作った項目をメニューに表示してみよう！

そこで、せっかく作った「固定ページ」や「カテゴリー」をメニューに表示していく作業をしていきましょう。

まずは、メニューの表示については、下記の方法で行っていきましょう。

１．メニューの作り方・設定方法

まずは、メニューを選択しましょう。

このメニューから、実際のメニュー画面（グローバルナビ）を設定することができます。それでは、メニューの使い方を見ていきましょう。

２．固定ページを挿入する目的について

固定ページは、そのキーワードの主軸となる内容を冒頭で記載するために用いるのが一般的です。

メニュー画面を開いた上記左上の「1」が固定ページを挿入する項目です。自分がメニューに追加したい固定ページを選択し、ドラッグ＆ドロップで「3」のメニュー項目部分に追加しましょう。

３．カテゴリーページを挿入する目的について

カテゴリーページは、カテゴリー別に投稿記事を表示するのに利用されます。

続いて、メニュー画面の左下「２」がカテゴリーページを挿入するための項目です。

自分がメニューに追加したいカテゴリーページを選択して、ドラッグ＆ドロップで「3」のメニュー項目部分に追加しましょう。

このように、追加していった項目が「3」になります。３と下のメニューの並びを見比べて見て下さい。・・・・

実際のメニュー画面（グローバルナビ）

実際にきちんと表示されているか確認しておきましょう。

上記のように表示されていることが確認できればOKです。

段差をつけた階層分けの設定方法について

続いて、上の「３」をご覧ください。

３はよく見ると項目に段差あるのは、お分かり頂けましたでしょうか？

管理者

メニューの項目に段差をつけることで、さらにキーワードの分類を細かくすることが可能です。

例えば、SEO対策という項目の下は、一つ段差が下がって、副項目として、「SEO対策」や「サーチコンソールの使い方」、「無料SEO対策」等があることがわかります。これが、実際の画面では、上記のように表示されます。

こうして主項目と副項目、さらに階層を下げて表示することもできます。

メニューをカテゴリー別に分けて表示する方法

続いて、メニューをカテゴリー別に表示する方法をご紹介していきましょう。

すると、下記図のように、サーチコンソールの使い方」にカテゴリー分けした内容の投稿記事だけが表示されるようになりました。

このように、「２」のカテゴリー項目を使ってメニューを表示することで、カテゴリー別に投稿記事を表示することができるのです。

メニューを作るカスタマイズ（外観）の設定項目について

続いて、メニューの外観を作っていきましょう。

外観は、いわゆる色を付けたり、枠線をつけることで見栄えをよくするための設定になります。設定は下記の位置に存在します。

Luxeritas(ルクセリタス)には、「カスタマイズ（外観）」という設定項目があります。この項目の中に、画面設計をするための項目が入っています。

そこで、この「カスタマイズ（外観）」の背景色や枠線等細かな部分の外観設定を行うことでメニューの見栄えを改善することができます。

それでは、実際に背景色や枠線の付け方を見ていきましょう。

メニュー（グローバルナビ）の表示有無

１の部分で、メニューを表示するかしないかを設定することもできますし、またヘッダーの上もしくは下のどちらかにも設定することができます。

スクロール固定の仕方

2のスクロール固定をしたり、また固定をしないように設定することができます。

メニュー項目の中央揃えと区切り線の付け方

3では、メニューを左寄せや中央揃いに設定することができ、またメニューの項目の間に区切り線を付けることができます。

またこちら３の項目には、「横幅の大きさ」という項目があります。こちらの項目では、メニューを「横幅いっぱい」に設定することができます。

を選択することで、メニューが横まで広がりますので、必要に応じて設定してみましょう。

メニューの背景色と枠線の付け方について

続いて、メニューの背景色の付け方を解説していきましょう。まず背景色は、下記の部分によって色の付け方が異なります。

４では、枠線色の関しても設定することができますが、その太さを設定することはできません。枠線の太さに関しては、５のパティングで設定しましょう。

メニュー幅や枠線の太さの設定

５では、メニュー枠線上下の太さを設定することができますので、まずこの太さを調整することで、メニューでインパクトを与えることができます。

またナビバーの上下のパティングでは、要は、メニューの上下の幅を広げることができます。

まとめ

このように、一つ一つの項目を設定するには、様々な項目の設定がどこにあるのかを覚える必要性があります。

特にLuxeritas(ルクセリタス）は、設定項目数が多い上に、設定項目位置がわかりづらい位置に配置されているため、どこにその設定項目があるのかを探すのに非常に時間がかかります。

メニューを作る際も同様にわかりづらい位置に設定があるので、こちらを参考にしながら設定を覚えていきましょう。