Luxeritas カスタマイズ(外観) ヘッダーナビ(グローバルナビ)

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

サイトタイトルやキャッチフレーズの下に帯状に並ぶ「ホーム」などの固定ページへのアクセスを示すリンクたちをヘッダーナビ(グローバルナビ)と名付けられています。
Luxeritas154

Luxeritasでは配置とデザインなどカスタマイズメニューが用意されています。
Luxeritas153

グローバルナビ表示

グローバルナビを表示させなくできます。デフォルトではチェックが入って表示になっています。

Luxeritas155
チェックを外すとタイトルとキャッチフレーズ下にあったヘッダーナビ(グローバルナビ)が全て消えます。

グローバルナビの位置

ヘッダー下部(ノーマル)

Luxeritas156
グローバルナビ表示」チェックした状態で「グローバルナビの位置」を「ヘッダー下部(ノーマル)」を選択するとタイトルとキャッチフレーズ下にヘッダーナビ(グローバルナビ)が表示されます。

ヘッダー上部

Luxeritas157
ヘッダーナビ(グローバルナビ)がタイトル上に来ます。

モバイルメニューの種類

豪華バージョン

Luxeritas159
モバイルでのヘッダーナビ(グローバルナビ)表示方法をSidebar、Pre、Next、Searchと表示するのが豪華バージョンになります。

グローバルナビのみ

Luxeritas160
「メニュー」だけの表示になります。

モバイルメニューの開閉方法

親と子を個別に開閉
Luxeritas162
「モバイルメニューの開閉方法」このメニューはヘッダーナビ(グローバルナビ)に親と子の設定が無ければどちらでも変わりありません。

Luxeritas164
ここまでのカスタマイズにおけるモバイル表示の説明はWordPressのPC画面で簡易的にモバイル表示したときの画像を使っています。ただ、「モバイルメニューの開閉方法」は細かくてわかりにくいのでiPhoneでの表示例を以下に示します。
Luxeritas163
ヘッダーナビ(グローバルナビ)の項目は「ホーム」「調べたり、見たり経験した口コミ情報です」「サイトマップ」と3項目の固定ページが設定されています。「調べたり、見たり経験した口コミ情報です」にだけ+マークが□に囲まれて表示されています。これは固定ページに新規追加で「調べたり、見たり経験した口コミ情報です」を親として「購入一覧」というページを作ってあるので「調べたり、見たり経験した口コミ情報です」の下に「購入一覧」ページがあることを示しています。

Luxeritas165
ダッシュボードから「固定ページ」→「新規追加」で「購入一覧」をいうタイトルのページを作ってあります。
Luxeritas166
「購入一覧」をいうタイトルの固定ページ作成時に親ページに「調べたり、見たり経験した口コミ情報です」を設定してあります。そうした設定では「親と子を個別に開閉」を選択してあると親ページだけ表示され下の子ページがあると+マークが□に囲まれて表示されクリックすることで子ページタイトルが表示されます。つまり親と子ページのある固定ページを一度にモバイルで表示させないのが「親と子を個別に開閉」設定です。

一度に全開閉

Luxeritas167
「一度に全開閉」を選択して「保存して公開」をクリックします。これだけですと「親と子を個別に開閉」と変化はわかりません。

Luxeritas168
Menuをタップすると別ウィンドウにヘッダーナビ(グローバルナビ)が表示されます。「調べたり、見たり経験した口コミ情報です」とその子ページ「購入一覧」ページが一度に表示されます。「一度に全開閉」されています。

スクロール固定

スクロール固定

スクロール固定とはサイト表示が下に長い場合、下部へスクロールしていくとサイトタイトル下にあるヘッダーナビはサイトタイトルと共に画面からは消えていってしまします。
Luxeritas154

Luxeritas169

Luxeritas170
ヘッダーが見えなくなる下部へスクロールしても上部に常にヘッダーナビ(グローバルナビ)が上部に固定表示されるようになります。

小デバイスだけスクロール固定

Luxeritas171

Luxeritas172
タブレット、スマホなどの小デバイスの時だけヘッダーナビ(グローバルナビ)が常に表示されます。

PCサイズだけスクロール固定

Luxeritas173
小デバイスではスクロール固定されませんが、PCサイズの表示の時だけヘッダーナビ(グローバルナビ)が上部に固定表示されます。

固定オプション

Luxeritas170

Luxeritas175
ヘッダーナビ(グローバルナビ)を固定表示にした時にだけ利用できます。
スクロールバーを右にスライドさせるとヘッダーナビ(グローバルナビ)に陰が表示され、右にスライドさせるごとに陰が濃くなります。

スクロール固定で半透明にする

Luxeritas177
「スクロール固定」の設定時だけ有効となります。「スクロール固定で半透明にする」のチェックボックスにレ点を記入すると背景が半透明になってスクロールすると後ろ側が透けて見えます。

上スクロールの時だけ表示
Luxeritas178

ヘッダーナビ(グローバルナビ)は上へスクロールした時だけ表示され、下にスクロールしていくと消えます。

横幅の大きさ

ここでヘッダーナビ(グローバルナビ)に表示されているリンクの位置を変更できます。

横幅を自動リサイズ

Luxeritas179
デフォルトでは「横幅を自動リサイズ」になっています。もし別の表示になっていてヘッダーナビ(グローバルナビ)のリンクを左側に寄せて表示させたい場合は「横幅を自動リサイズ」を選択してください。

Luxeritas180
ヘッダーナビ(グローバルナビ)のリンク表示は左揃えで表示されていきます。

横幅を自動リサイズ(幅いっぱい)

Luxeritas181
ヘッダーナビ(グローバルナビ)のリンクを幅いっぱい使って表示させたい場合に、「横幅を自動リサイズ(幅いっぱい)」を選択します。

Luxeritas182
ヘッダーナビ(グローバルナビ)の幅にいっぱいに広がるようにリンクが表示されていきます。

全て同じ幅

Luxeritas183
ヘッダーナビ(グローバルナビ)のリンク表示が均等に並びます。

Luxeritas184
リンクとの間がきれいに等間隔に並びます。

中央揃え

Luxeritas186
「横幅の大きさ」の下にある「中央揃え」チェックボックスにレ点をチェックします。
Luxeritas187
ヘッダーナビ(グローバルナビ)のリンク表示が中央揃いで表示されます。

区切り線を付ける

なし

Luxeritas189
デフォルトでは「なし」になっていると思われますが、この場合はヘッダーナビ(グローバルナビ)に区切り線の無い状態です。

区切り線を付ける

Luxeritas190
「区切り線を付ける」にチェックを入れるとヘッダーナビ(グローバルナビ)のリンクとリンクの間に区切り線が挿入されます。

両端を含めて区切り線を付ける

Luxeritas191
左寄せになっている時には区切り線が入ったままで「区切り線を付ける」と「両端を含めて区切り線を付ける」は変わりがありません。
Luxeritas186
そこで「中央揃え」もチェックします。
Luxeritas192
リンクの両端にも区切り線が挿入されます。

ナビ文字色

ここからは主に文字と背景の装飾になります。
Luxeritas194
「色を選択」をクリックします。

Luxeritas195
カラーピッカーが表示されます。カラーピッカーの下には小さな四角の色の付いたボックスが並んでします。白黒基調なら白黒どちらか、それ以外の色の基調なら赤、橙、黄、緑、青、紫のどれかをクリックします。ピッカー上の白丸が選択する色になります。
色つきにする場合は赤のボックスをクリックしてもカラーピッカー上で黄色を選べば黄色を選択できます。カラーピッカーの右側にはスライダーがあって上側にすると色が濃く、下側にすると色が薄くなります。

Luxeritas193
「ナビ文字色」でカラーピッカーから赤色にしてみると、文字の色が赤に変わります。

ナビバー背景色

Luxeritas198
リンクの無いヘッダーナビ(グローバルナビ)の部分の背景色に任意の色を設定できます。画像はリンクを中央揃いにした場合です。リンク表示の無い部分の両サイドが設定した青色になります。

ナビ背景色

Luxeritas196
「ナビ背景色」で色を選択してスライダーを下に下げて色を薄めにしてみました。ヘッダーナビ(グローバルナビ)全体の背景に選択した色が付きます。

ナビリンクホバー文字色

Luxeritas197
ヘッダーナビ(グローバルナビ)のリンク文字上にマウスを持って行くと設定した色(画像では黄色)に変わります。

ナビリンクホバー背景色

Luxeritas200
ヘッダーナビ(グローバルナビ)のリンク枠内にマウスを持って行くと設定した色(画像では黄色)に背景色が変わります。

ナビカレント文字色

Luxeritas201
ヘッダーナビ(グローバルナビ)のリンクにあるページを現在表示している時に指定した色に文字が変わります。図のように「ホーム」をクリックして現在ブラウザが表示している場合、図のように「ホーム」文字が黒から指定した青に変わります。

ナビカレント背景色

Luxeritas202
ヘッダーナビ(グローバルナビ)のリンクにあるページを現在表示している時に指定した色に背景が変わります。図のように「ホーム」をクリックして現在ブラウザが表示している場合、図のように背景が指定した黄色に変わります。

ナビ上の線の色

Luxeritas203

ヘッダーナビ(グローバルナビ)の帯状横長区域の上部分に色をつけられます。画像では赤色の線をつけてあります。

ナビ下の線の色

Luxeritas204
ヘッダーナビ(グローバルナビ)の帯状横長区域の下部分に色をつけられます。画像では青色の線をつけてあります。
区切り線の色Luxeritas205
「区切り線の色」を設定して「区切り線を付ける」で区切り線を表示させると配色できます。

Luxeritas206
固定ページに子ページが設定されている場合、「区切り線の色」設定がある場合、枠にその色が配色されます。

ナビ上の線の太さ ( px )

Luxeritas207
デフォルトで1pxになっています。数値を上げていくと太くなり、下げると細くなります。

ナビ下の線の太さ ( px )

Luxeritas208
デフォルトで1pxになっています。数値を上げていくと太くなり、下げると細くなります。

ナビ上下パディング ( px )

Luxeritas209
ヘッダーナビ(グローバルナビ)内の文字と上下の線とのパディング値を設定できます。数値を上げるほどに上下にスペースができます。

ナビバー上下パディング ( px )

Luxeritas210

ナビバーから文字までパディング数値の設定できます。「ナビ上下パディング ( px )」で数値を入れてさらにこちらに数値を入れると足した値のスペースができます。どちらかに必要な設定したら片一方は必要ありません。

ダッシュボード→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 クチコミ探し