ブログにカテゴリーやタグ（Taxonomy）を設定する際、日本語（例：「プログラミング」）をそのまま指定すると、URLが %E3%83%97... のようなエンコードされた長い文字列になってしまい、SNSでシェアする際などに不格好になりがちです。

かといって、英語（Programming）を使用すると、サイト上のタイトル表示も英語の「Programming」になってしまい、日本人読者には少し分かりにくくなってしまいます。

「アクセスURLはスッキリした英語（/categories/programming/）にしたい！」
「でも、画面上の表示タイトルは分かりやすい日本語（プログラミング）にしたい！」

Hugoの _index.md ファイルを活用すれば、そんな細やかな要件も簡単に実現できます！✨

そもそも categories って何？（ファイルがない！）

普通の記事とカテゴリー一覧、決定的な違いは 「設定ファイルがあるかないか」 です。

  • 普通の記事 (posts/hello.md):

    • ファイルが実在します。
    • タイトルを変えたければ、そのファイルの title を書き換えればOKです。

  • カテゴリー一覧 (categories/programming/):

    • ファイルが存在しません！（Hugoが自動的に作り出す「仮想的なページ」です）
    • だから、「タイトルを『プログラミング』に変えたいな」と思っても、書き込む場所（ファイル）がどこにも無いのです。

「設定を書く場所がないなら、作ってあげればいいじゃない！」
そこで登場するのが、救世主 _index.md です。

魔法のファイル _index.md

実体のない一覧ページに、タイトルやコンテンツを持たせるための特別なファイル、それが _index.md です。
これを作ることで、「仮想的なページ」を「実体のあるページ」として上書き設定できます。

やり方

  1. content フォルダの中に categories フォルダを作ります。
  2. その中に、カテゴリーの英語名（スラッグ）と同じ名前のフォルダ作ります。
    • 例: content/categories/programming/
  3. その中に _index.md というファイルを作ります。
content/
  categories/
    programming/
      _index.md  <-- これ！

_index.md の中身

普通の記事と同じように、Front Matter を書くだけです。
ここで指定した title が、サイト上の表示に使われます！

+++
title = "プログラミング教室"
+++

こうすると、

  • URL: .../categories/programming/ （英語のまま！）
  • 表示: 「プログラミング教室」 （日本語！）

という理想の状態になります。👍

他にもできること

_index.md はMarkdownファイルなので、タイトルの下に本文を書くこともできます。
「このカテゴリーでは、プログラミングの基礎から応用までを解説します」のような紹介文を入れるのも素敵ですね。

実例：このサイトの「Basic」カテゴリー

実はこのチュートリアルサイトの Basicカテゴリー も、この方法を使っています。

実際のフォルダを見てみてください。
content/categories/basic/_index.md というファイルがあるはずです。
これのおかげで、URLは /basic/ でも、タイトルは「Basic (基礎編)」のように自由に設定できているんですね！

ぜひあなたのサイトでも活用して、かっこよくて親切なカテゴリーを作ってくださいね。

3. テンプレートの違い (page.html と list.html)

最後に少し技術的な補足を。
「あれ？ _index.md も 記事.md も、どっちもMarkdownファイルだよね？何が違うの？」
鋭い質問です！

Hugoでは、ファイル名によって 使われるHTMLテンプレート が変わります。

ファイル名役割使われるテンプレート
_index.md一覧ページ用
(セクションのトップ、カテゴリー一覧など)		list.html
(記事のリストを表示する用)
index.md
記事.md		個別ページ用
(ブログ記事、固定ページなど)		page.html / single.html
(記事の本文を表示する用)
  • _index.md に書いた本文は、list.html の中の {{ .Content }} という部分に表示されます。
  • 通常の list.html には {{ .Content }} が書かれていないことも多いので、もし「本文が表示されない！」と思ったら、layouts/list.html を確認してみてください。（※旧バージョンのHugoでは layouts/_default/list.html に配置される仕様でした）

「一覧ページにも説明文を入れたい！」という時は、list.html に {{ .Content }} を追記する カスタマイズが必要になるかもしれません。
（このテーマでは対応済みです！）

4. リストページに画像を表示する

記事と同じように、トップ画像（アイキャッチ）を表示したいこともありますよね。
これも _index.md で設定できます。

1. Front Matter に画像を指定

content/categories/programming/_index.md などに image パラメータを追加します。

+++
title = "プログラミング教室"
image = "images/programming-cover.jpg"
+++

2. テンプレート (list.html) を修正

layouts/list.html に、画像を表示するコードを追加します。
（このテーマではすでに追加済みです）

{{ with .Params.image }}
<div class="featured-image">
    <img src="{{ . | relURL }}" alt="{{ $.Title }}">
</div>
{{ end }}

これで、カテゴリー一覧ページなどでも、おしゃれなトップ画像が表示されるようになります！🎨

_index.mdを使って一覧ページを自由にコントロールしよう

本来は実体のない一覧ページ（カテゴリーやタグなど）であっても、該当するフォルダ内に _index.md を配置することで、その一覧ページに対してタイトルや画像、説明文（コンテンツ）などのデータを持たせることが可能になります。
この仕組みを利用すれば、「URLは英語・表示は日本語」という理想的なカテゴリー運用ができるようになります。

「URLやタイトルだけでなく、一覧ページのデザインレイアウトそのものを変更したい！」 という場合は、以下の記事をご覧ください。
タグクラウド風のデザインにする方法などを解説しています。

👉 【機能追加】タグ一覧・カテゴリー一覧ページのデザイン