好奇心のはけ口

KindleUnlimitedのタイトルの中からおすすめを紹介するブログ

はてなブログでh2タグを使う方法

   f:id:j-satoru:20200318193905j:plain

はてなブログをお使いの皆さん、

見出しを使う時「h2タグ」の存在を気にしていますか??

 

はてなブログにはh2タグがないのはご存じの方は多いと思います。

 

 現状はてなの見出しタグは、

  • タイトル→h1
  • 大見出し→h3
  • 中見出し→h4
  • 小見出し→h5

となっています。

 

見ての通り〈h2〉タグがないですね。

 

SEO的にもhタグは1から2、3・・・と順にしていくことで

効果を上げていくとも言われています。

 

ただ、正直気にし過ぎても意味ないのは承知しています。

 

実際に有名ブロガーのヒトデさんはYOUTUBEでこう言っていました。

「昔は大見出しで文字がでかくなるのがダサいと思って全部h4タグ(中見出し)でやっていた。それでも結果が出ていた」

 

※こちらの動画です。(というかこの回面白かったです。)

www.youtube.com

 

確かにSEOばかり気にしていて記事に注ぐ力が下がるようだったら本末転倒な気もします。

ただ、僕自身は少し前から

「h2がないのはなぜだろ??」

と気にしていて、自分で手動でh2に変更していました。

(調べたら自分で変えること自体にデメリットはなさそうだったので)

 

最近の話なので、順位の反映がどうなったとかの結果報告はできませんが、

やらないよりはやってほうが良いと思い続けています。

 

しかし手動でポチポチ変えるのは結構めんどくさいので、

今現在は以下のツール、手順にて作業を進めています。

 

参考になれば・・・!

 

 

 h2タグを簡単設定する方法

 

 「Chrome Add-on for Hatena」

というGoogleChromeの拡張機能を利用します。

Googlechrome拡張機能をインストールする方はこちら

 

この機能の開発者はSHIROMAさんという方で、

下記ページはSHIROMAさんのブログです。

この機能の使い方の説明など細かく書いてくださっています。

www.notitle-weblog.com

 

 基本僕はh2タグに変換くらいにしか使いませんが、

その他に以下のような機能があります。

   

  • テキストの「左揃え」「中央揃え」「右揃え」
  • テキストの拝見をグレーにする
  • タグにクラスの付与
  • 日付、目次をつくる
  • 書式の初期化

 

テキストの左、中央、右揃えはこんな感じ。(左揃えはデフォなので割愛)

 

中央揃え

右揃え

 

にしたり、

 

背景をグレーにするはこんな感じ

 

 

タグにクラスの付与はこんな感じ※プレビューを開かないと効果見えないです。

 

 

目次はこのはてなでもできるし、

日付は想像通りこんな感じです。

↓↓

2020年3月18日

 

 

過去記事をh2タグに変更するには?

 

めんどくさいのはここですよね?

100記事とかあると全部を手動で変えるのはちと厳しい。。。

 

僕は主要記事のみを変えていますが、以下の手順で変えています。

 

①はてなブログ記事をHTML編集画面で全てコピーする

その後Windows メモ帳アプリにペーストします。

 

f:id:j-satoru:20200318192925p:plain

 


②メモ帳アプリの「編集」→「置換」をクリック

 

f:id:j-satoru:20200318192819p:plain



 

③「検索する文字列」にh3を入力・「置換後の文字列」にh2を入力

 

f:id:j-satoru:20200318192846p:plain

 


④最後に「すべて置換」をクリックして終了

 

こうすることで全てh3がh2に書き換わります。

※その他h4をh3に変えたりする必要がある記事は同じ手順で修正していきます。

 

これでOKです。

 

ただ、たまにメモ帳にコピペし、置換えたHTMLをコピペしはてなブログに貼り付けると広告表示が崩れていたりします。

これも再度貼り付けてるのでちょっと手間かな・・・。

 

 デザインの変更をお忘れなく!

 

 h3を全てh2に変更して

「あ~やっと終わった~」

となりますが、もうちょっとです。

 

h2タグに変更した後、見出しのデザインカスタムをしている人は

ここも変える必要があります。

 

じゃないとh3見出しはデザインが入っているけど、h2見出しはカスタムされていない

むき出しのテキストのまま・・・という見た目になります。

 

はてなブログのデザイン→{}デザインCSSをクリック

 

皆さん、デザインCSSのどこに見出しコードを貼り付けたか覚えていますか?(笑)

ちゃんとわかる前提で進めますが、

見出しカスタムの際にコードを貼り付けたと思いますが、

そのコードを見ると対象となる見出しタグ「h3」の記載されている箇所があると思います。

これを「h2」に変えるだけです。

 ※今まで大見出し、中見出し、小見出しそれぞれに見出しデザインをカスタマイズしていた方は、h3をh2に変えると同時に、h4をh3に、h5をh4に変える必要があるのでお忘れなく!!

 

ランキング参加しています。ポチっとお願いします!

ブログランキング・にほんブログ村へにほんブログ村