カスタマイズヘッダーの上の帯状のメニュー

Luxeritasのヘッダー上の帯状メニューを表示にチェック入れた画像

Luxeritasテーマを使用しているサイトでは、タイトル部分の上部に横長の領域を作成できます。デフォルトでは、RSSとFeedlyが挿入されています。この部分を編集していくことができます。
背景色をつけたり、RSSとFeedly以外の物を表示させたり、この領域全体を非表示にもできます。つまりここではタイトル部分の上部に横長の領域を作成するカスタマイズになります。この領域じたい必要無い、表示させたくない場合は「ヘッダーの上に帯状のメニューを表示」とあるチェックボックスのレ点を外してください。

Luxeritasのヘッダー上の帯状メニューカスタマイズ

※ メニューの設定は「外観 → メニュー」で、新しいメニューを作成～

Luxeritasのヘッダー上の帯状メニューカスタマイズ上部のヘッダー上の帯状メニューを表示にチェック画像

ここの「※ メニューの設定は「外観 → メニュー」で、新しいメニューを作成～」と長く説明されている部分を図解します。

Luxeritasから「外観」内の「メニュー」項目をクリックする画像

ダッシュボードを表示させて、左側の中央あたり「Luxeritas」の一つ下にある「外観」→「メニュー」を選択します。

↓

「新規メニューを作成」クリックする画像

「メニュー」ページを表示させて、「新規メニューを作成」をクリックします。

↓

メニュー名に「タイトル上の横長領域」と書いて「メニューを作成」ボタンを赤く囲んだ画像

メニュー名のテキストボックスに「タイトル上の横長領域」と挿入しました。これは自分でわかる名前で良いので好きなメニュー名をつけてください。メニュー名テキスト挿入しましたら、「メニューを作成」ボタンをクリックします。

↓

タイトル上の横長領域が有効化され、「メニューを保存」ボタンを赤く囲んだ画像

「メニューを作成」ボタンをクリックすると作成されたメニューの編集ページが表示されます。ここで設定します。このページの上の方にある「編集するメニューの選択」でメニュー名に設定したメニューになっているかどうか確認してください。私の場合は「タイトル上の横長領域」となっていればOKです。

「ヘッダーの上の帯状のメニュー」にレ点を挿入して、「メニューを保存」ボタンをクリックします。

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

（帯状メニューは背景色も付けられるので見やすくなるようにうすい赤紫色に設定してあります。背景色の付け方についてはすぐ後で説明します）
「ヘッダーの上に帯状のメニューを表示」チェックボックスにレ点挿入で緑色の背景のヘッダータイトル部分の上に帯状のメニューが表示されました。

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

ヘッダーの上に帯状のメニューはサイトの幅と同じ幅が標準ですが、最上部についてはブラウザいっぱいに広げるとその下の内容に目が集中して見やすくなります。もちろんデザイン、配色で逆効果になったり好みの問題もありますけど。

例えばGoogleのadsenseも最上部だけブラウザ幅いっぱいになっています。

Luxeritasでもこの帯状のメニューをブラウザいっぱいに表示できます。
「ヘッダー上の帯状メニューを常に横幅いっぱいにする」チェックボックスにレ点を挿入するとブラウザ幅いっぱいに帯状メニューが表示されます。

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

Luxeritas カスタマイズ(外観) ヘッダーナビ（グローバルナビ）でも下にスクロールしても上部に常にヘッダーナビを表示させる「スクロール固定」という項目がありました。

同じように帯状メニューも下部にスクロールしても上部に固定表示させることができます。

↓

「帯状メニューを固定表示にする」にチェックをすることで、下部にスクロールしていっても常に帯状メニューが表示されるようになります。

帯状メニューの外観

帯状メニューのデザイン編集を行えます。選択したり数値記入で簡単にできます。

数値を上げるほどに高さが広がっていきます。デフォルト値は28pxです。

28pxだった高さを倍の56に変更してみると、帯状メニューは倍の高さに広がります。

帯状メニュー文字色

カラーピッカーを開いてお好みの色に変更できます。

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

帯状メニュー上のリンク文字、リンクボタンをマウスが指した時にリンク文字、リンクボタンの色の変更し、その色をここで指定できます。背景色と同じか似た色になるとリンクが余計にわからなくなるので変更する色は背景色との対比を考える必要があります。

Luxeritasではデフォルトでも帯状メニュー上のリンク文字：黒色、リンクホバー色：青色に設定されています。マウスホバー時にリンク背景がピンク色になっているのは別のリンクホバー時の設定がされているからです。これはサイト全体で有効化されています。

帯状メニュー背景色

帯状メニューに背景色もつけられます。

白黒のグレースケールにする場合は下に並ぶ四角の白か黒をクリックします。その他のカラーなら系統で選びます。白か黒をクリックすると白から黒のグレースケールしか選べませんが、その他の色なら例えば図のように赤をクリックしてもカラーピッカーで青を選べばその青が選択され、右側の上下に動くスライダーも青系統になるので自由に選択できます。

帯状メニューの下線の色

ここでもカラーピッカーを表示させて同じように帯状メニューの下部分に色を付けられます。カラーピッカーを表示させるために「色を選択」とある部分をクリックします。

↓

「ヘッダー上の帯状メニューを常に横幅いっぱいにする」にチェックが入っているとブラウザいっぱいに帯状メニューが広がって表示されるので、下線もブラウザ幅いっぱいまで付けられます。

帯状メニューの下線の太さ ( px )

デフォルトでは1pxになっていますが10を挿入するとかなり太くなります。

検索ボックス表示

「検索ボックス表示」チェックボックスにレ点を挿入すると帯状メニューの右側に検索ボックスが表示されます。

検索ボックス文字色

検索窓にあらかじめ薄いグレーで「Search」以下の文字が入りますが、この文字色もカラーピッカーで変更できます。画像は青色にしました。

検索ボックス背景色

ここで背景色も付けられます。

「検索ボックス文字色」「検索ボックス背景色」共に文字を挿入するときには文字色がデフォルトでは黒、背景が白に戻ります。幅も広がります。ですからここでの検索ボックス文字色と背景色は検索ボックスが目につくように配色します。

検索ボックス背景透過

検索ボックスの背景色は「検索ボックス背景色」をカラーピッカーで配色するので右側にスライダーがあって、透過濃度を決められます。さらにここではその濃度を濃くできます。「検索ボックス背景色」のスライダーを下まで下げるとほぼ配色されないくらいまで、透過します。逆に一番上まで上げると濃くなるのですが、上限があります。そこでこの「検索ボックス背景透過」のスライダーを右側に動かすとかなり検索ボックスの背景色が濃くなります。