つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

はてなブログの大見出しは「h2タグ」ではない!?

はてなブログ見出しにh2タグがない!?

おすっ!つな(@tu_na_69)です(=゚ω゚)ノ

問題発生です!!!!!

先日、ブログの見出しをおしゃれにカスタマイズした時に、「あれ?」と思うことがありまして・・記事の中に「h2」タグが見当たあらない(。´・ω・)?

「h2」見出しがない⁉

見出しタグをカスタマイズしたときのこと。

カスタムCSSにおしゃれな見出しコードを追加して、ブログを表示させてみたのですが、h2見出しが表示されないのです。

h2見出しがh3見出しとして表示されているみたい・・・。

h2見出しはいったいどこに行ったの!?(ノД`)・゜・。

泣いても呼んでも、h2見出しが出てこないので

こちらから捜索開始(`・ω・´)ゞ

 

そこで見えてきたはてなブログh2見出しの謎を解明していきたいと思います。

 

みなさん、ふだん記事を書くときに見出しタグをどのように設定していますか?

わたしは、見たまま編集で記事を書いています。

 見出しを付けたいときは、左上にある「見出し」を使っています。

「大見出し」が「h2」タグだと思っていましたが・・・

「HTML編集」を開いてよく見てみると、「大見出し」は「h3」タグなんです。

こ、これはどういうことなのでしょうか(◎_◎;)!?

もう少し探ってみましょう。

はてなブログの見出しタグの正体

 はてなブログの編集画面の見出しタグを調べてみました。

 入力した文字に見出しタグを設定して、「HTML編集」でタグをチェックします。

 

はてなブログの見出し一覧

 

「大見出し」→「h3タグ」

「中見出し」→「h4タグ」

「小見出し」→「h5タグ」

「標準」→「pタグ」

 

や、やっぱり「h2タグ」がいない(・へ・)

 

こちらの画像で確認するともっとわかりやすいと思います。

HTMLで見出しコードを設定して表示させてみるとこのようになります。

f:id:pea-nut:20180501174807p:plain

 こちらは、はれなブログの見出しタグを設定したものです。

f:id:pea-nut:20180501175522p:plain

見出しタグはこのように設定されているようです。

「大見出し」=「h3タグ」

「中見出し」=「h4タグ」

「小見出し」=「h5タグ」

 

Markdownで記事を書いている場合には、 見出しタグを「##」とシャープの数で表示しているので、間違えることはないと思いますが、見たまま編集で記事を書いている人は、「h2タグ」が行方不明になっていることがあるかもしれません。

タグを自分で編集

 見出しタグは順番通りに並ぶべきものなので、「h2タグ」が存在しないままに「h3タグ」から始まってしまうのはあまりよくないので、修正していきたいと思います。

 

「HTML編集」で<h3>~</h3>の部分を<h2>~</h2>と書き換えます。

同じように、

<h4>だった箇所は<h3>に、

<h5>なら<h6>に書き換えていきます。

まだ記事数があまり多くなかったので、それほど時間をかけずに書き換えすることができました。

みなさんも記事を見直して、タグが正しく設定されているかチェックしてみてください。

見出しカスタマイズ

見出しが整ったら、おしゃれにカスタマイズしてみませんか。

pea-nut.hatenablog.com

 記事を紹介してくれたサイト

記事を紹介してくれたサイト この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。

ブログのカスタマイズ方法 - Ms. Otter’s diary

【衝撃的事実】はてなブログの「大見出し」はh2タグではないらしい - テクノモンキー(サブ)