はてなブログは何で書く？ Markdownで決まりでしょ！
皆さんはどの方法ではてなブログを書いていますか？見たままですか？それとも硬派にHTML直打ちですか？
Markdown教に入信して約1か月がたった私、鬱太郎がMarkdown記法の魅力についてお伝えしたいと思います。
PCで書かれる方向けに想定してます。スマホで記事を書かれる方はディスプレイの大きさ的に見たまま記法の方がいいのかもしれません。
はてなブログの編集方法
はてなブログの編集方法は4つありますよね
- そのまま
- はてな記法
- Markdown
- HTML
皆さんはどれが好きですか？Markdownを使っている人は私とお仲間ですね(*'ω'*)
Markdownの疑問
Markdownって何？
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
Markdownはいわゆるホームページ（HTML）を簡単に作る書き方のことです。HTMLを書いたことがある方はわかると思いますが、HTMLはタグを閉じたりするのにとても面倒です。そういった面倒を解消するために作られた手段というわけですね。
Markdownって難しいんじゃないの？
そんなことありません。確かに最初は戸惑いますが、慣れれば見たまま記法よりも早く書くことができます。
また、見たまま記法のようにツールバーやサイドメニューのモジュールも普通に使うことができます。
画像の追加から、目次の追加、文字の拡大縮小、太文字等の基本的な機能はMarkdownでする必要もなく、はてなブログのインターフェースからも使うことができます。いいね！
また、書きながら記事の完成を見ることができます。見たまま記法のように完ぺきではありませんがある程度のデザインを見ながらできます。
さあ、Markdown教に入信したくなってきましたか？
Markdownにしていいことあるの？
もちろんです！これから説明していきますね！
堅苦しいからこその安定感がある
MarkdownはいわゆるCUI（文字ベース）でブログを書いていきます。再現性があるということです。また、記事にする際に無駄な部分を省いてくれるため記事ごとの無駄な表記ズレがなくなります。
見たまま記法ですと、見出しを入れるときに少しずれてしまったりなどよくありませんか？ありますよね！（食い気味）そういったGUI（マウスなどでドラッグなどして操作する方法）にない利点があります。
はてなブログのMarkdownはちょっと特殊
はてなブログのMarkdownはいわゆる正規のMarkdownとは違います。方言みたいのものが組み込まれていると考えてください。Markdown記法でも使えるものによってははてな記法のものも使えます。
両者のいいとこどりというわけですね！
Markdownを覚えておけば他のブログを使ったときに便利
Markdownを使っておけばMarkdownに対応している他のブログに移った時に便利です。いわゆるMarkdownはブログ界の共通語のようなものです。（大げさに言いました）
環境が変わっても同じものがあるというのはいいものですよ！
MarkdownはHTMLも書ける
Markdown記法ではHTMLコードも書くことができます。HTMLで記述したい部分があるけど、HTML記法ですべて書くのはちょっと…といった方にピッタリですね！
HTMLコードがかけるという事は<script>も埋め込むことができます。javascriptで便利なモジュールを見つけたけどどうしよう？といった方はMarkdown記法を使ってみるのはいかがでしょうか？
きっとあなたの役に立つことでしょう！
Markdownはネットがない場所でも編集できる
せっかくブログを書いたのに、書きたかったのに、ネットにつながらない！という方いませんか？
外出してノートパソコンだけど、ブログ書こうかな？無料Wifiないし、テザリングか…でも通信制限大丈夫だっけ？…といった経験ありませんか？
ありますよね！
Markdown記法でブログを書けば、画像の貼り付け以外のほとんどをネットのない環境で作ることができます。
もちろんフリーソフトでありますよ！
ネットが必要でない部分を手元で書いておいて、あとではてなブログの方にコピペするだけで完成です！簡単！
あ！入信してくださるんですか？ありがとうございます！
よく使うMarkdownの記述方法
どうやら入信される決心がついたようですね！そこで、私がよく使うMarkdown記法について説明していきます。
見出し
見出しは基本！Markdown記法では#で見出しを表せます。#の個数が見出しのレベルと対応しています。
そのまま記法では、ブラウザのアドイン等を入れない限り、見出し3~5のレベルしか使えません。Makrdown記法はそんな束縛をものともしないでしょう。
##見出し2 ###見出し3 ####見出し4 #####見出し5 ######見出し6
見出し2
見出し3
見出し4
見出し5
見出し6
あれ？じゃあ#を表示したいときはどうするの？と思う方もいるでしょう！
安心してください！エスケープ文字というのがあります。Markdownのエスケープ文字は\バックスラッシュです。
\# \#\#
#
##
また、`バックコーテーションで囲むと<code>タグとみなされ、中身のmarkdown記法がすべてエスケープされます。バックコーテーションはキーボードのShiftキーを押しながら@で出ます。
`\`や`####`といったものもこんな風にエスケープできます。
\や####といったものもこんな風にエスケープできます。
改行
改行する際は必ず二回以上改行しないと改行とみなされません。1行開ける必要があります。
改行したつもりでも、 つながってしまいます。
改行したつもりでも、 つながってしまいます。
改行したい場合は、 1行開けましょう。
改行したい場合は、
1行開けましょう。
箇条書き
箇条書きはツールバーからも書けますよ！初心者にも安心!
* 箇条書きは、アスタリスク`*` * や`-`、`+`などを書き、半角スペースを空けて、 * 内容を書くと書けます。
- 箇条書きは、アスタリスク
* - や
-、+などを書き、半角スペースを空けて、 - 内容を書くと書けます。
その際上下に1行空行を空けておくといいでしょう。
表を書く
ちょっと調査不足なのですが、そのまま記法で表って書けますか？上のツールバー見ても見当たらないのでもしかしたらかけないのかもしれません。
しかし、Markdown記法を使えば表を入れることができます！
左揃え|中央ぞろえ|右揃え :-|:-:|-: 01|02|03 Markdown記法は|あなたのブログ作りに|光を指すでしょう！
| 左揃え | 中央ぞろえ | 右揃え |
|---|---|---|
| 01 | 02 | 03 |
| Markdown記法は | あなたのブログ作りに | 光を指すでしょう！ |
これもまた上下に1行開けておきましょう。|で要素を区切ります。キーボードのバックスペースキーの左にあります。Shiftキーを押しながら円記号を押すと出ます。
2行目にその列の文字揃えを記述する必要があります。その内容は上記の例を参考にしてください。
画像の詳細を記述する
これははてな記法になるのですが、Markdownでもできます！
画像をサイドバーから選ぶと、このような形式のものが出てきます。
[f:id:neet-utsu-taro:20170924085633j:plain]
これはそのままですとこのような縦長の写真が出てきてしまいます。
長い！すみません。
はてな記法では写真の高さや幅を調節できます。
[f:id:neet-utsu-taro:20170924085633j:plain:h200]
これは高さ200のサイズで画像を表示させる方法です。plainの後ろに:hと続けて設定したい大きさを書きましょう。
幅を指定したい場合は:wに指定したいサイズを書きます。幅200のサイズで画像を表示させてみました。
[f:id:neet-utsu-taro:20170924085633j:plain:w200]
また、画像のタイトルや説明をtitle要素とalt要素を使い盛り込むことができます。
[f:id:neet-utsu-taro:20170924085633j:plain:w200:title=カーソルを合わせると画像のタイトルが表示されます:alt=これは画像の説明です。画像の代わりを文字で表しましょう]
画像にカーソルなどを合わせると、タイトルが表示されます。タイトルを設定しないと、画像ファイルのIDが表示されます。上の画像で試してみてください。
え？画像が左寄りばかり？
先ほども言ったようにHTMLコードも記述できますよ！という事は…？<center>等のタグも使えますよ！といっても<center>タグは非推奨なので<div align="center">を使っていきます。
<div align="left"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div> <div align="center"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div> <div align="right"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div>
HTMLの書き方になれていない方は難しいかもしれませんが、できればこんな風に綺麗に画像をそろえることができます。
Markdown教への入信、してくださいますよね？
コードを書く
コードとはプログラミング言語だけでなく<code>のことです。この記事もかなりの数を使っています。エスケープ文字の時でもちょろっと出ましたね。バックコーテーションで囲むことで文中に特殊な表示の仕方をさせることができます。
私のメールアドレスは`teineiteineiteinei@ahoo.co.jp`です。
私のメールアドレスはteineiteineiteinei@ahoo.co.jpです。
表示のさせ方は各ブログのテーマやCSSによって変わります。フォントも強制的に変わる場合があり、数字やアルファベットも見やすくなったりする場合もあります。
バックコーテーション`はShiftキーを押しながら、@を押しましょう。
また、じゃあ`を表示したいときはどうすればいいんだろう？と思う方もいるでしょう。HTMLタグの中に書くことでエスケープできます。
この場合は<span>`</span>で文字を囲みます。
この場合は`で文字を囲みます。
ただ、あんまり`を文字として使いたいことは少ないと思うので気にしなくていいですね。
引用をする
引用はツールバーからも追加できますが、とても簡単なので直接記入しましょう。>だけです。
>これは引用文です。 >>2重に引用させることもできます。
これは引用文です。
2重に引用させることもできます。
引用文が続けば、隙間を空けてもくっつきます。（改行はされます）また、>を重ねることで引用の中に引用を持ってくることもできます。
他にも画像にも引用を付けることができます。
>[f:id:neet-utsu-taro:20170924085633j:plain:h200] >これは私がとった早朝の空の写真です。
これは私がとった早朝の空の写真です。
さあ！Markdownを使いたくなってきましたよね！
まとめ
最後にこんな人はMarkdown記法をしてみてはいかがでしょうかというのをまとめてみました。
- Texが好きな人
ってTexが好きな人は既にMarkdown使ってそう…
- 見出しから書いていく方
見出しから書いていく方は、Markdownがぴったりかもしれません。Markdownでは見出しは#を使い簡単に書け、またMarkdown記法ではフォントサイズが一定のため、見出しの数が多くなった場合に確認しやすいという利点があります。
- Markdown教に入信希望の方
皆さんMarkdown教に興味を持ってくださいましたよね？という事で、ぜひ触ってみてください。
下にこの記事のmarkdown表記を載せておきました！入信希望の方は是非参考にしてくださいね！
クリックすると開きます↓↓
この記事のMarkdown
終わりに
ここまで読んでくださってありがとうございます！
Markdown。ぜひお試しあれ！
実際のところはてなブログの記法の使用率ってどんなんでしょうね？ちょっと気になります。
読者登録ありがとうございます！スターやブックマーク等もありがとうございます。励みになってます！
またね('ω')ノ
