こんにちは、KAWARUN（カワルン）です。
はてなブログをお使いのブロガーさんは、どの編集モードを利用していますか？
わたしは初期設定のまま「見たままモード」を使っています。しかし結構不便なことが多く、html画面で入力・編集しているのが現状です。
今日は「はてなブログ」の編集モードのひとつ「はてな記法」にトライします。
\ もうすでにはてな記法de入力は始まっていますよ～！！ /
はてな記法の使い方を説明しながら、「見たままモード」と比較・検証します。現在なんとなく「見たままモード」を使っている方はぜひチェックしてくださいね。
はてな記法とは
そもそも「はてな記法」とは何でしょうか？「はてな記法」とは「はてなブログ」特有の編集モードです。
ブログを書く上で必要なコードを、HTMLの知識がなくても簡単な記述で書くことができる記述方法です。
くわしい「はてな記法」はコチラで確認できます。後ほど「はてな記法」の使い方についてはこのブログでも説明します。
編集モードを切り替える
「はてな記法」を使うためには、まず現在設定している編集モードから「はてな記法」に切り替えましょう。１．はてなブログの編集画面の左端にある「設定」を選択します。
２．「基本設定」の「編集モード」から「はてな記法」を選択し、下部にある「変更する」ボタンをクリックします。
これで「はてな記法」に切り替わりました。
新たに記事を書こうとすると、はてな記法の編集画面に切り替わっていることが確認できます。
ちなみに、以前「見たままモード」で書いた記事は「はてな記法」で編集できないようです。リライトする際は記事を書いたときの編集モードに従わなければならないので、注意しましょう。
見出しをつける
はてな記法に変更できたので、さっそくブログを書いていきましょう！まずは見出しを付けます。
はてな記法でh2タグを入力する方法
さっそく見出しを書いていくのですが、その前に。はてなブログに見出しを付ける際、左上のタブを使用している方は多いと思います。これ↓です。
便利な機能ですが、このタブを使って書くと大見出しがh3タグになってしまうのです。
「通常の場合」と「はてなブログの場合」の見出しの違いを比べてみましょう。
「はてなブログのタグ」の設定では大見出しがh3タグになっているので、h2タグが使われていないのです。
SEOへの影響のアルナシはサイトにより情報が異なるため言及は避けます。個人的な意見は「大見出しはh2タグがいい」です。実は私も気がついたのがつい先日のことで、現在ブログメンテナンスに追われています(笑)
気になる方は早めにメンテナンスをしましょう。
前置きが長くなりましたが、はてな記法でh2タグを使うには
編集画面で直接<h2>見出し名</h2>と入力すればOKです。
はてな記法でh3～h5タグを入力する方法
つづいて「はてな記法」でh3～h5タグを書く方法です。
h3～h5タグは以下のように記号（*）を使って簡単に記入することができます。非常に快適ですね！
h3タグ：*見出し
h4タグ：**見出し
h5タグ：***見出し
表にまとめると次のようになります。
<h2>見出し名</h2> |
|||
*見出し |
|||
**見出し |
|||
**見出し |
表の作成
つづいて表の作成方法です。| a | b | c | d | e |
|---|---|---|---|---|
| aa | bb | cc | dd | ee |
たとえば上の表を作るためには、次のように記入します。
|*a|*b|*c|*d|*e| |aa|bb|cc|dd|ee|
はてな記法を使うと、表も簡単に作成できます。
文章の引用
主に他人の書いた文章を利用する場合は、下記のように「引用」しましょう。引用した文章
タブを使うこともできますが、はてな記法を使って引用する場合は次のように記述します。
>> 引用する文章 <<
慣れればタブを使うよりも、はてな記法の方が早く書けそうです。
htmlコードを表示させる方法
つぎはhtmlコードなどを入力したまま表示する方法（スーパーpre記法）です。「～～」の部分に表示させたいコードを入力します。
>||～～||<
公式には上のように書かれていますが、実際は～～の前後に改行が必要です。
<h2>大見出し</h2>
そのため上記のように表示するには、次のように記述します。
>|| <h2>大見出し</h2> ||<
また、プログラムコードを記述する場合は、
>|（ファイルタイプ）|～～||<と記入すると、ソースコードに色付けして表示（シンタックスハイライト）できます。
たとえば私のh2タグのCSSコードを記述してみます。ファイルコードは小文字で書くように注意してください。
.entry-content h2 { padding: 0.5em; color: #494949; background: #f5f5f5; border-left: solid 10px #ffb6c1; }
対応しているファイルタイプについては以下のリンクを参照してください。
ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ
まとめ
今回ははてな記法で記事を書いてみました。使いそうな「はてな記法」のみを紹介しましたが、はてなブログは編集タブが付いているので思っていたよりも入力しやすかったです。
初めてだったので少し時間はかかりましたが、慣れれば「見たままモード」よりも「はてな記法」の方が早く書くことができるでしょう。
編集しているうちに余分なhtmlコードが追加されてしまう「見たままモード」と比べて、「はてな記法」はすっきりしていて読み返しやすいです。
欲を言えば、「はてな記法」画面と「プレビュー」画面しかないので、「html」画面があったらさらに最高なんだけどな～というのが感想です。
もう１つの編集モードである「Markdown記法」も試してみて、今後は編集モードを変更しようと思います。
