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

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

スポンサーリンク

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

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

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

↓

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

↓

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

↓

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

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

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

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

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

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

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

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

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

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

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

↓

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

帯状メニューの外観

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

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

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

帯状メニュー文字色

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

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

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

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

帯状メニュー背景色

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

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

帯状メニューの下線の色

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

↓

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

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

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

検索ボックス表示

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

検索ボックス文字色

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

検索ボックス背景色

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

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

検索ボックス背景透過

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

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

アイコン

アイコンにチェック入れてみました。ただ表示が消えてしまいました。私のLuxeritasのSNSの表示設定でアイコン表示について表示させない設定になってしまっているかもしれません。原因は不明です。
とはいえ、これでは意味が無いので消えてしまったらすぐ下の「アイコン＋SNS名」にしてください。

アイコン＋SNS名

こちらにチェックすると

↓

無事に表示が出ます。デフォルトでは黒字で表示されます。

フォローボタンをカラーにする

チェックするとボタン全体に特有のカラーで色分け表示されます。

↓

RSSは黄色、Feedlyは黄緑色になります。

Twitter フォローボタン表示

twitterはユーザー名とIDとあるのでややこしいですが、ここではIDです。
@～とある方で@は外してください。IDが@1234abcならここでは
https://twitter.com/1234abcとなります。

「Twitterフォローボタン表示」チェックボックスにレ点挿入でRSS、FeedlyのようにTwitterフォローボタンが並びます。

「アイコン + SNS名」での設定です。Twitterも「アイコン」表示がうまくいきませんでした。

おそらく記事下のSNSフォローボタン設定が関係してるとは思いますが、今の時点ではわかりませんでした。
このようにフォローボタンを作成できるSNSは「Facebook」「はてなブックマーク」「Google+」「Youtube」「LINE」が用意されています。

RSS ボタン表示

ヘッダーの上の帯状のメニューにRSSボタンの表示と非表示の選択はここで行います。チェックを外すことで消えます。

Feedly ボタン表示

ヘッダーの上の帯状のメニューにFeedlyボタンの表示と非表示の選択はここで行います。チェックを外すことで消えます。