3. デザイン・設定の変更 (mkdocs.yml)

MkDocsの見た目や動作設定は、プロジェクト直下にある設定ファイル mkdocs.yml を編集することでカスタマイズできます。

ここでは、マニュアルサイトでよく使われる「ナビゲーションのレイアウト変更」を例にカスタマイズ方法を解説します。

ナビゲーションの基本レイアウト

このテンプレートの初期状態では、以下のようにナビゲーションの役割が分担されています。

1. ヘッダー（上部タブ）: 大カテゴリ（章）の切り替え
2. 左サイドバー: 選択中の大カテゴリ内にある「記事リスト」
3. 右サイドバー: 現在開いている記事内の「目次（H2やH3の見出し）」

ホームで左サイドバーが出ないのはなぜ？

「ホーム」タブのように下層の記事を持たない単一ページを開いている時は、左サイドバーに表示するリストがないため、自動で隠れる仕組みになっています。

カスタマイズ例1：左サイドバーに全階層を常時表示する

「タブで分けず、一目でサイト全体の構成（ツリー構造）がわかるようにしたい」という場合は、上部のタブ設定を無効化します。

mkdocs.yml をエディタで開き、theme: > features: 配下にある - navigation.tabs の行を削除（または行の先頭に # をつけてコメントアウト）してください。

mkdocs.yml

theme:
  name: material
  language: ja
  features:
    # - navigation.tabs          # ← この行を削除、またはコメントアウト
    - navigation.sections
    - navigation.top

ファイルを保存するとブラウザが自動リロードされ、上部のタブが消えて左サイドバーにすべてのメニューが展開されたレイアウトに変更されます。

カスタマイズ例2：アクセントカラーを変更する

サイトのテーマカラー（Primary / Accent）を変更することも簡単です。 mkdocs.yml の theme: の中に palette: ブロックを追加します。

mkdocs.yml

theme:
  name: material
  language: ja
  palette:
    primary: custom # ベースカラー（red, blue, indigo, customなど）
    accent: indigo # アクセントカラー

より詳細なレイアウトやカラーのカスタマイズ機能については、Material for MkDocsの公式設定マニュアル(英語) を参考にしてみてください。