Documentation

日本語

English

日本語

English

外観

Copied!

Navbar Proの使い方 ​

紹介ページの表示例を確認したら，ロゴとリンクを用意して配置します。設定項目を調べたい場合は設定リファレンスを参照してください。

使い方 ​

1. ヘッダーにNavbar Proを配置する ​

サイト全体で共有する場合は，上側のGlobal AreaのBlocへNavbar Proを1つ配置します。そのページだけで使う場合は，ページ内の通常領域へ配置します。

Navbar Pro自体が画面上部の固定バーを構成します。標準のNav Barを置き換える場合は，標準のナビゲーションも残して二重に表示されていないか確認してください。同じページへ複数のNavbar Proを配置する構成は避けます。

Math RendererやCode Highlighterをまとめた拡張機能用のBlocへ一緒に入れるのではなく，ヘッダーを構成する部品として配置します。表示位置や周囲の余白は，外側のBlocも含めてプレビューで確認します。

2. ライト・ダーク用のロゴを登録する ​

Navbar Proを選択し，右側のサイドバーでLogoを設定します。

  1. Logo Lightへ，明るい背景で使うロゴを登録します。
  2. Logo Darkへ，暗い背景で使うロゴを登録します。
  3. Logo Linkに，ロゴをクリックしたときの移動先を入力します。サイトのトップなら/です。
  4. Logo Heightでロゴの高さを，Bar Heightでバー全体の高さを調整します。

ロゴの幅は高さに応じて自動調整されます。初期値はロゴが40px，バーが64pxです。バーの高さをロゴより小さく設定しても，実際の表示ではロゴの高さ以上に補正されます。

片方のロゴが未設定でも，もう片方へ自動で代替されません。同じ画像を明暗両方で使う場合も，両方の欄に登録してください。透明表示の種類によっても使うロゴが変わるため，Overlayを使う場合は写真の上でも読める画像を用意します。

3. メニューのリンクを入力する ​

MenuのLinksへ，表示名とURLを縦棒|で区切り，1項目ずつ改行して入力します。

text
Home|/
Apps|/apps/
Brics|/brics/
About|/about/

これは入力形式の例です。実際に公開するページの名前とURLへ置き換えてください。Blocsのページを追加しただけで，この一覧が自動的に増える仕組みではありません。

サイト内のURLは，先頭に/を付け，小文字にそろえた公開先のパスで入力します。たとえば，公開ページが/about/なら，そのまま/about/と書きます。別サイトへ移動するリンクは，https://から始まるURLで入力できます。

現在ページの強調 ​

開いているページとパスが一致するリンクは，Highlight LightまたはHighlight Darkの色になります。現在ページだから文字を太くする動作ではありません。

/about/，/about，プレビューの/about.htmlは，同じページとして扱われます。クエリーとフラグメントは現在ページの判定から除かれます。一方，/blog/というリンクは，/blog/post/を開いても親項目としては強調されません。現在ページの強調を使うサイト内リンクは，https://から始まる絶対URLではなく，/about/のようなパスで指定してください。

プレビューと公開URL ​

localhostなどのプレビューでは，/を/index.htmlへ，/about/を/about.htmlへ読み替える処理があります。公開サイトでは，Clean URLを.htmlへ変換しません。外部URL，同一ページ内の#id，すでに拡張子があるパス，/ja/のような言語ルートなどは，このプレビュー用変換の対象から外れます。

Navbar Proは，公開先のURL転送設定を作成するBricではありません。Clean URLを使う場合は，公開先でもそのURLでページが開くように設定してください。PHPページや，フォルダー構成が異なるプレビューを使う場合は，リンク先を実際に開いて確認します。

4. 言語リンクを設定する ​

MenuのLanguagesも，言語名とURLを|で区切り，1行ずつ入力します。キャンバスで現在言語として表示する行は，先頭に*を付けます。

text
*English|/
Japanese|/ja/

この例では，キャンバス上でEnglishが現在言語として表示され，Japaneseのリンク先は/ja/です。表示名は自由に変更できます。キャンバス上でJapaneseを現在言語として表示するには，次のように入力します。

text
English|/
*Japanese|/ja/

URLがない言語もリンクにはなりません。言語リンクが不要な場合は，Languagesを空欄にします。

LanguagesのURLには言語ディレクトリを指定します。/はディレクトリなし，/ja/はjaです。

プレビューと公開サイトでは，開いているURLから現在言語を判定し，同じページの別言語版へのリンクを組み立てます。各言語のページは，対応するURLにあらかじめ用意してください。

Language Positionの初期値Before pathでは，言語ディレクトリを先頭に置きます。/small-wonders/の日本語は/ja/small-wonders/，Pathがある/works/small-wonders/は/ja/works/small-wonders/です。After pathでは先頭のディレクトリをサイトの置き場所として残します。/works/small-wonders/は/works/ja/small-wonders/，そのHome /works/は/works/ja/です。

Global Areaを言語ごとに分けても，ひとつの設定を全ページで共有しても構いません。

5. ハンバーガーへ切り替える幅を選ぶ ​

BehaviorのToggleで，メニューをハンバーガーへ切り替える画面幅を選びます。初期値はLGです。

Toggleハンバーガーメニューになる画面幅横並びになる画面幅
LG1199px以下1200px以上
MD991px以下992px以上
SM767px以下768px以上
XS575px以下576px以上

リンク数やロゴ幅に対して早めにハンバーガーへ切り替えたい場合はLG，小さな画面まで横並びを保ちたい場合はMD・SM・XSを検討します。切替幅の直前でも，ロゴと言語リンクを含む全項目が収まることを確認してください。

ハンバーガーメニューを開くと，サイトリンク，明暗スイッチ，言語リンクを縦方向に表示します。展開中はページ本文のスクロールを止めます。横並びの幅へ広げると，開いていたメニューを閉じます。

6. 明暗とスクロールの動作を設定する ​

Appearance SliderがONのとき，閲覧者はスイッチでライト・ダークを切り替えられます。ロゴとリンクは，LogoとColorsで用意した明暗それぞれの設定を使います。モバイルメニュー内のラベルは，Appearance Labelで変更します。

初回はOSの明暗設定に従います。選択はブラウザーへ保存され，次回の表示に使われます。OSと同じ見た目を選んだ場合は自動設定となり，以後のOS設定変更にも追従します。ライト・ダーク・自動の3択を並べるUIではありません。

ページ本文の背景，文字，画像，独自の装飾がすべて自動で再配色されるわけではありません。サイト側にダーク表示用のスタイルがあることを確認してから使ってください。Appearance SliderをOFFにすると，スイッチの表示と，そのBricによる初期の明暗設定の適用を無効にします。

Scroll HideがONのときは，下へスクロールするとバーを隠し，上へ戻ると再表示します。ページ最上部から8px以内と，メニューを開いている間は表示します。常にバーを表示したい場合はScroll HideをOFFにします。

明暗の保存と，ほかのページとの共有

Storage Keyの初期値はnavbar-pro-appearanceです。保存する値はauto，light，darkで，ブラウザーのlocalStorageを使います。

同じサイト内で別のページと明暗設定を共有する場合は，同じStorage Keyを使います。同じオリジンのVitePressと共有したい場合は，vitepress-theme-appearanceを指定できます。ドメイン，サブドメイン，プロトコル，ポートが異なるページとは，この方法でlocalStorageを共有できません。

明暗適用時には，htmlのdarkクラスとdata-bs-theme，CSSのcolor-scheme，bodyのdark-themeクラスを更新します。本文のCSSを用意する場合は，これらに対応するスタイルを設定します。

iframe内ではOSの明暗判定をライト側にする処理があるため，埋め込み表示と通常のページ表示で初期の見た目が異なる場合があります。

7. 写真に重ねる表示を設定する ​

写真などの領域にバーが重なるとき，Overlayで背景の見せ方を変えられます。

  1. バーを重ねたい写真のBlocなどに，heroのようなクラスを付けます。
  2. Navbar ProのOverlayセクションにあるClassへ，同じクラス名を入力します。たとえばheroです。Bricの上部にある一般のClasses欄とは別の設定です。
  3. OverlayでClear，Thin white，Thin blackのいずれかを選びます。
  4. プレビューで対象領域の上へスクロールし，ロゴやリンクが背景に埋もれないか確認します。
Overlay対象領域と重なる間の背景ロゴ・リンクの配色
Off通常のテーマ背景現在の明暗設定
Clear完全透明ダーク背景向けのLogo Darkと明るいリンク色
Thin white白，不透明度18%ライト背景向けのLogo Lightと暗いリンク色
Thin black黒，不透明度18%ダーク背景向けのLogo Darkと明るいリンク色

Classには先頭の.を付けても省略してもかまいません。同じクラスの要素が複数ある場合は，そのいずれかとバーが重なる間に適用されます。Classが空欄，またはOverlayがOffなら適用されません。

対象領域から外れると，通常のテーマ背景へ戻ります。メニューを開いている間も，バーの背景は不透明になります。ページ先頭の対象領域へ重ねる構成では，バー分のスペーサーをなくす処理もあるため，ページ先頭の位置関係をプレビューで確認してください。

8. 内側の幅を調整する ​

LogoのLimit Max WidthをONにすると，ロゴとリンクを収める内側を，Max Width以下の幅で中央に配置します。初期値は90remです。1440pxなど，単位を付けたCSSの長さも指定できます。数字だけを入力した場合はremとして扱うため，pxで指定したい場合はpxを付けてください。

Limit Max WidthをOFFにすると，内側の位置と幅を親カラムの左右のパディング内側へ合わせます。ロゴは左，リンクなどは右へ寄ります。バー自体は画面上部の固定表示のままで，本文中を流れる通常の要素へ変わる設定ではありません。

添付ファイルの確認 ​

Navbar ProのCSSとJavaScriptは，Bricを配置するとAttachmentsへ自動登録されます。Global AreaではProject Attachments，ページ内の通常領域ではPage Attachmentsとして確認します。通常は手動で追加したり，Bric内のファイルを個別にアップロードしたりする必要はありません。

Global Areaの場合はProject Settings（⌘,）を開き，上部のクリップのアイコンを押します。1.0.11では，次の2ファイルがNavbar Proの添付として表示されます。

ファイル用途
navbar-pro-1.0.11.cssプレビュー・公開先での固定表示，メニュー展開などのスタイル
navbar-pro-1.0.11.jsメニュー開閉，現在ページの判定，言語リンクの生成，明暗，Overlay，スクロールの制御

Project SettingsのProject AttachmentsにNavbar ProのCSSとJavaScriptが登録されている

Figure 1: Global Areaに置いたNavbar Pro 1.0.9の添付画面。他のBricのファイルも同じ一覧に表示されます。

ページ内に配置した場合は，Page → Settingsのクリップのアイコンから確認できます。書き出し・Publishでは，JavaScriptはjs/，CSSはcss/へ配置されます。

公開前の確認 ​

  1. PC幅とモバイル幅で，ロゴ・メニュー・言語リンクが収まることを確認します。
  2. メニューの各リンクと，ロゴのリンク先を実際に開きます。現在ページだけが意図した色で強調されるかも確認します。
  3. サイトの下層ページで言語リンクを選び，同じページの別言語版が開くことを確認します。
  4. ハンバーガーの開閉と，展開中の本文スクロール停止を確認します。
  5. ライト・ダークの両方でロゴが表示され，本文の文字や背景も読めることを確認します。
  6. ページを再読み込みし，明暗の選択が反映されることを確認します。
  7. Scroll HideとOverlayを使う場合は，スクロール方向や背景の切り替わる位置を確認します。
  8. キーボードでメニューを開閉し，リンクへ移動できるか確認します。

困ったとき ​

症状最初に確認すること
ロゴが明暗の片方で消えるLogo LightとLogo Darkの両方に画像が登録されているか確認
PCでもハンバーガーになるToggleの切替幅を確認。初期値のLGでは1199px以下が対象
横並びのリンクが収まらないToggleを早めの切替幅にする，ロゴの高さやリンク数を調整
リンクが現在ページの色にならないキャンバスではなくプレビュー・公開先で確認。サイト内リンクをパスで指定し，現在のパスと一致するか確認
プレビューのリンク先だけ開けない.htmlへの読み替えと，実際の書き出し先のフォルダー・拡張子が合っているか確認
明暗スイッチで本文が読みづらくなる本文側にダーク表示用のスタイルがあるか確認。用意するまではAppearance SliderをOFFにすることも検討
ほかのページへ明暗の選択が引き継がれないStorage Keyとオリジンが同じか，ブラウザーで保存が制限されていないか確認
Overlayが変わらないOverlayのClass欄と対象要素のクラスが同じか，モードがOff以外か，実際にバーと重なっているか確認
言語リンクの移動先や現在言語が違うプレビュー・公開先ではLanguagesの言語ディレクトリとLanguage Positionが実際のURLに合っているか確認。キャンバスではLanguagesの*の位置を確認
バーが二重に見える標準のNav Barや，もうひとつのNavbar Proを同時に置いていないか確認

Navbar Proの紹介へ戻る ／ 設定リファレンス

Copyright © 2025–2026 eMotionGraphics Inc.