こんにちは、ゆーんです。
はてなブログには「ｈ２」見出しがないこと、みなさんご存じでしょうか？
はてなブログはブログタイトルが「ｈ１」、記事内の見出しは「ｈ３」から始まっており、「ｈ２」がありません。
「ｈ２」見出しがないことははてなブログを書く上ではさほど問題でもありませんが、どうやらSEO的にはあまりよろしくないよう。
検索流入もそこまで多くもない当ブログですが、対策できるならばしておくに越したことはないでしょう。
- はてなブログに「見出しｈ２」を導入する方法
- それに伴い変更を加えた箇所
についてまとめました。
はてなブログには見出しｈ２がない
ことの発端はツイッタ―でも交流のあるたよらこさんのこちらの記事。
実はわたし、はてなブログにはｈ２がないそうだというようなことは以前にも目にしたことがあったのですが…
当時は正直デザインCSSナニソレ状態だったので（今もそこまで進歩していませんが）そんなのもあるんだな、、、難しいからもう少し慣れてからにしよう、、、で終わらせてしまってたんですね。
そうこうしているうちに記事数は１００記事超え。
この１００記事以上の「見出しｈ３」を全て「ｈ２」にするにはどうすれば良いのか。
１つ１つ手直し…なんてやってられない…！！
そんな時救いの女神が現れました。
ｈ３をｈ２に一括変換する方法
たよらこさんに紹介して頂き辿り着いた、おおまめさんの記事。
おおまめさん、以前から読者登録させて頂いてたのに、、、！！！
そしてたぶん以前わたしがｈ２について読んだのおおまめさんの記事でだわ…！！
あの時もっとちゃんと読んで対策していれば、、、！！(ノ_＜)泣
後回しにすると、良いことないですね。
おおまめさんの記事で紹介されている見出し変更方法のうち、わたしはjQueryで書き換える方法で見出しｈ２を導入しました。
紹介されているサイトのコードをコピーし、［記事上］に貼りつけ。
変更するにあたって記事を読んだつもりなのに自分が何をしたら良いのか明確に分からなかったわたしはツイッタ―でおおまめさんにアドバイスを頂きました(^^;)
jQueryで→h2できました😭!!✨
— ゆーん (@xoyu_nxo) 2019年7月18日
が、デザイン変更したところ、タイトル下の紹介文にもh2のデザインが適用されてしまいました、、、変なとこに吹き出しついてる😫
この解決方法分かりますでしょうか、、？？
おおまめさんの分かりやすい解説のおかげで、無事「ｈ３→ｈ２、ｈ４→ｈ３、ｈ５→ｈ４」といったかたちで、一括変更することができました。
たよらこさん、おおまめさん、この件では大変お世話になりました…感謝感謝感謝でございます…！！
見出しｈ２導入後にやったこと
さて、見出しｈ２を導入できたのは良かったのですが、それに伴い幾つか問題が発生しました。
見出しデザイン変更
１つ目。
これまでの見出しデザインが総崩れしました。
ｈ３→ｈ２、ｈ４→ｈ３となった為、これまで大見出しに使っていたデザインが中見出しのデザインに、中見出しに使っていたデザインが小見出しのデザインになってしまったんですね。
肝心の大見出しのデザインは、ただの太字です。
ですがコレは案外すんなり解決しました。
見出しデザインで使用しているコードを、一つ一つ、手動で書き換えていくだけです。
デザインCSSに自分が貼りつけている見出しデザインのコードを見たら、とかh3~とかh4~とかで始まってますよね。
それを全て、
ｈ３(これまでの見出し大)→ｈ２
ｈ４(これまでの見出し中)→ｈ３
ｈ５(これまでの見出し小)→ｈ４
といった感じに書き換えていきます。
1つのデザインコードの中にいくつかｈ〜というのがあるので、全て間違えないよう変更しましょう。
きちんとデザインにも反映されるかと思います。
間違えてコードを消さないように要注意ね！
ブログタイトル下の紹介文はｈ２
そして見出しデザインを変更したことで気付いたのですが、どうやらはてなブログのブログタイトル下の紹介文はｈ２のようですね。
なぜ分かったかというと、大見出しのデザインコードをｈ３からｈ２に変更したところ、そのデザインがヘッダーの紹介文にも反映されてしまったからです。
おおまめさんにも相談しましたが、ブログタイトル下に大見出しの「吹き出し」のデザインがついてしまいました…(´Д` )
結局解決方法が分からなかった為、現状紹介文を消している状態です。
ヘッダーに画像を設定している人は問題ないですが、タイトルと紹介文を設定している方はそちらにもデザインが反映されてしまう可能性がありますのでちょっと気にして見てみてくださいね。
記事中アドセンスのコード変更
そして２つ目。
記事中アドセンスの設定位置にズレが生じました。
わたしは記事中アドセンスを自動で貼り付けられるようにしています。
このコードの設定で、広告を貼る位置を1つ目の大見出しと、3つ目の大見出しの上という設定にしていた為、ズレが生じたんですね。
こちらも手動で、コード内のｈ３をｈ２に全て書き換えることで解決しました。
まとめ
はてなブログにはない「見出しｈ２」を導入し、それに伴い問題が生じた箇所に訂正を加えました。
情報としては知りつつも難しそうという思いで放置してしまってた「見出しｈ２」問題…
もっと早くに手をつけておけば良かったな、と思います。
後になればなるほど、他で問題が生じる可能性が増えますからね…！！
▽はてなブログ奮闘記録
ゆーんでした！！
