>> サイト内には広告が含まれます。プライバシーポリシーはこちら →
PR

ルクセリタス・ヘッダー上の帯状メニューの特徴と設定方法

ルクセリタス・使い方
この記事は約4分で読めます。
     

 

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

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

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

今回は「ヘッダーの上の帯状メニュー」の設定方法です。

 


 

ヘッダー上の帯状メニュー特徴

 

サイトの右上に細く小さく出るメニューです。

ページをスクロールしても固定表示する事も出来ます。

検索ボックスを表示出来ます。

SNSリンクを簡単に設置できる機能があり、自作したメニュー+SNSリンクの構造になります。(SNSリンクはアイコンでも表示可能)

7248_03

 

SNSリンクのみのメニューにする場合は、新たなメニューを作成する必要はなく、カスタマイザーからの設定のみで可能です。

 

 

自作メニュー部分を作る

 

外観→メニューから作成

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

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

 

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

ワードプレスWordPressのメニュー作成方法(グローバルナビ 他)
メニューの表示位置・表示可能数やデザインなどは、テーマにより異なりますが、すべてのメニューは同様の方法で作成できます。 メニューの作り方  「外観」→「メニュー」を開きます。 既に作成済みのメニューやデフォルトで用意されたメニューがあれば表...

 

作成したメニューは「メニューの位置」設定で「ヘッダーの上の帯状メニュー」にチェックを入れて保存します。

7248_11

 

ルクセリタスカスタマイザーからのメニュー作成は以下をご覧ください。

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

 

設定方法

 「外観」→「カスタマイズ」でルクセリタスカスタマイザーを開きます。

7188_04

 

 「ヘッダー上の帯状メニュー」を選択します。

 

7248_04

 

 「ヘッダーの上に帯状メニューを表示」にチェックを入れます。

 

7248_05

「帯状メニューを固定表示にする」にチェックを入れる事で、ページスクロールしてもブラウザ上部に固定する事が出来ます。

 

 

色・線の設定

  • 帯状メニューの高さ
  • 帯状メニュー文字色
  • 帯状メニューリンクホバー文字色
  • 帯状メニュー背景色
  • 帯状メニューの下線の色
  • 帯状メニューの下線の太さ

7248_06

 

検索ボックスの表示・色設定

「検索ボックスの表示」にチェックを入れるだけで以下のように帯状メニューの右端にサイト内検索用のボックスが表示出来ます。

7248_08

  • 検索ボックス表示
  • 検索ボックス文字色
  • 検索ボックス背景色
  • 検索ボックス背景透過

7248_07

 

SNSフォローボタン表示

「アイコンのみ」か「アイコン+文字」を選択します。

 

 アイコンのみですべて出した例

7248_10

  • フォローボタンの表示方法
  • アイコンのみ or アイコン + SNS名
  • フォローボタンをカラーにする
 フォローボタンは10種類
  • Twitter ID
  • Facebook ID
  • Instagram ID
  • Pinterest ID
  • はてブ ID
  • Youtube ID
  • Youtube ID ( old )
  • LINE ID
  • RSS ボタン表示
  • Feedly ボタン表示

 

 必要なSNSにチェックを入れ、IDを入力します。

7248_09

 

 

以上で完了です。

 

 

カスタマイズ

当サイトではアイコンフォントを使ったシンプルなメニューにカスタマイズしています。

7248_01

 

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

ルクセリタスのヘッダー帯状メニューにアイコンフォントを使ってカスタマイズ
Luxelitasのヘッダー上の帯状メニューの設定方法と、表示のカスタマイズ方法を解説していきます。 「帯状メニュー」は、通常のカスタマイザーからの設定+メニューの編集で設定できます。 今回のカスタマイズは、メニュー編集からのカテゴリーなど...

コメント

タイトルとURLをコピーしました