カスタマイズ

2026/04/02 12:00 更新

テーマ、ロゴ、カラー、Prism 対応言語などの変更方法。

md2docs のテンプレート・アセット・見た目はすべてリポジトリ内で完結しています。必要に応じて好きに書き換えてください。

テーマを切り替える

テンプレートセットは themes/ 配下に置かれています。標準で 2 つ同梱しています。

テーマ	用途
`docs`	ドキュメントサイト向け（本サイト）
`default`	ブログ風レイアウト

使うテーマは config/site.yaml で切り替えます。

site:
  theme: "docs"

アクセントカラーの変更

サイトの主役色（リンク・active 状態・<mark>・タグの背景など）は config/site.yaml の accent_color で 1 行切替できます。Tailwind v4 のカラーパレット 26 色から色名で指定します。

site:
  accent_color: "red"     # ← デフォルト (appleple コーポレート系)
  # accent_color: "sky"
  # accent_color: "violet"
  # accent_color: "emerald"
  # accent_color: "rose"

選択可能な色: slate / gray / zinc / neutral / stone / red / orange / amber / yellow / lime / green / emerald / teal / cyan / sky / blue / indigo / violet / purple / fuchsia / pink / rose 等 26 色。

仕組み

PHP が accent_color の名前で src/Support/TailwindColors.php から 11 シェード（50, 100, …, 950）の oklch 値を取り出す
themes/docs/layout.html.twig が <head> に <style> を出力し :root の --color-accent-50 … 950 を注入
Tailwind v4 の @theme で定義した --color-accent-* を、生成済みの bg-accent-50 text-accent-700 などのユーティリティが参照
<style> 注入が走ることで全ユーティリティが動的に色変わり

メモ

リビルド不要です。site.yaml を書き換えてリロードするだけで切り替わります。

アクセント色の影響を受けない色

意味付けで固定している色は accent_color を変更しても影響しません。

用途	色	理由
ロゴ	`#C40F32`	コーポレートカラー固定
お気に入り ★	`slate-700`	アクセントと衝突しないニュートラル
コピー成功 ✓	`emerald`	「成功 = 緑」の慣習
エラー ✗	`red`（意味的固定）	エラーフィードバック

個別の色やロゴをさらに細かく変える

ロゴ色など固定箇所を変えたいときは個別ファイルを直接書き換えます。

themes/docs/layout.html.twig — ヘッダのロゴ SVG（fill="#C40F32"）
src/css/style.css — .favorite-toggle.is-favorited などの固定色（amber→slate に変更済み等）

書き換え後は npm run build:css でビルド。

ヒント

プロジェクトで決まっているブランドカラーが Tailwind パレットに無い場合は src/Support/TailwindColors.php の PALETTE 配列に独自エントリを追加して accent_color: "mybrand" のように使うのが一番きれいです。

ロゴ

ヘッダのロゴは themes/docs/layout.html.twig の SVG を直接書き換えます。SVG は <header> セクション内、class="flex items-center gap-2 font-bold text-xl" のリンクの中にあります。

画像にしたい場合は次のように差し替えます。

<a href="/" class="flex items-center gap-2 font-bold text-xl text-slate-900">
  <img src="/assets/images/logo.svg" alt="{{ site.name }}" class="h-7 w-auto">
  {{ site.name }}
</a>

Prism の対応言語を増やす

初期状態では HTML / CSS / JS / PHP / bash / YAML / JSON に対応しています。増やす場合は themes/docs/layout.html.twig の <head> に追加します。

<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-ruby.min.js"></script>

利用可能なコンポーネント一覧は prismjs.com を参照してください。

フッタ

フッタは themes/docs/layout.html.twig の最下部にあります。プライバシーポリシー等のリンクを追加する場合はここを編集してください。

メモ

深いカスタマイズをする場合は、themes/docs/ をまるごとコピーして themes/your-theme/ を作り、site.yaml の theme を切り替えるのが安全です。upstream を追従する際の衝突が減ります。

URL 設計 →