Luxeritas(ルクセリタス)のヘッダー上をイジってみよう!【ヘッダー上の帯状メニュー 編】

2018年10月8日ブログ管理Luxeritas, Luxeritasカスタマイズ, ブログ管理, 初心者, 帯状メニュー

帯状メニューヘッダー

トリ師匠
トリ師匠
暇そうやの。

ぐず夫
ぐず夫
暇ちゃうわ!
ワシはいつも気合入れてテレビ見てるんやどアホ!
トリ師匠
トリ師匠
(…暇の極みやないか)
今日はヘッダー上に表示させる帯メニューを設定するで。さっさと用意し。

ということで、今回はLuxeritasのカスタマイズ機能を使ってヘッダー上の帯状メニューの設定をしてみたいと思います。

ヘッダー上の帯状メニュー 機能

帯状メニュー選択

トリ師匠
トリ師匠
ヘッダーの上部分に置くLuxeritas特有の帯状メニューじゃ。便利じゃで設定してみるとサイトが華やかになるで! 早速「ヘッダー上の帯状メニュー」を選択するで!

 

① ヘッダーの上に帯状のメニューを表示

帯状メニューの表示を設定する機能。なお非表示の場合、以下の設定は無効となります。

【 帯状メニューが有効の場合… 】

帯状メニュー有効

トリ師匠
トリ師匠
ヘッダーの上に帯状メニューが表示されるで!

 

② ヘッダー上の帯状メニューを常に横幅いっぱいにする

帯状メニューの幅を選択します。

帯状メニュー全画面表示

トリ師匠
トリ師匠
「コンテナの最大幅」を超えた部分も帯状メニューになるで

◆「コンテナの最大幅」設定はこちらを参照!

③ 帯状メニューを固定表示にする

帯状メニューの固定表示を選択します。

帯状メニュー固定表示

 

④ 帯状メニューの外観

帯状メニューの見栄えを設定します。

● 帯状メニューの高さ(px)
帯状メニューの縦幅を設定します。

帯状メニュー幅

 

● 帯状メニュー文字色
● 帯状メニューリンクホバー文字色
● 帯状メニュー背景色

帯状メニューの文字色、触れた(マウス等)時の文字色、背景色を設定します。
(※背景色は緑色を設定)

  • 文字色(赤色)
    帯状メニュー文字色
  • ホバー時(青色)
    帯状メニューホバー時文字色

 

● 帯状メニューの下線の色
帯状メニューの下線の色を設定します。(例:赤線の場合…)

帯状メニュー下線カラー

 

● 帯状メニューの下線の太さ(px)
帯状メニューの下線の太さを設定します。(例:赤線の太さ設定をした場合…)

ラインの太さ

師匠のポイント!

下線太さの領域は「帯状メニューの高さ」内で設定されるで注意し。「帯状メニューの高さ」を30pxに設定しとる時に「下線の太さ」も30pxに設定したりすると、帯状メニュー全部が下線表示になるで!

⑤ 検索ボックス表示

● 検索ボックス文字色
● 検索ボックス背景色
● 検索ボックス背景透過

帯状メニューにブログの検索ボックスを表示させます。それぞれ検索ボックス内の文字色、背景色、透過率(透け感)を設定します。

  • 検索ボックスを表示
    検索ボックス
  • ボックス文字色(赤色)
    検索ボックス文字色
  • ボックス背景色(黒色)
    検索ボックス背景色
  • 背景色の透過率
    検索ボックス背景色の透過

 

⑥ フォローボタンの表示方法

グローバルナビのサイズ(横幅)を設定します。

  • 【 アイコン 】
    各SNSのアイコンだけを表示する
    アイコンのみ
  • 【 アイコン+SNS名 】
    各SNSのアイコンと名前を表示する。
    アイコンと名前

 

● フォローボタンをカラーにする
フォローボタンをカラー表示にする。

アイコンカラー表示

 

⑦ 各SNSフォローボタン&ID設定

各種SNSのフォローボタンとIDの設定をします。(例:全アイコンをカラー表示した場合…)

アイコン全表示

 

設定可能な項目は?
  • ・Twitter
    ・Facebook
    ・Instagram
    ・Pinterest
  • ・はてブ
    ・Google+
    ・Youtube
    ・LINE
トリ師匠
トリ師匠
みんながつこてるSNSのボタンとIDを設定してやるとええで。ぐず夫はツイッタ~のIDしか持ってへんで、あんまり意味ないのが残念じゃな。

 

● RSS ボタン表示
RSSの登録ボタンを表示します。

RSSのみ表示

トリ師匠
トリ師匠
RSSはブログを読んでくれとる人に通知できる一種の機能じゃの。説明は適当にここ(外部サイト)とかで読んでみてちょ。

 

● Feedly ボタン表示
Feedlyの登録ボタンを表示します。

feedlyのみ表示

トリ師匠
トリ師匠
これもRSSリーダーの一種でブログの更新通知が受け取れるツールの1つじゃの。説明はここ(外部サイト)なんかで読んでみて。

 

こんな使い方も…

例えばこんな表示例

トリ師匠
トリ師匠
帯状メニューにはグローバルナビのように「メニュー」を並べることも可能じゃ。グローバルナビを非表示にして帯状メニューに小さく表示させてやると、ヘッダーの空間もスッキリするで!
ぐず夫
ぐず夫
「メニュー」機能の使用法は、また後日別途説明するで!

 

ヘッダー上帯状メニューの設定を終えて…

ぐず夫
ぐず夫
これ、ワシ使ってへんけどええんか?
トリ師匠
トリ師匠
もすこしこのブログのヘッダーがオシャレで絵が小さければ使いたいとこじゃが、いかんせんダサくて狭いでの。泣く泣くつこてないだけじゃ。
ぐず夫
ぐず夫
なんやその言い草…
まるでワシがバカみたいやないか!
トリ師匠
トリ師匠
うん。せやで。
ぐず夫
ぐず夫
ムキー!

以上でヘッダー上の帯状メニュー編のカスタマイズを終了します。

ではまた次回をお楽しみに!