はじめに:そのコピペ、表示崩れていませんか?
ブログの記事執筆、お疲れ様です。
「書きたいことに集中したいから、下書きは Markdown でサッと書きたい」 そう考える方は多いのではないでしょうか。
Markdown は HTML を直接書くよりもシンプルで、文章の構造に集中できる素晴らしいツールです。 しかし、意気揚々と書き上げた Markdown の文章を、いざ microCMS にコピー&ペーストしてみると… 「あれ?見出しの大きさが違う…」 「テーブル(表)が画面からはみ出して、スマホで見ると崩れてる!」 そんな経験はありませんか?
実はこれ、microCMS のリッチエディタが Markdown を独自のルールで HTML に変換するために起こる現象です。私もこの「クセ」に少し悩まされました。
この記事では、そんな microCMS のクセを理解し、Markdown を使って効率的かつ綺麗に記事を作成するための「万能テンプレート」と「運用ルール」を、私の備忘録も兼ねてご紹介します。
結論:この「テンプレート」と「3 つのルール」で解決!
先に結論からお伝えします。
Markdown でのブログ執筆を快適にする方法は、以下の通りです。
- 万能テンプレートを使う:毎回記法を調べなくても済むように、基本的な書き方を網羅したテンプレートを用意する。
- ルール ①「コピペ後は必ずプレビュー」:リッチエディタを過信せず、必ず表示を確認し、崩れていたら手動で修正する。
- ルール ②「複雑なテーブルは使わない」:スマホでの表示崩れを防ぐため、テーブルはシンプルなものに限定する。
- ルール ③「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
- サブアイテム
- 最初の項目
- 2 番目の項目
テーブル (Table) 【重要ルール】
microCMS のリッチエディタでは、複雑なテーブルはスマホで表示が崩れがちです。
横に長くなりすぎない、2〜3 列程度のシンプルなテーブルに留めるのが安全です。
markdown
| ヘッダー 1 | ヘッダー 2 |
| :--------- | :--------- |
| セル A | セル B |
| セル C | セル D |
まとめ:賢くツールと付き合って、執筆に集中しよう
今回は、microCMS で Markdown を快適に使うためのテンプレートと運用ルールをご紹介しました。
- テンプレートを使って効率的に下書きする。
- リッチエディタの「クセ」を理解し、プレビューでの確認と手動修正を怠らない。
- 複雑なテーブルは避けるなど、表示が崩れない範囲で Markdown を活用する。
ツールに振り回されるのではなく、その特性を理解して賢く使いこなすことで、私たちは本来最も時間をかけるべき「読者のためのコンテンツ作成」に集中できます。 このテンプレートが、あなたのブログ執筆の一助となれば幸いです。