ゆーんの徒然日記

【4歳0歳ママ】子育て・おでかけ・お買い物の記録📝

はてなブログにはない「見出しh2」を導入|それに伴い訂正した箇所

f:id:xoyu-nxo:20190730152027j:image

こんにちは、ゆーんです。

はてなブログには「h2」見出しがないこと、みなさんご存じでしょうか?

はてなブログはブログタイトルが「h1」、記事内の見出しは「h3」から始まっており、「h2」がありません。

「h2」見出しがないことははてなブログを書く上ではさほど問題でもありませんが、どうやらSEO的にはあまりよろしくないよう。

検索流入もそこまで多くもない当ブログですが、対策できるならばしておくに越したことはないでしょう。

  • はてなブログに「見出しh2」を導入する方法
  • それに伴い変更を加えた箇所

についてまとめました。

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

ことの発端はツイッタ―でも交流のあるたよらこさんのこちらの記事。

www.tayorako-hiraya.com

実はわたし、はてなブログにはh2がないそうだというようなことは以前にも目にしたことがあったのですが…

当時は正直デザインCSSナニソレ状態だったので(今もそこまで進歩していませんが)そんなのもあるんだな、、、難しいからもう少し慣れてからにしよう、、、で終わらせてしまってたんですね。

そうこうしているうちに記事数は100記事超え

この100記事以上の「見出しh3」を全て「h2」にするにはどうすれば良いのか。

1つ1つ手直し…なんてやってられない…!!

そんな時救いの女神が現れました。

h3をh2に一括変換する方法

たよらこさんに紹介して頂き辿り着いた、おおまめさんの記事。

おおまめさん、以前から読者登録させて頂いてたのに、、、!!!

そしてたぶん以前わたしがh2について読んだのおおまめさんの記事でだわ…!!

あの時もっとちゃんと読んで対策していれば、、、!!(ノ_<)泣

後回しにすると、良いことないですね。

おおまめさんの記事で紹介されている見出し変更方法のうち、わたしはjQueryで書き換える方法で見出しh2を導入しました。

紹介されているサイトのコードをコピーし、[記事上]に貼りつけ。

変更するにあたって記事を読んだつもりなのに自分が何をしたら良いのか明確に分からなかったわたしはツイッタ―でおおまめさんにアドバイスを頂きました(^^;)

おおまめさんの分かりやすい解説のおかげで、無事「h3→h2、h4→h3、h5→h4」といったかたちで、一括変更することができました。

たよらこさん、おおまめさん、この件では大変お世話になりました…感謝感謝感謝でございます…!!

見出しh2導入後にやったこと

さて、見出しh2を導入できたのは良かったのですが、それに伴い幾つか問題が発生しました。

見出しデザイン変更

1つ目。

これまでの見出しデザインが総崩れしました。

h3→h2、h4→h3となった為、これまで大見出しに使っていたデザインが中見出しのデザインに、中見出しに使っていたデザインが小見出しのデザインになってしまったんですね。

肝心の大見出しのデザインは、ただの太字です。

ですがコレは案外すんなり解決しました。

見出しデザインで使用しているコードを、一つ一つ、手動で書き換えていくだけです。

デザインCSSに自分が貼りつけている見出しデザインのコードを見たら、とかh3~とかh4~とかで始まってますよね。

それを全て、

h3(これまでの見出し大)→h2

h4(これまでの見出し中)→h3

h5(これまでの見出し小)→h4 

といった感じに書き換えていきます。

1つのデザインコードの中にいくつかh〜というのがあるので、全て間違えないよう変更しましょう。

きちんとデザインにも反映されるかと思います。

間違えてコードを消さないように要注意ね!

ブログタイトル下の紹介文はh2

そして見出しデザインを変更したことで気付いたのですが、どうやらはてなブログのブログタイトル下の紹介文はh2のようですね。

なぜ分かったかというと、大見出しのデザインコードをh3からh2に変更したところ、そのデザインがヘッダーの紹介文にも反映されてしまったからです。

おおまめさんにも相談しましたが、ブログタイトル下に大見出しの「吹き出し」のデザインがついてしまいました…(´Д` )

結局解決方法が分からなかった為、現状紹介文を消している状態です。

ヘッダーに画像を設定している人は問題ないですが、タイトルと紹介文を設定している方はそちらにもデザインが反映されてしまう可能性がありますのでちょっと気にして見てみてくださいね。

記事中アドセンスのコード変更

そして2つ目。

記事中アドセンスの設定位置にズレが生じました。

わたしは記事中アドセンスを自動で貼り付けられるようにしています。

www.xoyu-nxo.work

このコードの設定で、広告を貼る位置を1つ目の大見出しと、3つ目の大見出しの上という設定にしていた為、ズレが生じたんですね。

こちらも手動で、コード内のh3をh2に全て書き換えることで解決しました。

 

 

まとめ

 

はてなブログにはない「見出しh2」を導入し、それに伴い問題が生じた箇所に訂正を加えました。

情報としては知りつつも難しそうという思いで放置してしまってた「見出しh2」問題…

もっと早くに手をつけておけば良かったな、と思います。

後になればなるほど、他で問題が生じる可能性が増えますからね…!!

▽はてなブログ奮闘記録

www.xoyu-nxo.work

www.xoyu-nxo.work

www.xoyu-nxo.work

www.xoyu-nxo.work

www.xoyu-nxo.work

ゆーんでした!!