hugo new コマンドで記事のファイル（.md）を作成したけれど、「実際に中身はどうやって書けばいいの？」「先頭にある謎の記号は何？」 と戸惑う方も多いでしょう。

この記事では、Hugoに記事を認識させるための設定部分である 「Front Matter（フロントマター）」 と、本文をスラスラ記述するための 「Markdown（マークダウン記法）」 の基礎について、初心者向けに分かりやすく解説します！

1. Front Matter (フロントマター)

記事ファイルの先頭にある +++ で囲まれた部分は Front Matter と呼ばれ、記事の設定情報を書く場所です。

+++
title = '私の初めての記事'  # 記事のタイトル
date = 2024-01-01T10:00:00+09:00 # 投稿日時
draft = true # 下書きかどうか (trueだとビルドされない)
categories = ['Web制作'] # カテゴリー
tags = ['Hugo', '入門'] # タグ
+++
  • title: 記事のタイトル。
  • date: 記事の日付。
    • 2024-01-01T10:00:00+09:00 のように書きます。
    • これは 「2024年1月1日 10時00分00秒（日本時間）」 という意味です。
    • hugo new コマンドで作れば勝手に今の時間が入るので、基本はそのままでOKです！
    • ⚠️ 注意: ここを 未来の日付（明日以降など）にすると、その時間になるまで記事は 表示されません（ビルド対象外になります）。
    • 「あれ？記事が表示されないぞ？」と思ったら、日付を確認してみましょう。
    • 詳しくは 【コラム】「記事が表示されない！」犯人は未来の日付かも？ で解説しています。
  • draft: true にすると下書き扱いになり、通常のビルドでは表示されません。公開するときは false にしましょう。
  • tags: 記事にタグ（付箋）を付けます。
  • image: 記事のサムネイル画像（アイキャッチ）を指定します。
    • static/images/ フォルダにある画像パスを書きます（例: images/my-post.png）。
    • ⚠️ 画像サイズの推奨: 横幅は 1200px〜1600px、容量は 200KB〜300KB以下 が目安です。
    • スマホで撮った写真はそのまま載せると巨大すぎる（数MB）ので、必ずリサイズしましょう。
    • 全自動でリサイズしたい場合は 【上級編】画像の自動リサイズ・軽量化 (Hugo Pipes) を参考にしてください。

2. Markdown (マークダウン)

Front Matterの下には、記事の本文を書きます。
ここは Markdown記法 という書き方を使います。簡単ですよ！

見出し

# 見出し1 (一番大きい)
## 見出し2
### 見出し3

👇 実際の表示:

見出し1 (一番大きい)

見出し2

見出し3

リスト

- リスト項目1
- リスト項目2

👇 実際の表示:

  • リスト項目1
  • リスト項目2

リンク

[Hugo公式サイト](https://gohugo.io)
[記事一覧へ](/posts/)

👇 実際の表示:
Hugo公式サイト
記事一覧へ

パスの指定パターン:

  • 外部サイト: https:// から始まるURLを全て書きます。
  • サイト内（絶対パス）: / から始めると、サイトのトップ（ルート）からの場所を指定できます。
    • 例: / (トップページ), /posts/ (記事一覧)
  • ※ヒント: 特定の記事にリンクしたい場合は、ファイル名だけで指定できる便利な機能（ref）があります。
    [内部リンクの貼り方](https://diyhugo.com/posts/internal-links/)
    詳しくは 内部リンクの貼り方 を見てください。

⚠️ 外部リンクを「別タブ」で開きたい？

基本設定では、すべてのリンクが同じタブで開きます。
「外部リンクだけ自動的に新しいタブで開く」ように設定することも可能です。毎回 target="_blank" を書く必要がなくなります！
👉 【Tips】外部リンクだけ自動で「新しいタブ」で開く方法

引用

> 引用したい文章

👇 実際の表示:

引用したい文章

これで、見出し・リスト・リンク・引用といった基本的な装飾ができます。

テーブル (表)

| タイトル | 金額 |
| :--- | :--- |
| りんご | 100円 |
| みかん | 50円 |

👇 実際の表示:

タイトル金額
りんご100円
みかん50円

💡 スマホ対応（横スクロール）のヒント:
Markdownのテーブルは、画面幅が狭いスマホで見るとレイアウトが崩れたり、画面外にはみ出して見えなくなってしまうことがあります。
これを防ぐために、Hugoの機能（Markdown Render Hooks）を使って、テーブルを自動的に <div class="table-wrapper"> で囲むようにカスタマイズし、CSSで overflow-x: auto; を設定することで横スクロール可能にできます。モダンなHugo環境では、layouts/_markup/render-table.html を作成して対応します。
この「変換の仕組み」やカスタマイズ方法については、 【拡張】Markdownの変換ルールを自在に操る（Markdown Render Hooks） で詳しく解説しています。

文字の装飾

**太字**
*斜体*
~~取り消し線~~

👇 実際の表示:
太字
斜体
取り消し線

⚠️ 太字（Bold）が効かない時は？

もし **太字** と書いたのに、プレビューで **太字** のまま表示されてしまう場合は、 前後に半角スペース を入れてみてください。
詳しくは 【Tips】日本語で太字（Bold）が効かない！？原因と対策 をどうぞ。

3. 独自のブロック表現 (Custom Blocks)

Markdownには <div> タグのように「文章を囲ってグループ化する」専用の記法はありません。
しかし、いくつかのアプローチで「それっぽく」見せることができます。

1. 引用 (Blockquote) を使う

一番手軽な方法です。CSSでデザインを変えれば、補足情報ボックスのようにも見せられます。

> ここは引用ですが、
> デザイン次第で「コラム」のようにも使えます。

👇 実際の表示:

ここは引用ですが、
デザイン次第で「コラム」のようにも使えます。

2. 独自拡張「Admonitions / Callouts」を使う（推奨）

多くのテーマや拡張機能でサポートされている記法です（GitHubやObsidianでも使えます）。
「注釈」「警告」「ヒント」などを分かりやすく表示できます。

> [!NOTE]
> これはノートです。

👇 実際の表示:

[!NOTE]
これはノートです。

> [!WARNING]
> これは警告です。

👇 実際の表示:

[!WARNING]
これは警告です。

※ テーマによってはCSSの追加が必要な場合があります。

3. コードブロック (Code Block) を使う

プログラムコードだけでなく、ただのテキストボックスとしても使えます。

```text
ここにあらすじを書いたり...
```

[!TIP]
コードブロックの中にコードブロックを書きたい時は？
バッククォートの数を 外側ほど多く します。
中身を ``` (3つ) で書きたいなら、外側を ```` (4つ) で囲めばOKです！マトリョーシカと同じですね 🪆

👇 実際の表示:

ここにあらすじを書いたり...

4. HTMLの div を直接書く

Markdownファイルの中にHTMLタグを直接書いても、ちゃんと動作します。
クラスを自由に付けられるので、デザインの自由度は最強です。

<div class="my-box" style="border: 1px solid #ccc; padding: 10px;">
  ここは自由なボックスです。<br>
  CSSで .my-box を装飾しましょう。
</div>

👇 実際の表示:

ここは自由なボックスです。
CSSで .my-box を装飾しましょう。

⚠️ 注意: Hugoの設定によっては、Markdown内でのHTML使用が制限されている（unsafe = true が必要）場合があります。

5. 罫線 (Horizontal Rule) で仕切る

囲むのではなく、区切ることでブロックを意識させる古典的な方法です。

ここから新しい話題です。

---

ここでおしまいです。

👇 実際の表示:

ここから新しい話題です。

ここでおしまいです。

これらを組み合わせることで、単調になりがちなMarkdown記事にリズムを生むことができます。
「ショートコード」を使えばさらに高度な装飾ボックスも作れますよ！（詳しくは ショートコードの使い方 を参照してください）

MarkdownとFront Matterをマスターして記事執筆を快適に

  • Front Matter: タイトル、日付、タグなどの「設定」を書く場所。ここで設定した値はテンプレート変数を通じてデザイン側に渡すことができる。
  • Markdown: 本文を効率よく書くための文字修飾の記法。見出しやリスト、リンクなどをシンプルな記号で表現できる。
  • 独自のブロック表現: 引用やコードブロックを少し工夫することで、目を引くコラムボックスなども作成可能。

この2つの要素の書き方をマスターすれば、Hugoでのブログ更新が驚くほど快適になります。ぜひ色々な記法を試しながら、自分らしい記事を書いてみてください！