+++

「トップページ（Home）だけは背景色を黒にしたい」
「特定のカテゴリー（newsなど）の記事だけ、フォントやレイアウトを特別に変えたい」
「ある1つのランディングページだけ全体を囲む余白を消したい」

Webサイトを運営していると、必ずこうしたページ固有のデザイン変更の要望が出てきます。
そんな時にHugoで超絶便利に使えるテクニックが、「動的Bodyクラス (Dynamic Body Classes)」 の実装です。

WordPressなどの有名CMSでは定番となっている機能ですが、Hugoでも baseof.html を少し書き換えるだけで簡単に実現でき、CSSの表現力が飛躍的に高まります！

1. 何ができるようになるの？

HTMLの <body> タグに、そのページの情報（種類やカテゴリーなど）を表すクラス名が自動で付くようになります。

例

トップページの場合:

<body class="kind-home">

ブログ記事 (posts) の場合:

<body class="kind-page section-posts page-my-article">

こうなっていれば、CSSで簡単にデザインを使い分けられます。

/* トップページだけ背景を黒にする */
.kind-home {
    background-color: black;
    color: white;
}

/* postsセクションだけ背景をグレーにする */
.section-posts {
    background-color: #f0f0f0;
}

2. 実装方法

テーマの layouts/baseof.html を開き、<body> タグを以下のように書き換えるだけです。

<body class="kind-{{ .Kind }} {{ with .Section }}section-{{ . }}{{ end }} {{ if .IsPage }}page-{{ .Slug | default .File.ContentBaseName }}{{ end }}">

コードの解説

  1. kind-{{ .Kind }}:

    • ページの種類を出力します。
    • トップページなら kind-home
    • 個別ページなら kind-page
    • 一覧ページなら kind-section

  2. section-{{ .Section }}:

    • そのページが属するセクション（フォルダ名）を出力します。
    • content/posts/... なら section-posts になります。

  3. page-{{ .Slug ... }}:

    • 記事の スラッグ (Slug) を優先してクラス名にします。
    • スラッグが設定されていない場合は、ファイル名（拡張子なし）が使われます。
    • 例: slug = "my-special-page" なら page-my-special-page になります。
    • 特定の1ページだけデザインを変えたい時に最強の武器になります。

3. 応用テクニック

ヒーローイメージの実装

「特定の記事だけ、ヘッダー画像を画面いっぱいに広げたい！」なんて時も、このクラスがあればCSSだけで実現可能です。

/* page-special-feature という記事だけヘッダーを特別扱い */
.page-special-feature header {
    background-image: url(...);
    height: 100vh;
}

ダークモードの強制適用

「このページは夜の雰囲気にしたい」という時も、記事のファイル名をCSSで指定すれば一発です。

動的クラスを仕込んでデザインの自由度を極大化させよう

<body> タグへの動的クラス付与は、たった一行のコード追加で済むお手軽な実装ながら、後々のデザイン改修（特定のページだけヒーローイメージを全画面にしたい、ダークモードをこの記事だけ強制したい、等）の自由度を劇的に引き上げてくれます。
「個別のレイアウトファイル（layout）を作るほどではないけれど、CSSだけでちょっとだけ見た目を変えたいな…」と悩んだ時に最強の武器となりますので、テーマ制作の初期段階からぜひこのBodyクラスを実装しておくことを強くおすすめします！