ヘッダーオプション
ヘッダーは、Docsbookドキュメントサイトの上部にあるナビゲーションバーです。プロジェクト名とロゴ、独自のリンク、ソーシャルアイコン、検索、AIへの質問、テーマ、言語のコントロールを配置します。このページのすべての設定は表示に関する選択であり、ヘッダーを変更してもプロジェクトの残高は消費されません。
ヘッダー設定#
| 設定 | 機能 |
|---|---|
| ヘッダーレイアウトプリセット | ヘッダーブロック（テーマ、検索、Ask AI、ナビゲーションリンク）を5つのプリセットのいずれかに配置します |
| ヘッダーを表示 | 上部ナビゲーションバー全体を表示または非表示にします |
| ヘッダーリンク | ヘッダーナビゲーション内のカスタムテキストリンク |
| ソーシャルリンク | GitHub、Twitter、Discordへのアイコンリンク |
| ヘッダーのテーマ切り替え | ヘッダーにライト／ダーク切り替えを表示します |
| ヘッダーの言語セレクター | ヘッダーに言語切り替えを表示します |
| ヘッダーの検索ボタン | ヘッダーに検索アイコン／ボタンを表示します |
| 検索ボタンの背景色 | ヘッダー検索ボタンのカスタム背景色 — 以下を参照してください |
| Ask AIボタンの背景色 | ヘッダーのAsk AIボタンのカスタム背景色 — 以下を参照してください |
ヘッダーの設定方法#
- ドキュメントサイトを開きます。
- Float Widget → デザイン → ヘッダータブを開きます。
- フィールドに入力し、オプションを切り替えます。
- 保存します。
ページからヘッダーを編集する#
表示されている場所からヘッダーを変更することもできます。ドキュメントサイトでツールバーの エディターを押し、変更したい部分をクリックします：
| クリックする場所 | できること |
|---|---|
| プロジェクト名またはロゴ | 名前、ロゴ、またはアイコンを変更する |
| ヘッダーリンク | テキストまたはURLを変更する、または塗りつぶしボタンに変更する |
| 検索 / AIに質問 / 言語 / テーマ | 非表示にする |
| ソーシャルアイコン | 別の場所にリンクする、または削除する |
| バーの空白部分 | レイアウトプリセットを切り替える |
各操作はリクエストとしてAIチャットに送信され、その後適用されます。そのため、 何を依頼し、何が変更されたかを確認でき、同じ 会話内で元に戻すこともできます。
ヘッダーレイアウトのプリセット#
ヘッダーレイアウトカードは、ヘッダータブの最初のカードです。トップナビゲーションのブロック（テーマ切り替え、検索、AIに質問、ナビゲーションリンク）の表示内容を変えずに、配置のプリセットを選択します。
| プリセット | 配置 | 最適な用途 |
|---|---|---|
| クラシック（デフォルト） | テーマ、AIに質問、検索を右側にまとめて配置 | 汎用的なデフォルト — ほとんどのドキュメントサイトに適しています |
| 検索中心 | ヘッダー中央に幅広い検索バーを配置し、右側にAIに質問を配置 | 検索を重視する、コンテンツ量の多いドキュメント |
| 検索 + AIに質問 | 中央に幅広い検索バーを配置し、そのすぐ右にAIに質問ボタンを配置 | 検索と同じくらいAIへの質問が重要なドキュメント |
| 中央揃え | 左にロゴ、中央にナビゲーションリンク、右にユーティリティを配置 | 3〜5個のリンクを配置したランディングページ風のレイアウト |
| 最小限 | AIに質問と検索をアイコンのみで表示 | ナビゲーションリンクとソーシャルアイコン用のスペースを最大限確保 |
プリセットをクリックして適用します — 1回のクリックで、基盤となる6つの配置項目（テーマの位置、検索幅、AIに質問の配置、AIに質問のアイコンのみ表示、検索のアイコンのみ表示、ナビゲーションリンクの位置）がすべて同時に設定されます。
検索の横にAIに質問を配置する設定は、検索バーが幅広い場合にのみ有効になります。コンパクトな検索ではボタンを配置する中央のまとまりがないため、右側のグループにとどまります。
レイアウト ≠ 表示設定。 プリセットで制御できるのはブロックの配置場所だけで、表示するかどうかではありません。各ブロック独自の切り替え（たとえば、ヘッダーのテーマ切り替え）を使ってブロックをオフにすると、そのブロックは非表示になり、ヘッダーの残りの部分は同じプリセットに従い続けます — 残りのブロックがその場所に移動したり、配置が変わったりすることはありません。
ヘッダーボタンの背景色#
ヘッダーで検索カードとヘッダーでAIに質問カードには、それぞれ16進数コード（例：#5B47E0）で設定する独自の背景色フィールドがあります。ここで色を指定すると、ボタンのデフォルトの控えめな背景色が上書きされ、背景に対して読みやすくなるようにテキストが自動的に黒または白に切り替わります。
デフォルトの背景を使用するにはフィールドを空のままにします。サイトのアクセントカラーを設定する必要はなく、一方を設定してももう一方は変更されません。
ヘッダーリンク#
ヘッダーリンクは、Docsbookサイトのトップバーに表示されるカスタムテキストリンクです。トップバーに表示されるリンクを追加できます。製品、ブログ、変更履歴、サポートへのリンクに便利です。
形式: 各リンクにはラベルとURLがあります。
例:
| ラベル | URL |
|---|---|
| 製品 | https://yourapp.com |
| 変更履歴 | https://yourapp.com/changelog |
| サポート | https://yourapp.com/support |
ソーシャルリンク#
ソーシャルリンクは、コミュニティ（GitHub、Twitter / X、Discord）を指すDocsbookヘッダー内のアイコンリンクです。プラットフォームごとに1つ追加します。
対応プラットフォーム：
- GitHub — リポジトリまたは組織へのリンク
- Twitter / X — Twitterプロフィールへのリンク
- Discord — コミュニティサーバーへのリンク
ソーシャルリンクはヘッダー内に小さなアイコンとして表示されます。ナビゲーションをテキストリンクで煩雑にすることなく、読者がコミュニティを見つけられるようにします。
ヘッダーのテーマと言語のコントロール#
サイドバーの代わりに（またはサイドバーに加えて）、ヘッダーにテーマ切り替えと言語切り替えを配置できます。
ナビゲーションリンクに対してテーマ切り替えと検索をヘッダー内のどこに配置するかを細かく制御するには、上記のヘッダーレイアウトプリセットを参照してください。
推奨事項: 重複を避けるため、各コントロールの配置場所は1か所にしてください。
-
ヘッダー配置: より目につきやすく、新規訪問者のクリック階層を浅くできます。
-
サイドバー配置: ヘッダーのスペースを節約でき、情報量の多いヘッダーに適しています。
ヘッダーを非表示にする#
ヘッダーを表示をオフにすると、上部のナビゲーションバー全体が削除されます。
これを行うのは、ドキュメントを別の製品内に埋め込む場合やキオスクで使用する場合に限ってください。スタンドアロンのドキュメントサイトでは、常にヘッダーを表示したままにしてください。
関連情報#
- サイドバーのレイアウトと設定 — ナビゲーションのもう一つの要素
- テーマ — ライト、ダーク、システム — ヘッダーのテーマ切り替えで変更されるもの
- ブランディング — 名前、ロゴ、色、フォント — ヘッダーに表示される名前とロゴ
- 翻訳設定 — ヘッダーの言語切り替えで選択できるもの