【例】記事タイトルをここに(このサンプル記事はブランド側で書き換えてください)
この記事はテンプレートの雛形です。フォーマット規約と本文の流れを確認するためのサンプルとして残しています。実運用ではこのファイルを削除するか、ブランド固有の記事に書き換えてください。
フロントマター規約
各記事の先頭には YAML フロントマターが必要です。src/lib/blog.ts で読み取られ、一覧表示・関連記事・OG 画像生成などに使われます。
| キー | 型 | 必須 | 用途 |
|---|---|---|---|
title |
string | 必須 | ページタイトル・OG 画像 |
description |
string | 必須 | meta description・記事一覧スニペット |
date |
string | 必須 | 公開日(YYYY-MM-DD)。一覧の並び替えに使う |
updated |
string | 任意 | 更新日(YYYY-MM-DD)。指定するとビルドが厳格チェックする |
category |
string | 必須 | カテゴリ。記事末の CTA 出し分けや関連記事の優先度に使う |
featured |
boolean | 任意 | true にすると「まずはここから」枠に固定表示される |
thumbnail |
string | 任意 | /public 配下のパス。OG 画像と一覧サムネで使う |
目次の作り方
本文中に「目次」と書いた段落の直後にリストを置くと、ビルド時に各見出しへのアンカーリンクへ自動変換されます。番号は無視されるので、リスト項目のテキストを見出しと一致させてください。
目次
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
強調と引用
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 太字 は紺色で強調されます。Excepteur sint occaecat cupidatat non proident.
引用ブロックの例。左に金色の柱が立ち、淡い面に乗ります。ブランドの色トークンは
src/app/theme.cssで差し替えできます。
Consectetur adipiscing elit
Sunt in culpa qui officia deserunt mollit anim id est laborum. リスト項目の例:
- 項目 1:Lorem ipsum
- 項目 2:Dolor sit amet
- 項目 3:Consectetur adipiscing
コードブロックではなく散文の例
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Sed do eiusmod tempor incididunt
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
よくある質問
この見出し配下に ### Q.〜 の形式で書くと、ビルド時に FAQPage JSON-LD が自動生成されます。質問は Q. Q: Q: のいずれでも認識されます。
Q. これはサンプル質問ですか?
A. はい。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Q. 削除しても問題ありませんか?
A. 問題ありません。このサンプル記事はブランド固有の記事に置き換えてください。