さよなら無気力な日々よ

無気力→活動的へ、自由気ままに書くブログ

はてなブログの大見出しをh3タグからh2タグに手作業で書き換えることにしました。

スポンサーリンク

ブログに命を燃やしています!

どうも、あみさかです

 

今日、広告の表示位置を修正しているときに初めて知ったのですが、僕が今まで使っていた大見出しはどうやら本当の大見出しではなかったようです

はてなブログでは、大見出しがh3タグとなっていてh2タグは自分でHTML編集から書き込まないといけません。

 

このことを知らずに1年間も記事を書いていました。

相変わらず情けないです。こんな状態を続けているから弱小ブロガーから抜け出せないのでしょう。

まあ、知らなかったことをどうこう言っても仕方がありません。

 

というわけで気を取り直して、

ブログを書くときには見出しを使って記事を整理します。

その見出しには種類があり、大見出し・中見出し・小見出しというものがありますね。

 

通常であれば、

  • 大見出しのHTMLのタグは<h2>
  • 中見出しのHTMLのタグは<h3>
  • 小見出しのHTMLのタグは<h4>

と並んでいます。

 

しかし、はてなブログの見たまま編集の場合は「見出し」を指定すると

  • 大見出しのHTMLのタグが<h3>
  • 中見出しのHTMLのタグが<h4>
  • 小見出しのHTMLのタグが<h5>

となってしまっています。

一目で分かるようにはてなブログの見たまま編集では、本来大見出しを表す<h2>というタグが記事中に存在しないことになります。

これがはてなブロガーの間で問題視されているようですね。

 

SEOの観点では、

タイトルに使われるh1タグは1つの記事で1つだけ使い、次にh2タグ、h3タグと見出しの大きさによって順番に使い分けることが好ましいとされています。

そのため、タイトルでh1タグを使うのにも関わらずその次の大見出しがh3タグとなってしまうとh2タグを飛ばしていることになってしまいます

自分としてはh3タグを大見出しとして使っているのにも関わらず、Googleなどのクローラー側からは「h3タグだから中見出しだ」と認識されることになれば損してしまうことになるかもしれません。

人が目を通してチェックしているわけではなく機械的に処理されてしまうので仕方がありませんね。

 

そのような見出しの解釈の違いを生まないためにも、大見出しはh2タグを使うことが好ましいと考えられます

 

ちなみに、当ブログで利用させていただいているテーマでは見出しが次のように表示されます。

f:id:solodays:20191017020430j:plain

記事タイトルで使用されるh1タグは文字が大きいだけで装飾が無いため、見出しとしてh1タグを使用することは考えられていないようです。

 

h2タグのデザインは今日初めて見ました。

今まで見出しのタグを書き換えようと考えたことなんてなかったので、見出しの大きさによってこんなにデザインが違うということも知りませんでした。

やっぱりh3タグよりもh2タグの方が、見出しとしてしっかりしているように感じます。

 

そして、現在使用しているテーマではh4タグまで装飾が付いています。h4タグだけちょっとオシャレですね。

 

h5タグ、h6タグも見出しとしての機能は持っていますが、装飾はありません。

今まで小見出しとして使っていたh5タグに装飾が無いことが気になっていましたが、h2タグの存在があることに気付いてやっと解決しました。

小見出しを使うことはあまりありませんが、やっぱり見出しが装飾なしの文字だと少し物足りませんよね。

 

というわけで、このブログでも大見出しとしてh2タグを利用することに決めました

そのため、大見出しがh2タグ・中見出しがh3タグ・小見出しがh4タグということになります。

 

この「はてなブログの大見出しはh3タグ」ということについて色々調べていると、自動で見出しのタグを書き換えてくれるコードというものを見つけました。

こちらの記事です。

www.ikemenmusuko.net

 

はてなブログの見たまま編集の画面では大見出しを選択してもh3タグになってしまうため、ブログ全体のh3タグをh2タグに書き換えてくれるシステムを作っておくということです。

同様に中見出しのh4タグをh3タグに、小見出しのh5タグをh4タグに全て自動で書き換えてくれるというもの便利なものです。

ただ、厳密にはHTMLを書き換えるというわけではなく、そのように認識させるためのコードになります。

そのため、実際に記事を見てみるとh2タグの大見出しとして表示されますが、HTMLを確認するとh3タグのままということです。

 

実際に先ほど紹介した記事に載っていたコードを当ブログのヘッダ(記事上・記事下でも可)にコピペさせていただくとh3タグはh2タグとして認識されるようになりました。

これで記事内にh2タグが無いという問題は解決しました

 

ところが、ここでまた新たな問題が出てきてしまいます。

ヘッダに貼りつけた「見出しのタグを書き換えるコード」を読み込むまでの間に大見出しがh3タグとして表示されてしまうことです。

記事の方では大見出しがh3タグのままで、ヘッダに貼ったコードが働いたタイミングでh2タグとして認識されるためラグが多少生じてしまうのは仕方がないことです。

しかし、見出しのデザイン・装飾が入れ替わる瞬間が見えてしまうということが美しくありませんでした

 

それに加えて、ヘッダや記事などにあまり多くのコードを入れたくありません

余分なコードが入ってしまうとページの表示速度に影響しますし、そもそも僕は複雑なコードを理解することが出来ません。

自分では理解することの出来ないコードだらけの状態になってしまうと編集するときにとても不便です。

そういうわけで、自動でタグを書き換えてくれるコードは使わず毎回手作業で見出しのタグを書き換えることにします

 

基本的にはパソコンでブログを書いていますし、手作業で毎回見出しのタグを書き換えるぐらいであればそこまでの労力は費やしません。

怖いのはタグを書き換え忘れてしまうことですね。レイアウトの崩れに繋がるので気を付けなければいけません。

 

そして、現時点で当ブログの記事数は400記事を超えているため全て手作業で書き換えるのは大変な作業になります。

見出しを使っていない記事もありますが、見出しがあるかどうかも確認していかなければいけないため結局全ての記事を見ていかなければいけません。

とても時間がかかりそうです。

 

見出しの位置に関わるアドセンス広告を配置していることもありますし、レイアウトが崩れるのは嫌なのでとりあえずは先ほど紹介したタグを書き換えるコードを使わせて頂こうと思います。

 

そして、これまでに書いた全ての記事の見出しを手作業で書き換えたタイミングでそのコードを外そうと思っています。

記事によって見出しのデザインが違うのは美しくありませんから。

 

まずは、最優先で過去に書いた記事の見出しのタグの書き換えを行っていきます。

漏れが無いように正確に取り組んでいきたいと思います。

 

それでは、今日がかけがえのない日となりますように...