チョコベリーの暮らしをちょっと豊かにするブログ

3児育児中のワーママです。ライフハック、子育てなど暮らしを豊かにするヒントや気づきを綴っています。

MENU

 

はてなブログの大見出しにh2がない問題!解決方法は・・・?

f:id:chocoflowerheart:20200305115635p:plain

はてなブログの大見出しが、h3から始まっているってご存じでしたか?

 

通常は、h1、h2、h3と順番に並んでいるはずなのに、なぜかはてなブログではh1、h3、h4・・・という順番になっていて、h2がないのです!

 

なぜ・・・?このままでいいの?

 

対処するならば、どんな対処法があるの?

どうやって対処したらいいの?

紹介しますね!

  

 

はてなブログの見出しとは?

 

見出しとは、文章のタイトルとして書かれている部分のことです。

このタイトルがあることで、どんなことが書いてあるのかわかりやすくなりますよね。

 

大見出し

中見出し

小見出し

↑これですね。

 

ブログの画面では、こんな風になってます。

ブログの画面上部分

ブログの画面2

タイトル部分について、HTML編集で見ると・・・

はてなブログの見出し確認

 

あれ?h2がない!!

 

本来は、h1→h2→h3・・・と順番に並ぶはずなのに、h2がないのです!

  

なぜ、はてなブログにh2がないの? 

 

本来はあるべきh2がないなんて、ブログとして大問題!です。

でも、ないまま、現在に至るならば、何か理由があるのかも知れません。

そこで、調べてみました。

 

すると、なぜh2がないのか、はてなブログに問い合わせてらっしゃる方がいらっしゃいました。

namakeru.com

 

はてなブログさんからの回答は、

はてなダイアリーでは記事のタイトルをh3としているため、
はてなダイアリーの仕様と合わせるためにh3となっております。

えーーー!?

 

前の仕様と合わせるためだったのね・・・。

そこをなんとかできなかったのか・・・!

いや、どうしてもできなかったから、今に至るんだよね。そうだよね・・・。

 

変えられなかったのは仕方ないにしても、このh2が存在しない状態は、SEO的にも問題ありという意見もあります。

しかし、問題ないという意見もあるので、どちらが正しいかはよくわかりません。

はてなブログの運営側が変更していないので、大きな問題はないのではないかとも考えられます。

 

ただ、この状態が適切ではないため、気になる!という方は、h2を加える変更を行なっているようです。

 

では、どんな対処があるのか?

見てみましょう!

 

対応は4つ!

 

いろいろ調べてみると、手順は大きく4つあるようです。(自己責任でお願いいたします。)

 

手動で書き換える

はてなブログの「HTML編集」でh3→h2に1つ1つ変えていく方法です。

記事が少なければ問題ありませんが、記事数が多い場合は大変です・・・!

 

Markdownモードで書く

はてなブログでは、3つの編集モードで書くことができます。見たままモード、はてな記法モード、Markdownモードです。

 

このうちのMarkdownモードを使うと、大見出しをh2から始めることができるそうです。

手順は、はるなぴさんのブログに詳しく書かれています。私がh2問題を知るきっかけにもなったブログです・・・!

www.halu7.com

 

ただ、こちらの手順も、すでに記事がたくさんある方にとっては、ちょっと難しい対処法だと思います。

 

GoogleChromeの拡張機能を利用する

GoogleChromeの拡張機能を利用すると、h2タグの見出しを簡単に作ることができます。

ツールの「h2」ボタンを押下することで、h2タグが作れるようです。

こちらが使えるのは、見たままモードで書いている方のみとのこと。

 

とても便利ではありますが、すでに記事がたくさんある場合には、1つ1つ修正していく必要がありそうです・・・。

 

chrome.google.com

使い方は、こちらが参考になります。

affiliate-couple.hatenablog.com

 

jqueryを利用する

jqueryという機能を使うと、自動的に書き換えてくれるそうです。

こちらは、既存の記事にも対応してくれます!

手順は、CSSを書き換えることになります。 

www.oomametomame.com

 

 

私がとった対策はjquery

 

検討した結果、私も対処を行なうこととしました!

なぜなら、やっぱりh2がないというのが気になるから。

 

では、どの方法をとる?

 

私は、jqueryにしました!

 

すでに大量の記事があったので、それらを手作業で直していくのは大変です・・・。

既存記事も自動的に修正してくれるということで、jqueryを選択しました。 

 

手順は?

タグを書き換えるソースをコピーし、はてなブログのデザインー設定ーフッタに貼り付けます。

はてなブログのデザインー設定ーフッタ画面

既存のソースは保存するなどして、データを保存しておいてくださいね。

 

ソースはこちらを参考にしました。ありがとうございます!

www.ikemenmusuko.net

 

そして、CSSなどでh2に関する処理を書いていた場合は、それらのソースをすべて修正する必要があります。h3→h2に、h4→h3に・・・という感じですね。

 

私の場合、

・CSS(見出しの加工処理)

・記事下(アドセンスの広告追加の処理)

・スマホ用

を修正しました。

 

こちらも、既存のソースは念のため保存しておいて、修正を行なってみてくださいね。

 

修正したら、プレビューで確認して、問題ないか見てみましょう!

 

予想外の場所に変化があったら・・・?

プレビューで見てみたら・・・

 

あれ?タイトル下のサブタイトル表示も変わっている!

 

私は、大見出しを吹き出しにする処理をCSSに書いていたため、タイトル下のサブタイトルも吹き出しになってしまったのです・・・!

 

ど、どうしたらいいの・・・? 

 

調べたら、こちらが参考になりました!

www.attack.work

私が書いていた処理は、「ブログ全体のh2全部のデザインを変更してね」という処理だったようです。

ここを「記事内のh2だけのデザインを変更してね」という処理に変えればOKとのことでした。

.entry-content h2 {  デザインコード  }

「.entry-content」が「記事の中」を表しているとのことです。

 

これに基づいてCSSを修正したら・・・、元に戻りましたー!

はてなブログのタイトル下のサブタイトル

よかった・・・! 

 

CSSを修正すると、思わぬところに影響がでてくることもあります。

修正後は、きちんと確認したいですね。 

 

気になる方はh2を追加して、正しい順番に変更しよう!

 

はてなブログにh2がない問題は、はてなブログ運営側が修正をしていないので、そんなに気にしなくてもよいのかもしれません。

 

Googleのジョン・ミューラー氏も、「h1タグ、h2タグ、h3タグの順番が間違っていたら問題になりますか?」という質問に対して、

実際には問題にならない。ページの内容を理解するために見出しタグを多少は使っているが、厳密に正しい順番である必要はない。

と回答しているそうです。

webtan.impress.co.jp

 

でも、「多少は見出しタグを使っている」とのことですし、Google以外のサイトが見だしタグを使っている可能性もあります。

 

私が気になっていたのは、今回のjqueryの修正では、HTMLそのものが変わるわけではないということです。

ですから、Googleなどのサイトが、jQueryも適切に読み込んでくれるのか?ということが気になっていました。

 

調べてみると、読み込んでくれるという情報を見つけたのですが、なんとサイトを保存しておくのを忘れて、今となっては見つからず・・・。

調べた中では、こちらのサイトに、

JavaScriptもjQueryも適切にレンダリングして、コンテンツを評価しています。

と記載がありました。

www.xn--gckve1azg.com

そこで、私はh2がないことが気になったため、対応した方がよいと考えて、対応を入れてみました。

 

はてなブログのh2がない問題。

気になる方は、こうして修正することも可能です!

自分の判断に基づいて、必要であれば、できる範囲で対応していきたいですね。