【はてなブログ】HTMLが分かるなら「見たままモード」より「Markdownモード」で記事を書く方が捗るかも

まだまだはてなブログフレッシャー（長嶋茂雄さん仰る所の新人）であるこの私。

試行錯誤の真っ只中でありますが、少し前から編集方法を「見たままモード」から「Markdownモード」に変更しました。

今回は何故編集方法を変更したのか、また変えてみてどうだったのか、について書いてみようと思います。

始めは「見たままモード」で記事を書いていたが……

はてなブログには、
「見たままモード」「はてな記法モード」「Markdownモード」
の3種類の記事の書き方があります。

「見たままモード」は読んで字の如く、実際のブログの表示に近い状態で編集できるモードです。

「見たままモード」の編集画面

HTMLタグをいじりたい場合は、上図の赤い四角で囲った部分をクリックすると、「HTML編集モード」に切り替わります。

しかし「見たままモード」と「HTML編集モード」を行ったり来たりしていると困ったことがいくつか……

「見たままモード」から「HTML編集モード」に切り替えてみると、なんだかやたらに<p>タグが列挙されています。

それらを削除して、また「見たままモード」に戻り、その後また「HTML編集モード」に切り替えてみると、削除したはずの<p>タグがちょっと復活していたりするんですよね。

また、

「HTML編集モード」の編集画面

こんなのもう……

目が、目がァァァ～！

という風にいつか視力を殺（や）られかねませんわ！
（画像は「ニコニコ大百科」からお借りしました）

いや、HTMLは元々見づらいものですよ。
しかし、このはてなブログの「HTML編集モード」はその中でもかなりキツイ方かも……。

まず、いやがらせか、という位文字が小さいですし、それと、少しでも見やすくなるようにと<br>タグの上下に間を空けたりしても、「見たままモード」と「HTML編集モード」を行き来している内にその空行が削除されてしまうのです。

また、何故か<br clear="all">や<br style="clear:both">という回り込みの解除をするタグが何度も何度も抹消されるという謎の現象も起こり、1つの記事を書き上げるまでに涙目にさせられたこと数知れず……といった感じでした。

「Markdownモード」について調べてみることに

という訳で、確か他の編集の仕方があったなァ……とそれらについて調べてみることにしました。

「はてな記法モード」は、字面からしてはてな特有の編集方法なのだろうと推測できますので、つぶしが利かなそうだな……と思いまして、もう1つのMarkdownについて調べてみることに。

すると、

Markdownは、簡易な記法でWeb文書を記述できるマークアップ言語
Markdown記法に対応しました

と「はてなブログ開発ブログ」に書いてあるではありませんか！

簡易！　そりゃあいい！　と、更に「はてなブログ　Markdown」などという言葉で検索をかけて、どのように書くのか調べてみると……

簡……易……？

最初はちんぷんかんぷんでした。
しかし実際にやってみると、はてなブログで記事を書くだけであれば、Markdownについてそれほど新しく覚える必要がないことが分かりました。

なぜなら……。

「Markdownモード」ではHTMLタグをそのまま使用することも出来る

これを知った時は目からウロコでした。
「Markdownモード」では、Markdown独自の書き方でなく、HTMLタグをそのまま使用することも可能なのです。

また、結局HTMLタグでしか出来ない、ということもいくつかあるようです（aタグのtarget="_blank"や<br>を連続して打つなど）。

それと、画像挿入は右横の「写真投稿」や「Googleフォト貼り付け」から行うことがほとんどですし、引用や文字強調、サイズの変更なども上部のツールバーのボタンで出来てしまいます。

私が覚えたMarkdown記法は今の所4つだけ

空行を上下に一行ずつ入れると段落（pタグ）扱い

行末に半角スペースを2個入れると改行（brタグ）扱い

注意：行末以外に半角スペースを2個打っても改行されない

行頭に#を打つと見出し（hタグ）扱い

#見出し1と打つと、

見出し1

---

####見出し4と打つと、

見出し4

---

#####見出し5と打つと、

見出し5

---

本当は上の見出し1が一番大きくて段々文字サイズが小さくなるはずなのですが、テンプレートの仕様でちょっとわかりづらいですね……。
それと、見出し2、3は自動で目次に入ってしまうので抜かしてあります。

ハイフンを3つ以上打つと水平線（hrタグ）扱い

既に上で使いましたが

---と打つと、

---

水平線になります。

これだけで今の所なんとかなっています。

「Markdownモード」の編集画面は見やすい

比較のため、もう一度「HTML編集画面」をご覧ください。

相変わらず「目が、目がァ～！」となりますね。

一方…… 「Markdownモード」の編集画面

「HTML編集画面」よりはだいぶスッキリと感じられませんでしょうか。

また、上図の「リアルタイムプレビュー」というマークを押すと、

実際のブログの表示に近いものが右側に表示される仕様になっています。
なので、「見たままモード」と「HTML編集モード」のように、いちいち画面を切り替える必要がない訳です。

この状態でもう一度「リアルタイムプレビュー」マークを押すと、タグだけの画面に戻ります。

「Markdownモード」に切り替えるには

はてなブログの管理画面の左横にある「設定」をクリックして、

ちょっと下の方に行くと「編集モード」という欄がありますので、 「Markdownモード」を選びます。

ただこの設定をしても、「Markdownモード」が適用されるのは次に新しい記事を書く時からです。
残念ながら「見たままモード」で書いた過去記事を編集する時はやはり「見たままモード」のままです。

結論

という訳で、HTMLがある程度分かる方であれば、断然「Markdownモード」で記事を書いた方が捗る気がします。
目が殺（や）られる危険性もだいぶ減りそうですしね！
まだ使ったことがないという方は是非一度試してみてはいかがでしょうか。

追記

段落の上や下にスペースを入れたい場合はHTMLタグを使います。

段落の上にスペースを入れたい場合

<p style="margin-top:5em">段落の上に5行分のスペースが空きます。</p>

段落の上に5行分のスペースが空きます。

段落の下にスペースを入れたい場合

<p style="margin-bottom:5em">段落の下に5行分のスペースが空きます。</p>

段落の下に5行分のスペースが空きます。

段落の上下両方にスペースを入れたい場合

<p style="margin-top:5em;margin-bottom:5em">段落の上下両方に5行分のスペースが空きます。</p>

段落の上下両方に5行分のスペースが空きます。

5em＝5行分ということなので、この数字を増やせばスペースが大きくなりますし、数字を減らせばスペースが小さくなります。