ナビゲーションのスタイル
教会のウェブサイトのナビゲーションバーの色を、ブランドに合わせてカスタマイズできます。背景が単色の場合と透明にページへ重なる場合の両方で色を設定できるため、ページごとにナビゲーションの見た目を細かく管理できます。
始める前に
- 教会のウェブサイトを管理する権限が必要です。詳しくはロールと権限を参照してください。
- 16進数のカラーコード（例: #03A9F4）を含め、ブランドカラーを準備しておいてください。
- ウェブサイトにおける単色と透明のナビゲーションスタイルの違いを理解しておいてください。
ナビゲーションのモードについて
ウェブサイトのナビゲーションは、ページによって次の2つのスタイルで表示されます。
- 単色のナビゲーション -- 背景色のあるナビゲーションバーです。通常はコンテンツページで使用されます
- 透明のナビゲーション -- ページの内容に重ねて表示されるナビゲーションです。通常はヒーロー画像や全画面背景のあるページで使用されます
両方のモードの色は、それぞれ独立してカスタマイズできます。
ナビゲーションのスタイルを開く
- B1 Admin でジャンプメニュー（左上の検索バー）を開き、Website を展開します
- Appearance をクリックします
- Style Settings の一覧で、Navigation をクリックします
Navigation Styling エディターには、Header (solid) と Header over hero (transparent) の2つのカードがあります。
単色のナビゲーションを設定する
単色のナビゲーションは、ナビゲーションバーの後ろに背景色が表示されます。これらの設定は Header (solid) カードにあります。次の項目をカスタマイズできます。
背景色
- Background color の Override スイッチをオンにします
- カラーピッカーをクリックします
- 使用したい背景色を選択します
- 初期値は白（#FFFFFF）です
リンクの色
- Link color の Override スイッチをオンにします
- ナビゲーションのリンクテキストの色を選択します
- 通常状態のリンクに適用されます
- 初期値は濃いグレー（#555555）です
リンクのホバー色
- Link hover color の Override スイッチをオンにします
- ユーザーがリンクにマウスを重ねたときの色を選択します
- クリックできるリンクであることが視覚的にわかるようになります
- 初期値は明るい青（#03A9F4）です
現在のページのリンクの色
- Active link color の Override スイッチをオンにします
- 現在表示中のページのリンクの色を選択します
- ユーザーが今どのページを見ているかを判断しやすくなります
- 初期値は明るい青（#03A9F4）です
透明のナビゲーションを設定する
透明のナビゲーションは、背景なしでページの内容に重ねて表示されます。これらの設定は Header over hero (transparent) カードにあります。次の項目をカスタマイズできます。
リンクの色
- Link color の Override スイッチをオンにします
- ページの背景と十分なコントラストが得られる色を選択します
- 暗い背景の上では、白や明るい色が見やすいことが多いです
- 初期値は濃いグレー（#555555）です
リンクのホバー色
- Link hover color の Override スイッチをオンにします
- ホバー時の色を選択します
- ページの背景の上で見えやすい色にしてください
- 初期値は明るい青（#03A9F4）です
現在のページのリンクの色
- Active link color の Override スイッチをオンにします
- 現在のページを示す色を選択します
- デザインになじみつつ、目立つ色にしてください
- 初期値は明るい青（#03A9F4）です
情報
透明のナビゲーションは、ページの内容の上に直接重ねて表示されるため、背景色の設定はありません。
変更を保存する
- 色の設定が終わったら、Save Navigation をクリックします
- 変更は公開中のウェブサイトにすぐに反映されます
- ウェブサイトを開いて、両方のモードでナビゲーションを確認してください
初期値に戻す
初期の色に戻したい場合は、次の手順に従ってください。
- カスタムの色の Override スイッチをすべてオフにします
- Save Navigation をクリックします
- ナビゲーションが初期の配色に戻ります
または、Cancel をクリックすると、保存せずにすべての変更を破棄できます。
ベストプラクティス
色のコントラスト
- 読みやすさ -- リンクの色と背景の間に十分なコントラストがあることを確認してください
- WCAG への準拠 -- アクセシビリティのため、少なくとも 4.5:1 のコントラスト比を目指してください
- 両方のモードを確認する -- 単色と透明の両方のナビゲーションでサイトをプレビューしてください
ブランドの一貫性
- ブランドカラーを使う -- ロゴやウェブサイトのテーマに合わせてください
- 使う色を絞る -- まとまりのある見た目にするため、2〜3色に抑えてください
- 使う画像を考慮する -- 透明のナビゲーションを使う場合は、一般的なページ背景で見え方を確かめてください
ホバーと現在のページの状態
- わかりやすいフィードバック -- ホバー時の色は、通常のリンクと明確に区別できるようにしてください
- 現在のページを区別する -- ユーザーが現在地を把握できるよう、目立つ色を使ってください
- 滑らかな切り替え -- 色の変化はシステムが自動的にアニメーションで切り替えます
トラブルシューティング
色が正しく見えない
- キャッシュを消去する -- ブラウザのキャッシュにより古い色が表示される場合があります
- 16進数のコードを確認する -- 有効なカラーコードを入力したか確認してください
- さまざまな背景でテストする -- ページによって色の見え方が変わることがあります
ナビゲーションが見えない
- 透明モード -- 明るい画像の上で透明のナビゲーションを使うと、暗い文字が見えにくくなることがあります
- 対処法 -- リンクの色を調整するか、より暗いページ背景を使用してください
- 別の方法 -- ナビゲーション領域に薄い影や背景のオーバーレイを追加してください
技術的な詳細
ナビゲーションのスタイルは JSON として保存され、CSS 変数を使って適用されます。
- 変更はサイトを再構築しなくても、すぐに反映されます
- 色はすべてのナビゲーション要素に適用されます
- 上書きは任意です。設定しない色はテーマの初期値が使われます