「はてなブログの大見出し<h3>問題」のベストな解決方法を考えた（ショートカット使えた）
はてなブログには「記事ページの本文中でh2タグが使えない」という欠陥仕様があります。
このような感じです（カッコ内は一般的な使い方）
- 記事タイトル … h1（h1）
- 大見出し … h3（h2）
- 中見出し … h4（h3）
- 小見出し … h5（h4）
使用できる見出しタグは<h3>からになっていて、これがSEOに影響があるかもしれない、という話がありながら、なかなか公式に改善されない*1という状況が続いていました。
ところが先日、ショートカットで見出しを作れることを発見して小躍りしましたので、ここでやり方を説明したいと思います。
また、併せて既存の方法と比較してどの方法がベストなのかの検討をしたいと思います。
はてなブログの大見出し、現在とれる解決方法は
現在取りうる解決方法は、編集モードによって違いますが、それぞれ以下になります。
- ショートカットを使う（見たままモード）New!
- Chrome拡張を使う（見たままモード）
- jQueryで自動的に書き換える（見たままモード）
- 「##」で<h2>を指定する（Markdownモード）
- h2タグを直書き（はてな記法モード）
ショートカットを使う（見たままモード）
きっかけは、はてなブログ執筆中に間違えてWordpressのショートカット「Shift + Alt + 数字」で見出しを入れようとしたことでした。
以下のショートカットで<h2>～<h6>までの見出しが入る事を確認しています*2
- h1 … なし
- h2 … Shift + Alt + 2
- h3 … Shift + Alt + 3
- h4 … Shift + Alt + 4
- h5 … Shift + Alt + 5
- h6 … Shift + Alt + 6
- テキストに戻す … Shift + Alt + 7
Windowsでしか検証していませんが、Macの場合は「control＋option＋数字」で行けるのでは？と思います（どなたか検証していただけると嬉しいです）
メリット
- 手軽
- 誰でも使える
- ショートカット慣れしている人には、ほぼノーコスト
デメリット
- 過去記事は手動で修正が必要
- ショートカットを覚える必要あり
推奨度★★★★★
大見出しh3問題に関係なく覚えるべきショートカット。
今までMarkdownで書いてましたが、これ発見したので「見たままモード」に変えました。
Chrome拡張を使う（見たままモード）
Chrome Add-on for Hatena というChrome拡張機能を入れると、こんな感じのポップアップを出すことが出来ます。
左上の<h2>ボタンによって、カーソルの当たっている行をワンクリックで<h2>に変更することが出来ます
メリット
- 手軽
- 誰でも使える
デメリット
- 過去記事は手動で修正が必要
- 1アクションごとにポップアップが閉じてしまう
- Chrome限定
推奨度★★★☆☆
シンプルで簡単。ショートカットを使い慣れてない方、覚えてられないという人向け。
ポップアップの固定、もしくはショートカットで呼び出し機能とかがあるともっと良かった。
jQueryで自動的に書き換える（見たままモード）
jQueryのコードをフッターに貼って、h3・h4・h5タグがh2・h3・h4タグに書き換わるようにします。
Webサイトを表示する際に自動で書き換えるので、管理画面での記述は変わりません。
メリット
- 一度設定すればOK
デメリット
- 不具合が出ても自分では直せない
- 動作しない場合がある
推奨度★★★★☆
メリットもデメリットも大きい方法です。
うまく動けばいいのですが、私のブログではなぜか動かず（原因はよくわからない）
「##」で<h2>を指定する（Markdownモード）
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
Markdownモードでは、「#」の個数で見出しを表現するので、もともと「（ツールバーの）大見出しが<h3>になってしまう問題」とは無関係です。
- h1 … #
- h2 … ##
- h3 … ###
- h4 … ####
メリット
- シンプル
デメリット
- Markdownの記法を覚える必要がある
- 書きながら実際の見た目がイメージしにくい
推奨度★★★★☆
個人的にはけっこう好きな方法で、今回ショートカット見つけるまではmarkdownで書いてました。ただまあ、中級者以上ですね。
h2タグを直書き（はてな記法モード）
はてな記法はMarkdownに似てますが、「#」ではなく「*」を使って見出しを入れます。
しかし、はてな記法では<h1>と<h2>に相当する記法がないので、以下のようにHTMLを直接書く必要があります。（HTML編集画面ではなく、はてな記法上でHTMLを書くということです）
- h1 … <h1> ～ </h1>
- h2 … <h2> ～ </h2>
- h3 … *
- h4 … **
- h5 … *** （以下略）
メリット
- なし
デメリット
- はてな記法を覚える必要がある
- はてな記法が今後あまり使われなさそう（無駄な知識になる）
- 書きながら実際の見た目がイメージしにくい
推奨度★☆☆☆☆
そもそもHTML直書きをしたくないので、あまり解決方法になってないですね。
はてな記法については、元々の用途だったはてなダイアリーもサービス終了になりますし、どうなんでしょう。レガシーコストとして残すしかないのかな。
総評
まとめます。
どの方法を取るかはそれぞれでいいと思いますが、私個人としては「執筆コストが上がらないこと」を最重要視して、
h3問題の解決だけなら自動書き換えがベターだけど、
ショートカットは記事作成そのものが捗るので絶対使うべき
というのが結論です。
ショートカットは
- 右手をキーボードからマウスに持ち替える
- ツールバーまでカーソル移動
- 任意のボタンを押す
というアクションを、
- 両手をキーボードに置いたままショートカット入力
に短縮できることで生産性にだいぶ差が出るなぁと感じます。
過去記事がたくさんあって面倒だ、という方は自動書き換えと手動書き換えの併用もアリじゃないでしょうか。
上で紹介したJQueryのコードでは「本文エリア内にh2が存在しない時だけh3をh2に書き換える」修正版が出ています。
さて、長くなったので終わります。近々、はてなのショートカット一覧をまとめます。
（11/26 追記）ショートカットまとめました。
