【はてなブログ】Markdown 最低限これだけ覚えれば一通りの記事が書ける記法まとめ
スポンサーリンク
今日で、はてなブログを始めてようやく3か月になりました。
そしてまた、Markdown記法に変更してから1か月近くが経ちます。
ここから十数記事を書いた現時点で、Markdown記法について次のように感じました。
- 字が見たままモードより小さいけれど、すぐに慣れた
- 見たまま編集とHTML編集画面との往復がなくなり時間のロスが減った
- 基本の操作は見たままモードと同じツールバーでできる
- 機能面でつまづいたのは画像サイズの変更、囲み枠内の箇条書きくらい
このようにメリットが多く、総合的にはてなブログでのマークダウン記法は、『みたまま』と『HTML』のいいとこ取りだといえます。
みたままモードのように崩れることもなければHTMLのように難しいタグは省略して書く事ができる。
そして細かい部分は同じ画面のまま切り替えることなくHTMLで記述できる。
覚えておけば、はてなブログ以外にも役立てる機会があると思うので、各モードの中で最もベストな記法なのではないかと思っています^^
まぁ、ここに至るまでにたくさんMarkdown記法について調べましたが、項目が多くてまだ全て理解しているわけではありません（汗）
それでも、身についた最小限の知識だけで私が書きたい記事の形は作れるようになってきました。
今回は、この記事を読めば初めてでもMarkdown記法でブログが書ける様に、実際によく使う機能だけに絞ってまとめました。
はてなブログにおけるMarkdown記法
はてなブログではツールバーで大抵の操作ができるので、Markdown記法の全てを覚えなくても記事を書くことができます。
ここでは、文章を書く時の改行・段落に続いてツールバーでの操作、そしてツールバーではできない部分での記述方法などを解説します。
改行・段落について
文章の改行
文末に半角スペースを2個つけて、次の行から書き始める
または文末に<br>を入れ、同じく次の行から書き始める
HTMLではある文字列を「＜」と「＞」で囲んだものをタグといいます。「br」は「Break」の略で、<br>で改行を指示します。
段落
段落と次の段落の間に「空行」を1つ入れるだけ
ツールバーでできる基本操作
見出し
見出しにしたい箇所で、ツールバーの「見出し」からそれぞれの見出しを選択する
すると、その箇所の先頭に、見出しに見合った数の「#」と半角スペースがつきます。
（もちろん、自分で#と半角スペースを入力しても見出しとなります）
h2→##
h3→###
h4→####
・・・
はてなブログでは大見出しは<h3>となっていますが、私は<h2>に変更したため、まず大見出しを選んでから#を1個消すようにしています(;^_^A
箇条書き・番号付きリスト
こちらもツールバーでできますが、「見たまま編集」と違うのは、箇条書き1行ごとに「箇条書き」を選択する必要があることです。
見たままモードでは複数の行を選択して1度「箇条書き」ボタンをクリックすれば一気に箇条書き表示になるのですが、Markdownでは少し不便です。
なので、いくつか方法はありますが、各行で「-」（ハイフン）+半角スペースを文頭につけることでも箇条書きにできます。
番号付きリストも、手入力で表示させるには同じく各行「番号」+「.」（ドット）+半角スペースを文頭につけることで番号付きリストになります。
おもしろいことに、番号は３，６，７などでたらめな順で数字を入れても、プレビューで確認するとちゃんと1.2.3.の順に表示されます(笑)
リンク
ツールバーでできますが、リンクさせたいURLをコピーしてからMarkdown編集画面に戻り、貼り付けるだけで「リンク」画面が開くのでさらに便利です。
その場合は「選択範囲」以外の選択肢（埋め込み・タイトル・URL）が表示されます。
引用・目次
引用させたい部分を選択し、「引用」ボタンをクリックするだけ
（自分で入力する場合は、各行の頭にそれぞれ「＞」+半角スペースを入れる必要があります）
目次も、入れたい部分で「目次」ボタンをクリックするだけ
続きを読む・脚注
実は私は記事に使ったことがないのですが、同様にツールバーで設定できるようです。
「続きを読む」ボタンをクリックすると、<!-- more -->が編集画面に表示されます。
「脚注」ボタンをクリックすると、『ここに脚注を書きます』という表示が出るので、その部分を書き換えてプレビューを見ると「*」と数字が表示され、記事下に書き換えた部分が出現してそこにとべるようになります。
太字・斜体・打消・アンダーライン・文字の大きさ・文字色
ツールバーから簡単に行えます。
私はアンダーラインを蛍光ペン風にするカスタマイズをしているのですが、見たままモードではアンダーラインのボタンをクリックしても普通に下線にしかならず、HTML編集画面に移動して<u>～</u>でわざわざ囲む必要がありました。
（見たままモードでパソコンで編集する時、”アンダーライン”をクリックしてHTML編集画面で確認すると、<u>～</u>ではなく<span style="text-decoration: underline;">～</span>で囲まれてしまいます。でも試しにiPadの方で同じ手順を踏むと<u>～</u>で囲まれました。なんで？？）
Markdown記法ではアンダーラインのボタンをクリックするとそのまま蛍光ペン風になるので楽です。
ツールバー以外の操作
画像サイズの変更
見たままモードの場合は、キャプションをつけない限り画像の端にマウスポインタを重ねてドラッグすれば簡単にサイズ変更が可能ですが、Markdownではそれができません。
なので、次のようにサイズ変更します。
『+写真を投稿』から写真を選択し、『選択した写真を張り付け』
⇩
フリー画像以外の写真など、必要に応じてalt属性を指定
（画像にalt属性を指定する（上級者向け）の下（画像の代替テキスト）欄に記入）
⇩
『記事編集画面に貼り付ける』をクリック
ここまでは見たままモードと同じです。すると、このように表示されます。
[f:id:△△△△△:×××××:plain:alt=〇〇〇〇〇]
上記の閉じカッコの前に、例えば:w500など、指定したいサイズを入力します。
⇩
[f:id:△△△△△:×××××:plain:alt=〇〇〇〇〇:w500]
これで、好きなサイズに変更することができます。
囲み枠内での箇条書き
私は、囲み枠、タイトル付きボックスを次のサイトを参考にカスタマイズさせていただいています。
通常の箇条書きについてはツールバーでできると先ほど述べましたが、囲み枠の中に箇条書きしたい場合は同じ方法では表示されません。
囲み枠を示すHTMLコード内の箇条書きは、同じくHTMLで記述する必要があります。
当然といえば当然なのですが、初心者の私は意外にしばらく気づけませんでした（汗）
<ul>
<li>箇条書き1行目</li>
<li>箇条書き2行目</li>
<li>箇条書き3行目</li>
</ul>
また、番号付きリストをボックス内に入れたい場合は、<ul>～</ul>を<ol>～</ol>に変えるだけです。
ul・・・unordered list（順序がないリスト）の略。箇条書きの際に使うタグ
ol・・・ordered list（順序があるリスト）の略。番号付きリストの際に使うタグ
li ・・・list itemの略。リストの項目を表示する際に使うタグ
ちなみに、ボックス内で箇条書きをバランス良く配置するには、<br>の改行タグで調整するとよいかと思います。
おわりに
まだまだMarkdown記法には表の作成や区切り線などいろいろなものがありますが、とりあえず1か月あまりの間に私が使用したのは上記の分だけです。
今後、これ以外に必要と思われるものが出てきた場合、まちがいを発見した場合は、また追記したいと思います(;^_^A
ここまでブログを3か月続けてきましたが、最近ようやく検索流入が増え始め、初めてGoogleとYahoo！で1位2位を占めました。（といっても50％弱ほどですが…）
いくつかの記事が検索1ページ目に載ったので、よくわかりませんがそれのせいでしょうか…
とにかく頑張って書いた記事が誰かに読んでいただけるのは嬉しいです。
そして、これまで90ほどですがブックマークしてくださった方々、本当にありがとうございます。。
コメントをいただけた日には、いつも感激しながら読んでおります。
なかなか毎日更新はできないマイペースブログですが、コツコツ続けていきたいと思っているので、今後ともよろしくお願いします^^