Markdown記法の書き方【見出し・表・リスト(箇条書き)・引用などなど】

書き方・継続のコツ
Markdown記法の書き方【見出し・表・リスト(箇条書き)・引用などなど】
この記事で解決できるお悩み
  • Markdown記法って覚えること多いの?
  • どうやって書けばいいのかわからない
  • 何から覚えたらいいの?


この記事では実際のプレビュー画面を表示した画像を使用してMarkdown記法の書き方を初心者にもわかりやすく解説しているので、直感的に学ぶことができますよ!

初めてMarkdown記法を学ぼうと思っている方は、この記事で解説するMarkdown記法の解説を確認しながら、1,2回ブログ記事を頑張って書いてみてください。

ただ読むよりも実際に実践しながらだとすぐに覚えれます!

僕はMarkdown記法を覚えたことで、これまで3日かかっていたブログ記事執筆が今では3~5時間にまで短縮することができ、1日1記事ペースで難なく書けるようなりました!

この機会にあなたもぜひMarkdown記法をマスターしましょう!

Markdown記法の書き方

MarkdownではHTMLで表す見出しやテーブル(表)、リスト(箇条書き)、引用などなど様々なタグに対応した簡単な記号で書くことができます。

さっそく各タグの書き方について簡単な解説と画像でわかりやすく解説していきますね!

なお、解説内で使用している各実例画像はVSCodeを使用して右側にリアルタイムプレビューを表示した画像です。

※画像内入力画面に時々表示されている黄色波線は気にしないでください。

よく使うMarkdown記法

見出し

行頭に『#』を付けると見出しになります。

その他適用条件
  • 『#』のあとは必ず半角空白を入力します。
Markdown記法 - 見出し

通常リスト/箇条書き(HTML:ul)

行頭に『』『+』『*』を付けると箇条書きリスト(HTML:<ul>)になります。

その他適用条件
  • 各記号のあとは必ず半角空白を入力
  • リストの上下は空白行
Markdown記法 - リスト(箇条書き)

ネスト(入れ子)

リスト内で記号の前に半角空白を入力することでさらにリストを入れるネスト(入れ子)も可能です。

その他適用条件
  • ネストリストの場合は上下空白行は不要で、最上位リストの上下に空白があればOK
Markdown記法 - ネストリスト(箇条書き)

VSCode上でWordPress用にネストリストを書く場合は、ネスト行頭の半角空白4文字で1ネストになるようです。

順序リスト/箇条書き(HTML:ol)

行頭に『1.』や『2.』を付けると箇条書きリスト(HTML:<ol>)になります。

その他適用条件
  • 『1.』や『2.』のあとは必ず半角空白を入力
  • リストの上下は空白行
Markdown記法 - 順序リスト(箇条書き)

引用

行頭に『>』を付けると引用になります。

また、引用内で他Markdownタグを利用することも可能です。

その他適用条件
  • >』のあとは必ず半角空白を入力
  • 引用の上下に空白行(引用が長く続く場合は、最初と最後の行だけでOK)
  • 1行が長く続いて折返しただけなら最初の行頭のみでOK
  • 引用内で改行する場合は再度行頭に『>』を付ける
Markdown記法 - 引用

引用内で他Markdownタグを利用する場合、上下に空白行が必要などのルールは引用内でも適用されることに注意してください。

テーブル(表)

|』で囲むことでテーブル表示になります。

最上段がヘッダ行、2段目でテーブルセル内の位置指定(左寄せ、右寄せなど)をします。

その他適用条件
  • 2段目のセル内位置指定は必ず記載
Markdown記法 - テーブル(表)

水平線

*』『』『_』のいずれかを3個以上連続入力で水平線になります。

Markdown記法 - 水平線

たまに使うMarkdown記法

テキスト装飾【太字】

**』または『__(アンダースコア2個)』で文字を囲みます。

1つで囲めばイタリック、2つで囲めば太字になります。

Markdown記法 - 太字

太字とはHTMLのクラス装飾ではなく、<strong>タグによる太字です。SEO対策上、多用しないように気をつけてください。

テキスト装飾【イタリック(斜め文字)】

*』または『_』で文字を囲みます。

Markdown記法 - イタリック

イタリックがプレビューでは上手く表示されず、なぜか入力欄の左側で斜め文字に・・・おそらくVSCodeのバグですかね?笑

テキスト装飾【取り消し線】

~~(チルダ2個)』で囲むと取り消し線が表示されます。

Markdown記法 - 取り消し線

リンク

[文字列](URL)』の形式で入力します。

Markdown記法 - リンク

画像

![Alt](URL "補足説明")』の形式で入力します。

『Alt』は画像が何を意味するのか文字で表現するための代替文字のことで、SEO対策に有効です。

『”補足説明”』(HTML:title属性)はマウスを載せた時にポップアップで小さく表示される補足説明のようなもののことで、省略OKです。

Markdown記法 - 画像

コード

`』で【HTML・CSS・PHP等】のコードを囲むと、ただの文字として表示できるようになります。

`』一つで囲めばインライン(文中内表示)として、『“`』3つで囲めば行単位でブロックとして使えます。

その他適用条件
  • ブロックで囲む場合は上下に空白行
Markdown記法 - コード

コード表示はほとんどの方が使うことはないと思いますが、例えばブログ記事上でHTMLタグや本記事のようにMarkdownの解説をしたい時に役立ちますね!

例えば、先程のリンクのMarkdown記法での書き方の解説ですが、そのままWordPressに貼り付けると以下のようにコードとして認識されてしまい、コード自体の説明になっていません。

Markdown記法 - コード表示前

そこで、『`』で囲むとコードではなく文字として認識されるため、しっかりとコードの解説ができるようになるわけですね。

Markdown記法 - コード表示後

まとめ

一通りMarkdown記法を見てみると、意外と覚えることは少ないことがわかったかと思います。

たったこれだけを覚えるだけで、ブログ作成スピードが劇的に早くなるなら覚えないほうが損ですね!

1,2回Markdown記法で記事を書けば自然とほとんど覚えることができるので、ぜひ頑張ってみてください!

さらにブログ1記事書く時間を短縮したい方は以下記事も参考にしてみてくださいね。

▼ コメント ▼

タイトルとURLをコピーしました