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

2017/10/24Luxeritas カスタマイズ(外観)

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

Luxeritas

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Luxeritas224

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

帯状メニューの外観

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

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

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

帯状メニュー文字色

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

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

Luxeritas230
帯状メニュー上のリンク文字、リンクボタンをマウスが指した時にリンク文字、リンクボタンの色の変更し、その色をここで指定できます。背景色と同じか似た色になるとリンクが余計にわからなくなるので変更する色は背景色との対比を考える必要があります。
Luxeritas231
Luxeritasではデフォルトでも帯状メニュー上のリンク文字:黒色、リンクホバー色:青色に設定されています。マウスホバー時にリンク背景がピンク色になっているのは別のリンクホバー時の設定がされているからです。これはサイト全体で有効化されています。

帯状メニュー背景色

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

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

帯状メニューの下線の色

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

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

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

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

検索ボックス表示

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

検索ボックス文字色

Luxeritas238

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

検索ボックス背景色

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

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

検索ボックス背景透過

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

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

アイコン

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

アイコン+SNS名

Luxeritas241
こちらにチェックすると

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

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

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

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

Twitter フォローボタン表示

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

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

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

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

RSS ボタン表示

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

Feedly ボタン表示

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

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas27062
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas27162
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas27262
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas27352
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas27462
ヘッダー/フッターのカスタマイズ
Luxeritas27542
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas27682
コメント欄の表示or非表示、枠線
Luxeritas27742
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas27832
メタ情報の表示or非表示と配置
Luxeritas27972
サムネイル(アイキャッチ)大きさと配置
Luxeritas28042
フォントの変更
Luxeritas28162
タイトル、記事など文字サイズの変更
Luxeritas28232
文字色の編集
Luxeritas28432
背景色と枠線色の編集
Luxeritas28372
背景とタイトルとロゴ画像挿入による編集
Luxeritas28532
パンくずリンクの配置変更と編集
Luxeritas28772
ヘッダーナビ(グローバルナビ)編集
Luxeritas28832
ヘッダー上の帯状メニュー編集
私の目次設定カスタマイズ解説ページへのリンクボタン画像[60]
Luxeritasオリジナル目次の挿入とカスタマイズ
Luxeritas28932
マウスオンアニメーション

Posted by クチコミ探し