MDXブログ記事の書き方（備忘録）

この記事は、MDXでブログを書くときに「毎回迷わないための型」をまとめた備忘録です。
※内容は コピペして使える 形を意識しています。

1. 改行と段落の基本（ここが一番ハマる）#

Markdownの改行は、基本的に Enterだけだと段落が分かれません。

この行はEnterで改行しているけど、 同じ段落のまま扱われることが多いです。

段落を分けたい場合は 空行を1行 入れます。

こうすると段落が分かれます。

明示的に改行したいとき：<br />#

住所や、見た目どおりに改行したい場面では <br /> が便利です。
この行は必ず次の行に落ちます。

住所などの例#

東京都〇〇区
1-2-3
My Building 101

2. 見出しのルール（記事の骨組み）#

• # は基本使わない（記事タイトルは frontmatter の title に任せる）
• 本文は ## から始める
• 章の中は ### を使う

3. リンク（外部 / 内部）#

外部リンク#

外部リンク：Google

内部リンク#

内部リンク：ブログ一覧へ

4. 画像（public 配下を参照）#

このサイトでは /images/blog/... を使う想定。

5. コードブロック（言語指定を付ける）#

言語を付けると、見やすくなります。

const msg = "Hello MDX";
console.log(msg);

インラインコードは const x = 1 のように書きます。

6. 引用（メモ・補足に便利）#

これは引用です。要点の補足や、注意書きに便利。

7. 区切り線（話題の切り替え）#

--- を書くと、セクションを切り替えやすいです。

8. 表（一覧に向いている）#

9. この記事のテンプレ（コピペ用）#

以下を新規記事作成時にコピペして使います。
※ テンプレ内にコードブロックがあるので、外側は ````（4つ）で囲っています。

---
title: "記事タイトル"
slug: "slug"
date: "2026-01-19T21:30:00+09:00"
description: "記事の説明（一覧に出る）"
tags: ["MDX"]
draft: true
---
 
## 見出し
 
本文
 
### サブ見出し
 
- 箇条書き
- 箇条書き
 
```ts
console.log("code");
```
 
> 引用
 
---

まとめ#

• 段落は空行、強制改行は <br />
• 画像は /images/blog/... を参照
• コードは 言語指定付き の ``` ブロックで書く
• テンプレを用意すると、毎回迷わない