はてなブログをMarkdown記法で書く方法について解説します。まだ不慣れですが、思ったよりも効率的に記事を書くことが出来るので、興味がある方は導入してみては如何ですか?
Markdown記法を導入した理由
はてなブログを始めてみたところ、Wordpressに比べて、記事が書きづらいなと感じました。
「見たまま編集」で編集すると、段落の隙間が異様に空いてしまったり、どれくらい空いているのかが分かづらいことが多々あります。プレビュー画面と若干違うこともある。
ならば「HTML編集」で書くか?と思っても、1からHTML書くのはめんどくさい。段落ごとにPタグを入れるなんて時間がかかってしょうがない。
調べて見ると、はてばブログはMarkdown記法に対応しているとのこと。以前から興味があったのでMarkdown記法で記事を書いてみることにしました。
慣れない方法なので、マスターできるか不安でしたが、思いの外、快適で効率的に文章を入力することが出来ます。
Markdownのメリットとデメリット
Markdown記法にはメリットとデメリットがあります。個人的にはメリットの方が多く感じますので、導入することに決めました。
メリット
- 記事執筆時間を短縮できる
- シンプルなので覚えやすい
- コードの見た目がスッキリして、元原稿が読みやすい
- はてなブログ以外にも使え、メモなどにも便利
デメリット
- 新規に覚える必要がある
- 慣れるまで多少の時間が必要
- HTMLすべてを置き換えることが出来ない
デメリットは覚えないとならないことくらいで、他に見あたりません。HTMLの細かい設定には対応できないので、そういった部分は通常のHTMLで記述する必要があります。
はてなブログでMarkdown記法を使えるように設定する
はてなブログ開発ブログの記事にもあるように、はてなブログは 2012-09-19からMarkdown記法に対応しています。
Markdown記法で記述するには、はてなブログの設定画面でMarkdown記法を使えるように設定する必要があります。デフォルトでは「見たまま編集」モードになっています。
まず、左側のメニューから「設定」を選びます。
設定画面が開いたら「編集モード」から「Markdownモード」を選択して設定を保存します。
これでMarkdown記法が使えるようになりました。
はてなブログで使える主なMarkdown記法
それでは、よく使うタグをご紹介します。どれも簡単に覚えることが出来ますので、不安になることはありませんよ〜。
見出しタグ
HTMLでいうところの<h1><h2>などのタグです。
Markdown記法では
見出しの前にシャープをつけます。
シャープ数が見出しの大きさになります
# 見出し → <h1>見出し1</h1>
## 見出し → <h2>見出し2</h2>
### 見出し → <h3>見出し3</h3>
#### 見出し → <h4>見出し4</h4>
はてなブログの「見たまま編集」で「大見出し」にあたるのが<h3>ですので、シャープ3つになります。
強調タグ
強調タグは、HTMLでは、<em>
や<strong>など。
Markdown記法では、強調したい文字の両脇に、アスタリスク(*)、もしくはアンダースコア(_)をつけます。どちらでもOKです。<em>
は斜体(イタリック)になる強調です。
<strong>
は太字(ボールド)になる強調です。
<em>斜体強調</em> アスタリスク1つ → *斜体強調*
<em>斜体強調</em> アンダースコア1つ → _斜体強調_
<strong>太字強調</strong> アスタリスク2つ → **太字強調**
<strong>太字強調</strong> アンダースコア2つ → __太字強調__
<strong><em>太字斜体強調</em></strong> アンダースコア3つ → ***太字斜体強調***<strong><em>太字斜体強調</em></strong> アンダースコア3つ → ___太字斜体強調___
リストタグ
リストタグは、HTMLでは、<ul>や<ol>など。
Markdown記法では、<ul>の場合は「ハイフン(-)」、<ol>の場合は、「数字+ピリオド(1.)」を使います。どちらも直後に半角スペース、あるいはタブが必要です。そして、リストの前の段落の間に、必ず1行以上の改行(空行)が必要です。
-[半角スペース]リスト1
-[半角スペース]リスト2
-[半角スペース]リスト3
と書くと、以下のようになります。
- リスト1
- リスト2
- リスト3
数字付きのリストの場合は、
1.[半角スペース]リスト1
2.[半角スペース]リスト1
3.[半角スペース]リスト1
と書くと、以下のようになります。
- リスト1
- リスト2
- リスト3
リストを入れ子にしたい場合は、半角スペースを4つか、もしくはタブを1ついれて、段落下げをします。
-[半角スペース]リスト1
-[半角スペース]リスト1-1
-[半角スペース]リスト1-2
-[半角スペース]リスト2
-[半角スペース]リスト3
と書くと、以下のようになります。
- リスト1
- リスト1-1
- リスト1-2
- リスト2
- リスト3
数字リストの場合も同様です。半角スペースを4つか、もしくはタブを1ついれて、段落を下げます。
1.[半角スペース]リスト1
1.[半角スペース]リスト1-1
2.[半角スペース]リスト1-2
2.[半角スペース]リスト1
3.[半角スペース]リスト1
と書くと、以下のようになります。
- リスト1
- リスト1-1
- リスト1-2
- リスト2
- リスト3
改行
Markdown記法では、普通に改行しただけでは改行になりません。 段落内で改行したい場合は、文末に半角スペースを2つ入れます。
あいうえおかきくけこ
さしすせそたちつてと[半角スペース][半角スペース]
なにぬねのはひふへほ
と書くと、以下のようになります。
あいうえおかきくけこさしすせそたちつてと
なにぬねのはひふへほ
段落
Markdown記法では、1行以上の空行を入れると、段落として認識されます。
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやいゆえよ
らりるれろ
と書くと、以下のようになります。
<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</p>
<p>まみむめもやいゆえよらりるれろ</p>
リンク
Markdown記法では、「 [リンクテキスト](URL) 」という形でリンクを記述します。
[Yahoo!はこちら](http://www.yahoo.co.jp/)
と書くと、以下のようになります。
target属性には対応していないようなので、新規ウインドウで開きたい場合は従来のHTMLで記入すればよいでしょう。
<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo!はこちら</a>
覚えるのも簡単なので積極的に利用したいです
代表的なMarkdown記法をご紹介しました。これ以外にも沢山ありますので、ご興味があれば、Wikipediaなどで調べて見てください。HTMLを書くよりも大幅に時間を短縮して記事を書けると思います。
なお、この記事を書くにあたり、下記のブログをを参考にさせていただきました。
- はてなブログで「Markdown記法一覧」を書いてみるテスト - そっと、はてなブログ
- 文章作成やメモ書きにも便利、Markdown記法|Web Design KOJIKA17
- Markdownでリンクを新しいウィンドウに開く - みっちゃんラボ
ブロガーの多くはHTMLを記述する際、TextExpanderやDashExpanderなどのスニペット登録ソフトを使って、頻繁に使うコードを登録しているでしょう。だからMarkdownは必要ないと思うかもしれません。
しかし、スニペットとMarkdownを併用すればさらに記事の更新時間を短くできると思いますよ。これからはてなブログを更新する際には積極的に利用したいと思います。