自作テーマでレイアウトを組んでいると、「トップページ（Home）ではサイトの看板として名前をドーンと大きく表示したい！」けれど、「個別の記事ページでは主役である記事タイトルを目立たせたいから、サイト名を表示するヘッダーは控えめにしたい…」という悩みにぶつかります。

そんな時は、Hugo側で「現在のページがトップページかどうか」を自動判定し、デザインとHTML構造を動的に切り替える アプローチがオススメです。
この手法を取り入れることは、単なる見た目の向上だけでなく、「各ページで <h1> タグ（大見出し）が1つになるよう適切に使い分ける」ことにも繋がり、検索エンジンの評価（SEO）にも良い影響を与えて一石二鳥です！

今回は、Hugoの {{ if .IsHome }} という変数機能を活用して、このスマートなヘッダー切り替えを実装する方法を解説します！

1. ベーステンプレート (layouts/baseof.html) の編集

まずは、サイト全体の共通テンプレートである baseof.html を編集して、条件分岐を入れます。

変更前

<header>
    <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
</header>

変更後

<header class="{{ if .IsHome }}home-header{{ else }}compact-header{{ end }}">
    {{ if .IsHome }}
        <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
    {{ else }}
        <p class="site-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></p>
    {{ end }}
</header>

ポイント解説

  • {{ if .IsHome }}: 「もしこれがトップページなら」という意味です。
  • クラス名も home-header と compact-header で切り替えることで、CSSでデザインを変えやすくしています。
  • 記事ページ（else）では、サイトタイトルを <p> タグに格下げしています。これで、記事タイトルの <h1> を邪魔しません。

2. 個別テンプレート (layouts/page.html) の編集

これまで記事タイトルを <h2> で書いていた場合、これを <h1> に昇格させます。
（1つのページに <h1> は1回だけ使うのがSEOの基本です）

変更前

<article>
    <!-- 記事のタイトル -->
    <h2>{{ .Title }}</h2>

変更後

<article>
    <!-- 記事のタイトル -->
    <h1>{{ .Title }}</h1>

※ 同じように、一覧ページ (layouts/list.html) のタイトルも <h1> に変えておくとベストです！

3. CSS (static/css/style.css) でデザイン調整

最後に、トップページとそれ以外（コンパクトヘッダー）で見た目を変えましょう。

/* -------------------------------------------------- */
/* ヘッダーの共通設定 */
header {
    text-align: center;
    border-bottom: 2px dashed #ff6b6b;
    /* margin-bottomなどは個別に設定 */
}

header a {
    color: #ff6b6b;
    text-decoration: none;
}

/* -------------------------------------------------- */
/* トップページ用 (home-header) */
.home-header {
    padding: 60px 0;
    margin-bottom: 40px;
}

.home-header h1 {
    font-size: 2.5rem;
    margin: 0;
}

/* -------------------------------------------------- */
/* サブページ用 (compact-header) */
.compact-header {
    padding: 20px 0;      /*高さを抑える*/
    margin-bottom: 30px;
}

.compact-header .site-title {
    font-size: 1.5rem;    /* 文字も少し小さく */
    font-weight: bold;
    margin: 0;
}

ユーザーにも検索エンジンにも優しいヘッダー構造を作ろう

  1. トップページ: サイトの顔となる大見出し（<h1>）が強調されたインパクトのあるヘッダー
  2. 記事ページ: メインコンテンツを邪魔しないコンパクトなヘッダー ＆ 各記事タイトルが <h1> となる正しいマークアップ

このようにデザインとタグの役割を適材適所で切り替えることで、読者にとって視覚的に見やすく、SEOの観点からも正しく評価される洗練されたサイト構造を実現できます。ぜひテーマ開発で活用してみてください！✨