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

2019年7月27日

無料WordpressのLuxeritas(ルクセリタス)のメニューの作り方。メニューは、画面の非常に重要な部分です。実際に作ろうと思っても、どのようにメニューを作ったら良いのかわからない方も多いのでは?

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

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

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

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

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

・「固定ページ」もしくは「カテゴリー」の登録をしよう!

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

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

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

 

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

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

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

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

 

<メニューの作り方>

メニュー:「外観」⇒「メニュー」 を選択

まずは、このメニューを選択しましょう。このメニューから、実際のメニュー画面(グローバルナビ)を設定することができます。

それでは、メニューの使い方を見ていきましょう。

<メニューの使い方>

  1. 固定ページ(1)を選択し、メニュー(3)にドラッグ&ドロップで挿入する
  2. カテゴリーページ(2)を選択追加し、メニュー(3)にドラッグ&ドロップで挿入する

<固定ページを挿入する目的>

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

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

 

<カテゴリーページを挿入する目的>

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

続いて、メニュー画面の左下「2」がカテゴリーページを挿入するための項目です。自分がメニューに追加したいカテゴリーページを選択して、ドラッグ&ドロップで「3」のメニュー項目部分に追加しましょう。

このように、追加していった項目が「3」になります。

 

3と下のメニューの並びを見比べて見て下さい。・・・・

<実際のメニュー画面(グローバルナビ)>

同じようになっていることがわかればOKです。

 

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

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

3はよく見ると項目に段差あるのは、お分かり頂けるだろうか?メニューの項目に段差をつけることで、さらにキーワードの分類を細かくすることが可能です。

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

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

 

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

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

ポイント:メニューの「2」をメニュー「3」にドラッグ&ドロップして追加する

それでは、その中で「サーチコンソールの使い方」というカテゴリーを付けたものを選択します。

 

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

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

 

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

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

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

設定は下記の位置に存在します。

枠線や背景色の変更位置:「Luxeritas」⇒「カスタマイズ(外観)」⇒「グローバルナビ」

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

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

<メニュー(グローバルナビ)の設定項目内容>

  1. メニューの表示有無とヘッダー上下の配置設定
  2. スクロール固定設定
  3. メニュー項目の区切り線(縦線)の設定
  4. メニューの背景色と枠線色の設定
  5. メニューの幅や太さの設定

 

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

メニュー(グローバルナビ)の表示有無

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

 

スクロール固定の仕方

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

 

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

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

 

またこちら3の項目には、「横幅の大きさ」という項目があります。

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

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

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

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

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

  • ナビバー   :メニュー両サイド
  • ナビ     :メニュー項目
  • ナビカレント :現在選択している項目部分

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

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

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

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

 

まとめ

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

そのためには、まずLuxeritas(ルクセリタス)には、どこにどんな設定があるのか覚える必要性があります。

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

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

⇒無料SEO対策におすすめ!