MENU

「はてなブログの大見出しh3問題」のベストな解決方法を考えた(ショートカット使えた)

2020 3/26
「はてなブログの大見出しh3問題」のベストな解決方法を考えた(ショートカット使えた)

※この記事はこのサイトが「はてなブログ」だった頃の記事です。

はてなブログには「記事ページの本文中でh2タグが使えない」という欠陥仕様があります。

このような感じです。

  • タイトル … h1
  • 大見出し … h3
  • 中見出し … h4
  • 小見出し … h5

記事内で使用できる見出しタグがh2ではなくh3からになっていて、これがSEOに影響があるかもしれない、という話がありながら、なかなか公式に改善されない(SEOだけの影響はそれほどないと思いますが、UI・UX的にはやったほうがいいと思います)という状況が続いていました。

つなろっく
はてなブログの大見出しは「h2タグ」ではない!? - つなろっく
はてなブログの大見出しは「h2タグ」ではない!? - つなろっくおすっ!つな(@tu_na_69)です(=゚ω゚)ノ 問題発生です!!!!! 先日、ブログの見出しをおしゃれにカスタマイズした時に、「あれ?」と思うことがありまして・・記事の中に「h2...
オークニズム
SEO的に考えても、はてなブログの見出しはh3からh2に変更した方が良い - オークニズム
SEO的に考えても、はてなブログの見出しはh3からh2に変更した方が良い - オークニズムSEO的に考えても、はてなブログの見出しはh3からh2に変更した方が良い - オークニズム

ところが先日、ショートカットで見出しを作れることを発見して小躍りしましたので、ここでやり方を説明したいと思います。

また、併せて既存の方法と比較してどの方法がベストなのかの検討をしたいと思います。

目次

はてなブログの大見出し、現在とれる解決方法は

現在取りうる解決方法は、編集モードによって違いますが、それぞれ以下になります。

  • ショートカットを使う(見たままモード)New!
  • Chrome拡張を使う(見たままモード)
  • jQueryで自動的に書き換える(見たままモード)
  • 「##」で<h2>を指定する(Markdownモード)
  • h2タグを直書き(はてな記法モード)

ショートカットを使う(見たままモード)

きっかけは、はてなブログ執筆中に間違えてWordPressのショートカット「Shift + Alt  + 数字」で見出しを入れようとしたことでした。

 以下のショートカットで<h2>~<h6>までの見出しが入る事を確認しています(数字はテンキーだとうまく動かないようです)

  • 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拡張機能を入れると、こんな感じのポップアップを出すことが出来ます。

f:id:hoshinasia:20181114025740p:plain

左上の<h2>ボタンによって、カーソルの当たっている行をワンクリックで<h2>に変更することが出来ます

SHIROMAG
はてなブログ編集用のChrome拡張機能を作りました(使い方の説明)
はてなブログ編集用のChrome拡張機能を作りました(使い方の説明)見たままモードの編集を補完するChrome拡張 はてなブログでブログを書くときに「見たままモード」を利用している人が多いかと思います。 ということで、「見たままモード」...

メリット

  • 手軽
  • 誰でも使える

デメリット

  • 過去記事は手動で修正が必要
  • 1アクションごとにポップアップが閉じてしまう
  • Chrome限定

推奨度★★★☆☆

シンプルで簡単。ショートカットを使い慣れてない方、覚えてられないという人向け。

ポップアップの固定、もしくはショートカットで呼び出し機能とかがあるともっと良かった。 

jQueryで自動的に書き換える(見たままモード)

jQueryのコードをフッターに貼って、h3・h4・h5タグがh2・h3・h4タグに書き換わるようにします。

Webサイトを表示する際に自動で書き換えるので、管理画面での記述は変わりません。

イケメン息子とぐうたら猫の成長見...
はてなブログの大見出しをh3からh2へ自動的に書き換えるカスタマイズ - イケメン息子とぐうたら猫の成長見...
はてなブログの大見出しをh3からh2へ自動的に書き換えるカスタマイズ - イケメン息子とぐうたら猫の成長見...皆様、こんにちは。 この話題については既に議論は行われている内容となりますが、補足事項などがありますので改めてまとめさせていただきました。 はてなブログでブログを...

メリット

  • 一度設定すればOK

デメリット

  • 不具合が出ても自分では直せない
  • 動作しない場合がある

推奨度★★★★☆

メリットもデメリットも大きい方法です。

うまく動けばいいのですが、私のブログではなぜか動かず(原因はよくわからない)

「##」で<h2>を指定する(Markdownモード)

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Markdown – Wikipedia

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問題の解決だけなら自動書き換えがベター。でもショートカットは記事作成そのものが捗るので絶対使うべき

という対応が適切です。

ショートカットは

  1. 右手をキーボードからマウスに持ち替える
  2. ツールバーまでカーソル移動
  3. 任意のボタンを押す

というアクションを、

  1. 両手をキーボードに置いたままショートカット入力

に短縮できることで生産性にだいぶ差が出るなぁと感じます。

過去記事がたくさんあって面倒だ、という方は自動書き換えと手動書き換えの併用もアリじゃないでしょうか。

上で紹介したJQueryのコードでは「本文エリア内にh2が存在しない時だけh3をh2に書き換える」修正版が出ています。

さて、長くなったので終わります。近々、はてなのショートカット一覧をまとめます。

(11/26 追記)ショートカットまとめました。 

この記事を書いた人

香港在住6年目。Webマーケティング(SEO・ブログ・SNS)と仕事術、海外の話(海外生活・移住・出産・育児など)

コメント

コメントする

CAPTCHA


目次
閉じる