こんばんは。Milkです。
日頃、「はてな記法」でブログは更新しているのですが、以下の記事を読んでちょっと考えることがありまして。
実は、「見たまま」「はてな記法」の場合は、見出しとして、h2タグが使われていないという実態があるとのことでした。
うーん。確かにそれはちょっと前から聞いてはいたんだけど・・・
記事によりますと、最近では「Markdown記法」と言うのが簡易的なマークアップ言語として登場しているようです。
つまり、この「Markdown記法」で書き方を習得しておけば、その方法でエディタで書いたものはブラウザ等が解釈して綺麗に表示してくれるというわけ。（はてなブログに縛られない。）
確かに、これは切り替えるっきゃない！
と言うわけで、「はてな記法」から「Markdown記法」でどのように書き方を変えるべきなのかという点をまとめてみようと思います。
見出しのタグ
さて、「はてなブログ」では通常の見出しのタグは、h3、h4、h5が使用されています。
恐らくは、皆さんもCSSもそれらに対して装飾するように記述していることでしょう。
え？ h2はどこ行ったの？ という話もあるんですけど、突き詰めていくと存在します・・・が、「はてなブログ」は記事中には存在しない仕様になっていまして、単純に言うと、h2タグという見出しタグは利用できていない状態です。（この経緯についてはちょっと分かりません。）
h1タグ自体は、記事中では記事のタイトルとして利用されています。
そして、ポイントとなるのは「Markdown記法」の場合は、h2タグから利用が可能だという点です。
過去の記事でh2タグを利用する
今までのCSSに適用していた、h3〜h5をh2〜h4に移動してしまうと、過去の記事に影響が出てしまいます。
しかし、この部分を書き換えないと、今後の新しい記事が正しくタイトル表示できません。
これに対応するために、過去記事に対しては、表示時にJavaScriptで強制的にタグの書き換えを行い、その結果をブラウザに表示させるという処置をとります。
この方法については、以下の記事にまとめられていました。（ありがとうございます。）
私のカスタマイズで独自の部分にしたのは、JQueryの読み込み部分を別に分けた程度でしょうか。（これは、JQueryを再利用する場合があるときのため）それ以外は、そのまま上の記事の内容でOKです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
この部分を以下の箇所に入れ込みます。
「ダッシュボード」ー「設定」ー「headに要素を追加」
これを入れることが出来れば、CSSのタイトルに対する装飾のタグ修正をしても大丈夫なはずです。
新しい記事には、そのままCSSが適用されますし、過去記事に対してはJavaScriptが走って、タグの置き換えが行われます。
そのため、過去記事に対しては一瞬旧フォーマットで表示されますが、ちゃんとロードが完了すれば正しく表示されるはずです。
「はてな記法」と「Markdown記法」での書き方の違い
それでは「はてな記法」から「Markdown記法」へ移行する際に、どのように書き方を変更すればよいかについて言及していきましょう。
「使い方」が一緒のものもある
さて、使い方が同じものもあります。
例えば、編集画面で用意されているものです。
これらの部分は、あまり気にせずに今までと同じように利用できます。
確かに一部、押下した時に記載方法が異なることに驚くかも知れませんが、それは「Markdown記法」の記載方法と言うことで納得しましょう。
また、色の変更や太字などは、今までと同じようにタグで囲むようになっていますから、ここに特殊なCSSからの属性を組み込んでいた人は、今まで通りに使えます。
今までと記法が異なるもの
では、記法が異なる部分について取り上げていきましょう。
タイトル
| はてな記法 | Markdown記法 | |
|---|---|---|
| h2 | なし | ## |
| h3 | * | ### |
| h4 | ** | #### |
| h5 | *** | ##### |
空行
| はてな記法 | Markdown記法 |
|---|---|
| そのまま改行（Enterキー） | brタグ |
1行の空行を入れる場合は、Enterキーでの空行入れでどちらもOKです。
しかし、複数の空行を入れる場合は、「Markdown記法」の場合はbrタグを使用しなければなりません。幾ら記事中に改行を入れまくっても、表示時に省略されてしまいます。
文中での改行
私はあまりこれを使用しませんが、一応メモとして残します。
| はてな記法 | Markdown記法 |
|---|---|
| そのまま改行（Enterキー） | 文末で半角空白2つ |
つまりはこういう状況です。
かいぎょうをおこな
いたいとおもいます
かいぎょうをおこな(半角空白)(半角空白) いたいとおもいます
プログラムの記述
| はてな記法 | Markdown記法 |
|---|---|
| >|プログラム言語識別子| プログラムソース||< |
```プログラム言語識別子 プログラムソース ``` |
気をつけないと行けない点は、「バッククォート」である点です。「シングルクォーテーション」ではありません。
表
これについては、少々説明が難しいです。
「はてな記法」の場合は、|で挟み込むことで表が出来ていました。
「Markdown記法」の場合は、以下の様にします。
|header1|header2|header3| |:--|--:|:--:| |align left|align right|align center| |a|b|c|
1段目がヘッダーの意味を持ち、2段目が、左寄せ、右寄せ、中央寄せ、の意味を持っています。
以下が表示結果になります。
| header1 | header2 | header3 |
|---|---|---|
| align left | align right | align center |
| a | b | c |
最後に
一応は、普段使う分にはこれぐらいでOKかと思います。
更に複雑な部分を行う場合は、以下のサイトを参考にすると良いと思います。
この記事も、「Markdown記法」で書いてみましたが、思いの外「はてな記法」からの移行はすんなり行きました。
慣れれば「はてな記法」とスピード的には変わらない程度に書けるかなと思いますね。
ちょっと改行のbrタグが面倒かな・・・それさえ上手く行けばなんですけどね（笑）
では、今回はこんなところで！
adios！！
