はてな記法で<h2>をちゃんと使う
はてな記法でブログを書いていると「見出し問題」がどうしても出てきます。
はてな記法で大見出しをつけようと思うと* 見出しと書くのですが、この書きかたで変換されるHTMLは<h3>見出し</h3>です。
べつにSEO的な問題は無いらしいのですが、記事のタイトルが<h1>なのに記事中で１番大きい見出しが<h3>なのは、ただただ座りが悪いです。
はてな記法は中にHTMLタグを書けるので直接<h2>見出し<h2>と書けばいいのですが、ただ書くだけでは、これもまた座りの悪い結果となります。
そこでガッツリ、ちゃんと、はてな記法で<h2>タグを使う方法を説明します。
答え
はてな記法内でちゃんと<h2>タグを使おうと思うと以下のように書けばいいです。
><div class="section">< ><h2>見出し</h2>< ここに記事本文 ></div><
ちなみに「ここに記事本文」とかかれている場所は、はてな記法で書いて大丈夫です。
例えば、* 見出しと書けばちゃんと<h3>見出し</h3>と変換してくれます。
では、なぜこれでいいのか、という説明をしていきます。
（注意）この書き方で<h2>以下に見出し記法を入れ子にすると構造がくずれました。詳しくは追記にて。
そもそも、はてな記法とは？
はてな記法で書かれた記事はどこかのタイミングでHTMLに変換されます。
それが、保存のタイミングなのか、記事が表示されるタイミングなのかはわかりませんが、最終的にHTMLに変換されます。
例えば、はてな記法で
本日は晴天なり マジでピーカンなり 暑いはっ！
と、書いたら
<p>本日は晴天なり<br>マジでピーカンなり</p> <p>暑いはっ！</p>
という風に、特にはてな記法を使用していなくても、改行や空白行をみてHTMLへの変換が行われています。
この、変換されるというのはとても重要です。
なぜなら、はてな記法内にHTMLタグを書く場合、この変換後のHTMLを意識しないとレイアウトが崩れたりします。
* 記法から変換されるHTMLは？
* 見出しと書いたら<h3>見出し</h3>と変換してくれると書きましたが、正確には、
<div class="section"> <h3>見出し</h3> <!-- ここに「* 見出し」以下に書いた文章が変換されます。--!> </div>
と、見出しと本文で一塊という解釈でHTMLへ変換されます。
これは良く出来ていて、
* 大見出し ** 見出し * 大見出し2
と、書くと
<div class="section"> <h3>大見出し</h3> <div class="section"> <h4>見出し</h4> </div> </div> <div class="section"> <h3>大見出し2</h3> </div>
と、入れ子にも対応した変換をしてくれます。
ということは、<h2>タグをはてな記法内で書く場合も
<div class="section"> <h2>h2見出し</h2> * h3見出し ** h4見出し * h3見出し </div>
と、書けば、
<div class="section"> <h2>h2見出し</h2> <div class="section"> <h3>h3見出し</h3> <div class="section"> <h4>h4見出し</h4> </div> </div> <div class="section"> <h3>h3見出し</h3> </div> </div>
という風に、見出しと本文が一塊という解釈が保たれます。
ただ、このままではレイアウトが崩れてしまいます。
それは、はてな記法が改行や、空行も変換対象という仕様のためです。
空<p>問題
はてな記法内で、
<div class="section"> <h2>見出し</h2> 本文 </div>
と、書くとHTMLタグも１行、ないし空行と判断されるため、変換後のHTMLは、
<p></p> <div class="section"> <br> <h2>見出し</h2> 本文 </div> <p></p>
と、なってしまいます。
<p></p>と、<br>が入ることで表示したときに不自然なスペースが入ってしまいますし、本文も<p>タグが解除されています。
では、どうするか。はてな記法にはそのための記法がすでにあります。
それが「pタグ停止記法」です。書式は>< ～ ><です。
公式では、「自動挿入される p タグを停止します。」としか書いてないのでややこしいですが、
- 行の先頭でないといけない
- 複数行にまたいで記述できる
<p>タグの代わりのタグを設定する記法である
ということに留意する必要があります。
特に２つ目は注意が必要で、はてな記法で><aaa><と書くと<p>タグで囲まれてないaaaに変換されるのではなく、<aaa></aaa>へ変換されます。
この記法を使って<h2>をはてな記法内に書くと
><div class="section"> <h2>見出し</h2> 本文 </div><
と、書けますが、これはダメです。
<p></p>と、<br>は消えるのですが、><div>と</div><の間に書いた全ての文章で<p>タグが停止しているので、本文の<p>タグも解除されたままです。
ですので、
><div class="section"> <h2>見出し</h2>< 本文 ></div><
<p>タグの自動挿入を再開したい行の手前で停止を解除してやる必要があります。
そして、</div>も忘れずに<p>タグの自動挿入を停止してやれば完成です。
最後に
答えのセクションでは１行ずつ<p>タグの自動挿入を停止していますが、これは複数行に渡って停止していると再開を忘れてしまいそうなので、そうしています。
とはいえ、何行もHTMLタグを記載する場合は複数行に渡って停止できるのは便利です。
はてなブログのHTMLをのぞいてみると、エントリーは<article>なのにセクションは<div>だったり謎の仕様があったりします。
もしかしたら、その辺が見直されて、１番大きな見出しが<h2>になるかもしれません。
そうしたら、この記事は蛇足になってしまいますが、利便性が上がるので全然ウェルカムです。
ここまでして<h2>タグ使いたくないよ、という人は是非「pタグ停止記法」だけでも覚えてください。
例えば、独自のスタイルをクラスで指定した<a>タグや、アドセンスでお世話になる<script>タグなど、記事内に記述するHTMLタグは「空<p>問題」を意識する必要が出てきます。
最後になりますが、この記事で紹介しているコードを使用する際は自己責任でおねがいします。
追記
ここまで書いておいてアレですが、この方法では見出し記法と組み合わせたときに構造がおかしくなりました。
具体的には
><div class="section">< ><h2>見出し</h2>< * h3見出し ** h4見出し * h3_2見出し ></div><
と、したときに** h4見出しから* h3_2見出しへ復帰する際に<div>の入れ子構造がおかしくなります。
そうなると、見出しをちゃんとする場合は全部タグ打ちしなくちゃいけない？うそーん
使えるようにしました。
