【追記あり】はてなブログの大見出しはh2に変更した方がいいのかも【Markdownを使うなど】

こんにちは！　たまに毒を吐くです。

先日、嗚呼蛙 (id:aaafrog) さんの下記の記事を読みまして、

改めて見出しタグについて考えさせられました。

今回はその見出しタグについて書いてみようと思います。

見出しタグとは

見出しタグとは、htmlのh1～h6というタグです。

h1	…	h6
高	←　重要度　→	低

数字が小さい方が重要度が高いと言われています。

また、

h1（記事タイトルなど）

h2（大見出し）

h3（中見出し）

h2（大見出し）

h3（中見出し）

h4（小見出し）

こんな感じで、h1～h6が上から順番に使われているのが望ましいとされているようです。

はてなブログでは記事の大見出しがなぜかh3

はてなブログでは、ヘッダー部のブログタイトルにh1、ブログの説明文にh2が使われています。

そして記事の部分に入るとそれまでの見出しがリセットされて、記事タイトルがh1になっています。

なので、記事中の大見出しはh2から始まった方がいいのではないか？　という話になるのですが……。

はてなブログの記事作成画面の見出し

はてなブログの記事作成画面の見出しを使うと、大見出しがh3、中見出しがh4、小見出しがh5になります。

あれ？　h2が抜けてる……これはよくないのでは……と嗚呼蛙 (id:aaafrog) さんは仰っていた訳です。

なぜ大見出しがh3なのか？　運営に問い合わせている方がいた！

私も大見出しがh3ということには気付いていたのですが、「公式で大見出しをh3にしているということは、何か理由があってのことなんだろう」と、あまり深く考えていませんでした。

しかし今回、そう言われればどうしてh3なんだろう？……と改めて調べてみた所、下記の記事を見つけました。

上記記事に、「なぜ大見出しがh3なのか？」という問いに対するはてな運営の回答が載っていたのですが……。
私はそれを見て、ちょっとした衝撃を受けました。

その回答を下記に引用させて頂きます。

はてなダイアリーでは記事のタイトルをh3としているため、はてなダイアリーの仕様と合わせるためにh3となっております。
【SEO】はてな記法を使っている方は、今すぐタイトルタグを利用しましょう！

えっ……！

そ、それだけ…!?

・・・

ただ単に運営の都合というだけの話だったようです……！

運営側で何か対策を講じている可能性もありますが、やはり自分で大見出しをh2に、中見出しをh3に、小見出しをh4に変更した方がよさそうな気がしてきました……。

見出しタグを変更する方法

手動で書き換える

ポジ熊 (id:pojihiguma) さんが既に手動で見出しタグの書き換えを行っていました。

見たままモードで記事を作成した後、HTML編集に切り替えて、h3をh2に手動で書き換えているようです。

これは大変そうです……！

jQueryで自動的に書き換える方法もあるが……

上記の記事のコメント欄に、勝手にシロマティ (id:shiromatakumi)さんが「jQueryでタグを自動で書き換えてくれる方法を見つけた」とコメントなさっていました。

その方法が載っているのが下記のページになります。

| jQueryをつかって、中身はそのままでHTMLタグを書き換える

上記ページを参考にして、jQueryのコードを書いてみました。

h3⇒h2、h4⇒h3、h5⇒h4に自動で書き換えるjQueryのコード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h3').replaceWith(function() {
  $(this).replaceWith('<h2>'+$(this).text()+'</h2>')
});

$('h4').replaceWith(function() {
  $(this).replaceWith('<h3>'+$(this).text()+'</h3>')
});

$('h5').replaceWith(function() {
  $(this).replaceWith('<h4>'+$(this).text()+'</h4>')
});

});
</script>

このコードを、

管理画面⇒デザイン⇒スパナみたいなマーク⇒フッタ

に記入します。

このコードにより、記事作成画面の上部にある見出しを使っても、プレビュー画面や公開した記事では、自動的に大見出しがh2に、中見出しがh3に、小見出しがh4に書き換わるはずです（スクリプトテスト用のサブブログで実験済み）。

過去記事はそのままでOKですが、CSSの変更は必要です（今までh3で使っていたCSSをh2に、h4をh3に……という変更）。

上記コードをコピペしてご自由にお使いください。
ただ、どのテーマでも正常に動くかどうかは不明ですので、もしお使いになる際は自己責任でお願い致します。

応用したコード

上記の記事で、「過去に自力で書き換えた記事があった場合や、今まで頑張って書き換えていたけどこれからは自動化したいという人向け」に応用したコードを載せてくれています。

注意

こちらの記事の雑記で、サイトのデザイン（HTMLやCSS）を大掛かりに修正したり、わざわざjQueryでタグを書き換えてまで見出しを変更する必要はない、というご意見を頂きました。

こちらも読んでみて、見出しタグを変更するかどうか考えて頂いた方がよろしいかと思います。

（私もそこまで神経質になる問題ではないと思います。。。やれるならやった方がいい、位のことかと……）