東京より愛を込めて。

知識・経験の棚卸

【随時更新】Markdown記法の忘備録

はてなブログの編集モード*1には、以下の3種類があります。

  1. 見たままモード
  2. はてな記法モード
  3. Markdownモード

初期設定では「見たままモード」になっていますが、本ブログの作成においては、「3. Markdownモード」を使用しています。

staff.hatenablog.com

この編集モードに関して、過去の記事に遡及して編集モードを変更することはできないので、ブログ開始時に選んでおかないと後々面倒になります。
「Markdownモード」を使用してしばらく経ちましたが、慣れてくるととても使いやすく便利なので、このままいく予定です。

そもそも、3つある中でなぜ「Markdownモード」を選んだのか。
それはまず、h2見出しの使いやすさです。「見たままモード」や「はてな記法」では、デフォルトでh3見出しから開始するので、h2見出しに変更するのに少し手間がかかります。 その点、Markdown記法では、h2見出しは「##」と記載するだけなのでシンプルで使いやすい。見出しはh1→h2→h3のように階層的に使用するのがSEO上望ましい*2ことから、階層的に使用するようにしています。(h1ブログタイトルや記事タイトルに使われています。)
次に、他のサービス(githubやQiita)でも利用できるからです。「見たままモード」は、調べていると不具合が多いらしい。編集を重ねるとHTMLが変な形で出力されて見た目が崩れていくんだとか。ということで、「はてな記法」「Markdownモード」のどちらか。どうせなら、他のサービスでも使えるものを利用しようということで選びました。(「はてな記法」は、はてなのサービスでしか使えません。)
最後に、書きやすさとカスタマイズ性のバランスがいいからです。Markdownには、多くの記法がありますが、実際に記事作成の際に使うのは指折り数えれるぐらいです。何記事か書いていくうちに自然に身についていきます。それだけでなく、HTMLを直接記載することも可能なので、記事を細かくカスタマイズしたいときにも対応できるというバランスのいい編集モードだと思いました。加えて、はてなブログをアプリやブラウザを使ってスマホから書くときも、全然手間にはならず書きやすくなっています。

以上の理由から、「Markdownモード」を選択しています。将来的にSEOだとか、ブログの見た目もこだわりたいっていう人には断然お勧めです。

Markdown

では、僕が記事を作成する際に使うMarkdonw記法について、備忘メモを。(はてなブログのツールバーで対応できるものについては割愛しています。 )

見出し

見出しについては、h1見出しはブログタイトルや記事タイトルに使われているため、h2見出しから使用しています。前述したとおり、見出しはh1→h2→h3のように階層的に使用するのがSEO上望ましいことから、階層的に使用するようにしています。そして、記事で使用するのはh3見出しまで。あまり階層化しすぎると、読みづらくなるから、また、1コンテンツ1メッセージが基本なので、h4見出しまでは必要ないと思われるからです。

Markdown記法

## h2見出し
### h3見出し

改行と段落

段落内で改行する際には、改行したい箇所にスペースを2つ入れます。段落を変える際には、空白行を1行設けます。(1行以上空けても結果は同じ。)

Markdown記法

改行したい文末に、スペースを2つ入れます。(スペース×2)  
そうすれば、改行がなされます。

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

水平線

記事で区切りをつけたいところに、水平線を設けることができます。

Markdown記法

水平線で挟みたい場所に、"---"と入力します。
---
そうすると、水平線で区切ることができます。

ソースコード

htmlやcssなどのソースコードを記載したいときに、そのまま記載すると、コードとして認識されてしまいますので、ソースコードをそのまま表示するための記法を用います。「```」で挟んであげます。

また、シンタックスハイライトという、ソースコードを色分けしてくれる機能も便利です。

help.hatenablog.com

リスト(ツールバー)

リスト(箇条書き・番号付きリスト)は、ツールバーで使用できますが、リストの上下に空白行を設けないとリストとして認識されない点に留意が必要です。
Markdown記法

リストの上に空白行を設ける。

1. リスト

リストの下に空白行を設ける。

HTML

一部、Markdown記法では対応できないものもあるので、HTMLに関する忘備録を。

改行(複数)

段落内で1行だけの改行であればMarkdownで対応していますが、複数回の場合はHTMLで直接記入する必要があります。 HTML

複数行改行したいところに、改行したいだけ。<br>
<br>
<br>
ここでは3つ入れたので、3回の改行です。

見た目
複数行改行したいところに、改行したいだけ。


ここでは3つ入れたので、3回の改行です。

*1:編集モードの選択に関しては、こちらご参照。編集モード - はてなブログ ヘルプ

*2:詳細は、こちらを参照。見出しタグの使い方と絶対に知っておくべき注意点