楽してきれいな記事を書きたいあなたへ!microCMSで使えるMarkdownテンプレート活用術

公開日: 2025/7/25
楽してきれいな記事を書きたいあなたへ!microCMSで使えるMarkdownテンプレート活用術

はじめに:そのコピペ、表示崩れていませんか?

ブログの記事執筆、お疲れ様です。
「書きたいことに集中したいから、下書きは Markdown でサッと書きたい」 そう考える方は多いのではないでしょうか。
Markdown は HTML を直接書くよりもシンプルで、文章の構造に集中できる素晴らしいツールです。 しかし、意気揚々と書き上げた Markdown の文章を、いざ microCMS にコピー&ペーストしてみると… 「あれ?見出しの大きさが違う…」 「テーブル(表)が画面からはみ出して、スマホで見ると崩れてる!」 そんな経験はありませんか?
実はこれ、microCMS のリッチエディタが Markdown を独自のルールで HTML に変換するために起こる現象です。私もこの「クセ」に少し悩まされました。
この記事では、そんな microCMS のクセを理解し、Markdown を使って効率的かつ綺麗に記事を作成するための「万能テンプレート」「運用ルール」を、私の備忘録も兼ねてご紹介します。

結論:この「テンプレート」と「3 つのルール」で解決!

先に結論からお伝えします。
Markdown でのブログ執筆を快適にする方法は、以下の通りです。

  1. 万能テンプレートを使う:毎回記法を調べなくても済むように、基本的な書き方を網羅したテンプレートを用意する。
  2. ルール ①「コピペ後は必ずプレビュー」:リッチエディタを過信せず、必ず表示を確認し、崩れていたら手動で修正する。
  3. ルール ②「複雑なテーブルは使わない」:スマホでの表示崩れを防ぐため、テーブルはシンプルなものに限定する。
  4. ルール ③「Frontmatter の罠に注意」:`status`や`eyecatch`など、エラーになりやすい項目を把握しておく。

これらを守るだけで、執筆のストレスは大幅に軽減されます。 では、その中核となる「万能テンプレート」を具体的に見ていきましょう。

【コピーして使える】万能 Markdown テンプレート

私が実際に記事作成のベースとして使っているテンプレートがこちらです。

このファイル自体が Markdown 記法の使い方見本にもなっています。

Frontmatter(記事の基本情報) 記事のタイトルやカテゴリなどを設定する部分です。

特に注意が必要なのは `status` と `eyecatch` です。
```markdown ---
title: (キャッチーなタイトルを30文字前後で)
subtitle: (記事のサブタイトルを50文字前後で
excerpt: (記事の抜粋・要約を120文字程度で記述します
category: "xxxxxxxx" # microCMSのカテゴリ(参照フィールド)のコンテンツIDを入力
eyecatch: url: "" # 画像URLの末尾に「?w=...」等が付いている場合は削除し、必ずダブルクォーテーションで囲ってください。未設定の場合はeyecatchブロックごとコメントアウト(#)推奨 height: 800 width: 1200
tags: ["タグ1", "タグ2"]
status: "published" # フリープランでは "draft" はエラーになる場合があるため "published" を推奨

本文(Markdown 記法リファレンス)

ここからは本文の書き方です。見出しやリストなど、よく使う記法をまとめました。

見出し (Headings)

記事タイトルが (h1) になるため、本文中の見出しは (h2) から始める**のが基本です。

markdown

見出し 2 (h2)

見出し 3 (h3)

見出し 4 (h4)

段落と改行

段落を変えるには、間に空行を 1 行入れます。
段落内で強制的に改行したい場合は、行末に半角スペースを 2 つ入れます。

テキスト装飾 (Text Formatting) 以下のように、書き方の見本を ` `` ` (バッククォート)で囲んで示すと、読者にとって分かりやすい記事になります。

これは太字です(`**太字**` と書きます)

これは斜体です_ (`*斜体*` と書きます)

これは打ち消し線です (`~~打ち消し線~~` と書きます)

これはインラインコードです(`` `インラインコード` `` と書きます)

リスト (Lists) markdown

  • アイテム 1
  • アイテム 2
    • サブアイテム
  1. 最初の項目
  2. 2 番目の項目

テーブル (Table) 【重要ルール
microCMS のリッチエディタでは、複雑なテーブルはスマホで表示が崩れがちです。

横に長くなりすぎない、2〜3 列程度のシンプルなテーブルに留めるのが安全です。

markdown

| ヘッダー 1 | ヘッダー 2 | 
| :--------- | :--------- | 
| セル A | セル B |
 | セル C | セル D | 

まとめ:賢くツールと付き合って、執筆に集中しよう

今回は、microCMS で Markdown を快適に使うためのテンプレートと運用ルールをご紹介しました。

  1. テンプレートを使って効率的に下書きする。
  2. リッチエディタの「クセ」を理解し、プレビューでの確認と手動修正を怠らない。
  3. 複雑なテーブルは避けるなど、表示が崩れない範囲で Markdown を活用する。

ツールに振り回されるのではなく、その特性を理解して賢く使いこなすことで、私たちは本来最も時間をかけるべき「読者のためのコンテンツ作成」に集中できます。 このテンプレートが、あなたのブログ執筆の一助となれば幸いです。