ykitaa.dev
約 1 分

記事の書き方チートシート

Markdownブログ運用

自分用のメモとして、このブログで使える記法をまとめておきます。

frontmatter

記事の先頭に次のメタデータを書きます。title と date は必須です。

---
title: "記事のタイトル"
date: 2026-09-18
updated: 2026-09-20 # 任意。更新日
description: "一覧や OGP に出る説明文" # 任意
tags: ["Markdown", "ブログ運用"] # 任意
externalUrl: "https://zenn.dev/..." # 任意。外部に投稿した記事へのリンクだけを載せる
draft: false # true にすると本番では公開されない
---

ファイル名がそのまま URL になります（markdown-cheatsheet.md → /posts/markdown-cheatsheet/）。

外部に投稿した記事を並べる

Zenn などに投稿した記事は、externalUrl を書いておくと一覧に混ぜられます。本文は不要です。

---
title: "Zenn に書いた記事のタイトル"
date: 2026-09-21
description: "一覧に出る説明文"
tags: ["Zenn"]
externalUrl: "https://zenn.dev/ykitaa/articles/xxxx"
draft: false
---

一覧のタイトルをクリックすると、そのまま外部サイトへ飛びます。

見出しと目次

## と ### の見出しは自動で目次に載ります。記事タイトルが # にあたるので、 本文では ## から使いはじめます。

コードブロック

言語名を付けるとシンタックスハイライトされます。title="..." でファイル名、 {2-3} で行のハイライトができます。

```ts title="src/lib/sum.ts" {2-3}
export function sum(values: number[]) {
  // この 2 行がハイライトされる
  return values.reduce((total, value) => total + value, 0);
}
```

実際の表示はこうなります。

src/lib/sum.ts
export function sum(values: number[]) {
  // この 2 行がハイライトされる
  return values.reduce((total, value) => total + value, 0);
}

表・引用・リスト

記法 用途
**太字** 強調
`code` インラインコード
> 引用 引用

引用はこう表示されます。

  • 箇条書き
    • ネストもできる
  • チェックリスト
  • 完了したもの

画像

public/ に置いた画像は絶対パスで参照します。

![代替テキスト](/images/example.png)

リンク

外部リンクは自動で別タブ（target="_blank"）になります。 内部リンクは /posts/markdown-cheatsheet のようにサイト内パスで書きます。