ルクセリタスには「ヘッダーにグローバルナビメニュー」と「ヘッダー上の帯状メニュー」の２つがあります。
メニューの作成は２か所から可能です。
- ルクセリタスのカスタマイザー「外観」→「カスタマイズ」→「メニュー」
- 「外観」→「メニュー」
今回は「ヘッダーの上の帯状メニュー」の設定方法です。
ヘッダー上の帯状メニュー特徴
サイトの右上に細く小さく出るメニューです。
ページをスクロールしても固定表示する事も出来ます。
検索ボックスを表示出来ます。
SNSリンクを簡単に設置できる機能があり、自作したメニュー＋SNSリンクの構造になります。（SNSリンクはアイコンでも表示可能）
SNSリンクのみのメニューにする場合は、新たなメニューを作成する必要はなく、カスタマイザーからの設定のみで可能です。
自作メニュー部分を作る
外観→メニューから作成
メニューの作成はルクセリタスのカスタマイザーからも行えますが、「外観」→「メニュー」で作成・編集する事も可能です。
こちらの方が使いやすい為、先にメニューはそちらから作成しておいて、ルクセリタスのカスタマイザーからグローバルナビ設定と詳細設定を行うのがお勧めです。
「外観」→「メニュー」から作成・編集する場合は以下をご覧ください。
ワードプレスWordPressのメニュー作成方法（グローバルナビ 他）
メニューの表示位置・表示可能数やデザインなどは、テーマにより異なりますが、すべてのメニューは同様の方法で作成できます。 メニューの作り方 「外観」→「メニュー」を開きます。 既に作成済みのメニューやデフォルトで用意されたメニューがあれば表...
作成したメニューは「メニューの位置」設定で「ヘッダーの上の帯状メニュー」にチェックを入れて保存します。
ルクセリタスカスタマイザーからのメニュー作成は以下をご覧ください。
設定方法
「外観」→「カスタマイズ」でルクセリタスカスタマイザーを開きます。
「ヘッダー上の帯状メニュー」を選択します。
「ヘッダーの上に帯状メニューを表示」にチェックを入れます。
「帯状メニューを固定表示にする」にチェックを入れる事で、ページスクロールしてもブラウザ上部に固定する事が出来ます。
色・線の設定
- 帯状メニューの高さ
- 帯状メニュー文字色
- 帯状メニューリンクホバー文字色
- 帯状メニュー背景色
- 帯状メニューの下線の色
- 帯状メニューの下線の太さ
検索ボックスの表示・色設定
「検索ボックスの表示」にチェックを入れるだけで以下のように帯状メニューの右端にサイト内検索用のボックスが表示出来ます。
- 検索ボックス表示
- 検索ボックス文字色
- 検索ボックス背景色
- 検索ボックス背景透過
SNSフォローボタン表示
「アイコンのみ」か「アイコン＋文字」を選択します。
アイコンのみですべて出した例
- フォローボタンの表示方法
- アイコンのみ or アイコン + SNS名
- フォローボタンをカラーにする
フォローボタンは１０種類
- Twitter ID
- Facebook ID
- Instagram ID
- Pinterest ID
- はてブ ID
- Youtube ID
- Youtube ID ( old )
- LINE ID
- RSS ボタン表示
- Feedly ボタン表示
必要なSNSにチェックを入れ、IDを入力します。
以上で完了です。
カスタマイズ
当サイトではアイコンフォントを使ったシンプルなメニューにカスタマイズしています。
この方法は以下をご覧ください。
ルクセリタスのヘッダー帯状メニューにアイコンフォントを使ってカスタマイズ
Luxelitasのヘッダー上の帯状メニューの設定方法と、表示のカスタマイズ方法を解説していきます。 「帯状メニュー」は、通常のカスタマイザーからの設定＋メニューの編集で設定できます。 今回のカスタマイズは、メニュー編集からのカテゴリーなど...