Chromeではてなブログの大見出しをh2で記述する方法2つ

Contents

はてなブログのhタグで、記事ページにh2タグが欠落している問題ですが、Chromeを使用している人は拡張機能を入れることで解決します。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログPro

がオススメ！

大見出しがh3になっているっておかしくない？

そもそも、はてなブログはh1タグがブログタイトルで、h2タグがブログの説明に来ています。

で、さらに記事タイトルもh1ですが、大見出しがいきなりh3なのです。

つまり記事中のh2タグが抜けているのです。

Googleは見出しタグはh1から始まってh6まであるが、h1の次はh2という階層構造を重要視することは周知のことです。

そのh2タグが抜けていることで、Googleのbotがクロールする順序が違っているので戸惑ってしまいSEO的に問題があるということらしいです。

「あまり関係ない」という見解もあるようです。

しかし、h3をh2に変更しただけでPVが増えたという人もいるくらいですから、検索順位に影響するのかもしれません。

私の知識では「かもしれません」のレベルですが、なんとなく気持ち悪いので大見出しをh2に変更したほうが良いと思いました。

※上記ように文節にマーカーがスゥーっと引けるようなカスタマイズは下記 ⇓

WordPress侍

2019.03.09

はてなブログに蛍光マーカー風ラインを引くようなアニメーションを実装

https://wordpress-samurai.com/marker_line_draw

最近、投稿記事内の強調したい文章や文節に蛍光ペンでラインマーカーを使用しているサイトが特に目立ちます。パッと見た目のインパクトはありますし、何を強調しているのかわかりやすいですよね。ではもう少し強調して、今この文節のように、読む直前に蛍光マーカーでラインを引いていけばより目立つのではないでしょうか？はてなブログのカスタマイズで蛍光マーカー風ラインを下線を引くように動かしていく方法をご紹介いたします。「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。はてなブログをやるなら、制限が...

Chromeの場合は拡張機能で

Chromeを使用している人は拡張機能でh2タグの挿入が可能です。

過去の記事に対しては出来ませんが、今後はこの機能で変更することが出来ます。

シロマ(NO TITLE)さんがChrome Add-on for Hatena という拡張機能を作って

くれています。

Chromeブラウザの設定(右上の点々のところ) → 設定 → 設定画面左上の3本線 → ユーザー補助機能 → Chromeウェブストアを開く → Chrome Add-on for Hatena で検索すると出てきます。

この拡張機能はその他の機能も有しているのですが、今回はh2タグを入れるだけの機能として使用させていただいております。

h2にしたい行を選択し、Chromeの右上のアイコンをクリックし<h2>をクリックするだけです。ハイ簡単ですｗｗ

その後大見出しでh3を、中見出しでh4を、小見出しでh5を選択すればよいということです。

目次を入れる機能や背景をグレーにする機能など便利な機能が有りますのでぜひ有効活用して下さい。

SHIROMAG

はてなブログ編集用のChrome拡張機能を作りました（使い方の説明）

https://www.notitle-weblog.com/entry/hatena-chrome-add-on

見たままモードの編集を補完するChrome拡張はてなブログでブログを書くときに「見たままモード」を利用している人が多いかと思います。ということで、「見たままモード」での記事編集を補完するGoogle Chromeの拡…

「Brooklyn」の作者シロマ(NO TITLE)さんのサイトはホント参考になります。

jQueryで書き換える方法

jQueryで書き換える方法もあるようです。

h3を強制的にh2へ、h4を強制的にh3へ変更するということです。

実装するので気にせず大見出し、中見出し、小見出しを設定できます。

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[
$(document).ready(function(){
$('h3').replaceWith(function() {
$(this).replaceWith('&lt;h2&gt;'+$(this).text()+'&lt;/h2&gt;')
});
$('h4').replaceWith(function() {
$(this).replaceWith('&lt;h3&gt;'+$(this).text()+'&lt;/h3&gt;')
});
$('h5').replaceWith(function() {
$(this).replaceWith('&lt;h4&gt;'+$(this).text()+'&lt;/h4&gt;')
});
});
// ]]&gt;&lt;/script&gt;