これまで、すべての記事データは content/posts の中（ブログ専用セクション）に作成してきました。
しかし、実際のWebサイト運用においては、ブログ以外にも「事業内容」「ニュース(お知らせ)」「ポートフォリオ」など、目的の違う複数のページ群が必要になることがよくありますよね。

今回は、Hugoの強力な機能である**「セクション (Section)」**を新しく追加し、ブログ部分とは全く異なる独自のデザイン（レイアウト）を適用させる方法を解説します！

0. セクションって何？（カテゴリーとの違い）

「カテゴリー分けなら、もう categories = ["News"] でやってるよ？」と思いましたか？
鋭いです！でも、Hugoの 「セクション (Section)」 は少し意味合いが違います。

違い1: URL（住所）が変わる

  • セクション: content/ 直下のフォルダ構造で決まります。
    • content/posts/xxx.md 👉 example.com/posts/xxx/
    • content/news/yyy.md 👉 example.com/news/yyy/
    • 物理的に「場所」が分かれるイメージです。
  • カテゴリー/タグ: 記事に貼る「付箋（ラベル）」です。
    • 1つの記事に「ニュース」と「重要」の両方を貼ったりできますが、URL自体は元の場所（/posts/...）のままです。

違い2: デザインを変えやすい

これが最大のメリットです！

  • セクション: 「ニュースのページだけ、日付だけのリストにしたい」「作品集だけ画像を大きくしたい」といった デザインの切り替え がとても簡単にできます。
  • カテゴリー: 「特定のカテゴリーだけデザインを変える」のは、ちょっと難しい設定が必要です。

今回は「ブログとは全く別のエリアを作る」という感覚で進めてみましょう。

1. ニュース用の記事を作る

まずはフォルダを作るところからです。
……といっても、Hugoならコマンド一発です！

hugo new content news/first-news.md

posts の代わりに news と指定しました。
これで、content/ フォルダの中に news という新しいフォルダ（セクション）が生まれました！

作成された content/news/first-news.md を開いて、適当に内容を書いて draft = false にしておきましょう。

2. デザインの違いを確認する

サーバーを起動して、今作ったページを見てみましょう。
URLは http://localhost:1313/news/ です。

…以前作った「ブログ記事一覧」と同じデザインで表示されていますね？
これは、Hugoが「専用のレイアウトがないから、いつもの layouts/list.html を使おう」と判断したからです。

3. ニュース専用のデザインを作る

ニュースは「日付とタイトルだけ」のシンプルなリストにしたいとしましょう。
ここで Lookup Order の知識が役に立ちます！

layouts/news/list.html というファイルを作れば、Hugoはそちらを優先して使うはずです。

フォルダ作成

テーマの中に news フォルダを作ります。
themes/my-tutorial-theme/layouts/news/

ファイル作成

そこに list.html を作り、以下のコードを書きます。
画像（サムネイル）を表示しない、シンプルなコードです。

{{ define "main" }}
<div class="container">
    <h1>ニュース一覧 📢</h1>
    <ul>
        {{ range .Pages }}
        <li>
            <small>{{ .Date.Format "2006-01-02" }}</small>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </li>
        {{ end }}
    </ul>
</div>
{{ end }}

4. 確認してみよう

もう一度 http://localhost:1313/news/ を見てみてください。
デザインが変わりましたか？

一方で、ブログの方 http://localhost:1313/posts/ は元のままですね。

セクションを活用してサイト内に多彩なコンテンツを展開しよう

  • content/ 直下に新しいフォルダを作るだけで、独立した 「セクション」 が完成する。
  • layouts/セクション名/ の中にテンプレートを置けば、そのセクション専用のデザインレイアウト が適用される。

上級者向け：テンプレートの共通化と分離のバランス

サイト運営に慣れてくると「全てのページでなるべく同じパーツを使い回したい」と思うようになります。その場合は、あえて専用のフォルダを設定せず、layouts/_default/list.html などの共通型紙（デフォルトテンプレート）をベースにするのが賢い方法です。
「ここだけはデザインを大きく変えたい！」という特別なコーナー（セクション）を作りたい時だけ、専用フォルダ（layouts/news/ など）を作成するようにしましょう。基本は共通化、こだわりたい所だけ特別化。これが長く運用しやすいテーマ作りのコツです！😉