+++

ブログ記事に「タグ」や「カテゴリー」を付けて分類していくと、「サイト内の全タグとそれぞれの件数が知りたい！」「どの分類にどれくらい記事があるのか全体像を見せたい！」と思うようになります。

しかし、デフォルトの状態では /tags/ や /categories/ のアーカイブページにアクセスしても、通常の記事リストと同じように単調で少し味気ない表示になってしまうテーマがほとんどです。

この記事では、タクソノミー（タグ・カテゴリー）ページ専用のテンプレートファイルを作成して、「タグクラウド」 のようにキーワードと件数がきれいに整列した魅力的な一覧表示を実装する方法を解説します！

1. テンプレートの仕組み

Hugoでは、タクソノミー（タグやカテゴリー）の一覧ページには layouts/terms.html というテンプレートが使われます。
（※Hugo v0.145以前の旧バージョンでは layouts/_default/terms.html でした。もしこのファイルが無ければ、list.html が代わりに使われます）

つまり、terms.html を新しく作れば、タグ一覧ページだけデザインを変えられるのです！

2. terms.html の作成

themes/my-tutorial-theme/layouts/terms.html を新規作成します。

{{ define "main" }}
<!-- パンくずリスト -->
{{ partial "breadcrumbs.html" . }}

<h1>{{ .Title }}</h1>

<!-- 説明文があれば表示する (_index.md で設定したもの) -->
<div class="category-description" style="margin-bottom: 30px;">
    {{ .Content }}
</div>

<ul class="terms-list">
  <!-- 記事数の多い順 (.ByCount) にループ -->
  {{ range .Data.Terms.ByCount }}
  <li>
    <a href="{{ .Page.RelPermalink }}">
        {{ .Page.Title }} 
        <span class="count">({{ .Count }})</span>
    </a>
  </li>
  {{ end }}
</ul>

<style>
/* 簡易的なタグクラウド風スタイル */
.terms-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 10px;       /* アイテム間の隙間 */
}

.terms-list li {
    margin: 0;
}

.terms-list a {
    display: inline-block;
    padding: 5px 15px;
    background-color: #f0f0f0;
    border-radius: 20px; /* 角丸にする */
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    transition: background-color 0.2s;
}

.terms-list a:hover {
    background-color: #e0e0e0; /* ホバー時の色変更 */
}

.terms-list .count {
    font-weight: bold;
    color: #666;
    margin-left: 5px;
    font-size: 0.9em;
}
</style>
{{ end }}

ポイント

  • .Data.Terms: そのタクソノミーに含まれる全ターム（タグ名など）のリストです。
  • .ByCount: 記事数が多い順に並び替えます（.Alphabetical なら辞書順）。
  • .Count: そのタグが付いている記事の数です。

3. 確認してみよう

http://localhost:1313/tags/ や http://localhost:1313/categories/ にアクセスしてみてください。
先ほどまでリスト表示だったのが、ボタンのようなデザインで横並びに表示されているはずです。

応用：タグクラウド

CSSを工夫すれば、記事数 (.Count) に応じて文字サイズを変える「タグクラウド」も作れます。
興味がある方は、「Hugo Tag Cloud」などで検索してCSSをカスタマイズしてみてくださいね！

専用テンプレートで魅力的なタクソノミー一覧を作ろう

ただ記事が並んでいるだけのデフォルトの一覧ページから脱却し、terms.html を使いこなしてタグやカテゴリーの一覧をボタン風（タグクラウド風）に綺麗に敷き詰めることで、読者がまだ見ぬ興味深いキーワードを直感的に探しやすくなります。
CSSアニメーションなどをさらに工夫して、ぜひサイト全体の回遊率アップに繋がるデザインを作り上げてみてくださいね！✨