読者です 読者をやめる 読者になる 読者になる

ポジ熊の人生記

雑記ブログの育て方をメインコンテンツに、時事オピニオンや書評などを日々更新中です。

はてなブログ大見出しはh3だからh2に直そうよって話

blog blog-hatenablog


スポンサーリンク

2016年11月27日更新

 

みなさん、見出しを適宜使われていると思います。エディターでいうところの左上「見出し」です。ここをクリックすると「大・中・小・標準」という選択ができます。

 

これ「HTML編集」ではどう見えるかご存知ですか?

 

※はてなブログの話題

具体例

 

f:id:pojihiguma:20151128061636p:plain

自己紹介記事で見てみます。これを「HTML編集」で

 

f:id:pojihiguma:20151128061740p:plain

こんな感じ。「自己紹介」は大見出しで、<h3>タグに囲まれています。

 

f:id:pojihiguma:20151128061819p:plain

各見出しは「大・中・小」→「h3・h4・h5」とも言えるのです。

 

見出しを適宜使うと何が良いのか

読者が見やすい

中にはテキストのみで構成される方もいらっしゃいますが、それは文章家(文章力が高い方)に多いですね。ですが、ほとんどの場合は見出しを使用して階層表示したほうが見やすいはずです。

 

この記事も見出しにより作成しています。具体的には「見出しを適宜使うと何が良いのか」という大見出しでくくり、さらに「読者が見やすい」中見出しを使ったのち、その内容を記述しているのが、まさにここですね。

 

また、冒頭付近で[(コロン)contents]にて見出しを展開する必要があるから、というのも1つの理由。これも読者向けの配慮です。

 

検索エンジンが見やすい

googleのクローラーという、検索エンジンへ記事をインデックスするためにサイトをチェックするbotがおり、この記事も公開後はそれに見てもらうことになります。

 

その際、botは機械ですので、人間のようにビジュアル的にどうこうではなく、HTMLコードから記事内容をチェックします。

 

見出しタグを使用していると、botが「ここにはこういう看板があって、こういう動線が敷かれているのだな」というふうに見てくれるので、使い方が適切であれば評価が良くなるそうです。

 

ところでh1とh2タグは?

という疑問が湧きましたので、調べました。

h1タグ

h1タグの居場所はこちらです。

f:id:pojihiguma:20151128063326p:plain

これは「自己紹介」記事のページで右クリックし、ページのソースを読み込んだものです。h1タグが「記事タイトル」に使われているのがわかります。

 

これは納得ですね。一番大きな看板ですから最初の見出しタグ「h1」が使われる。ここに書いてある内容と記事内容が食い違って良いことはなさそうです(読者的にもbot的にも)。

 

h2タグ

ありません。ソースを表示しても、見当たらないのです。

 

現在のエディターでは、手動(HTMLコードを変更)で行わない限り、この「h2」タグが使われることはないようです。

 

だけど、bot的には「?」となりそうですよね。記事タイトルが一番大きな看板で、中を覗いてみたら以外に小さな看板「h3」が出てくるのですから。

 

本来、正しく見出しを使うなら「h2」を適宜入れてあげるべきなのでは?

 

H2タグを使った記事修正を実施

まずは実際に使ってみた

f:id:pojihiguma:20151128064111p:plain

なんてことはなく、<h3></h3>→<h2></h2>に書き換えるだけ。さて、プレビューは?

 

f:id:pojihiguma:20151128064156p:plain

このようになりました。[(コロン)contents]で展開した見出しで、一番前に来ていますね。h2タグの見た目のデフォルトは画像のとおり。

 

h2とh3の見た目の差別化を図る

f:id:pojihiguma:20151128064320p:plain

h2タグも装飾するコードを追加します。ここにh2も入れてあげる...

 

f:id:pojihiguma:20151128070946p:plain

このままだと見た目の変化がありませんね。

 

f:id:pojihiguma:20151128065059p:plain

見出しの種類が増えるので、h2とh3の見た目の差別化を図りたい。というわけでh5からh2へ1段ずらしの、新たにh5へコードを入れることにします。

 

全体を手直し

f:id:pojihiguma:20151128070912p:plain

さらにHTML編集により、h3タグをh2タグに書き換え。h4以降はエディターの「見出し」タブで見たまま編集でサクッとやってしまいます。

 

f:id:pojihiguma:20151128071437p:plain

完成!

 

油断は禁物です、修正チェックを。

 

修正チェックは[(コロン)contents]で

f:id:pojihiguma:20151128071606p:plain

ありましたね。これは[(コロン)contents]で確認するとわかりやすい。

 

h2タグは使うべき

理由

  • botがh1→h2とすんなり読み込んでくれる
  • 使える見出しが1つ増える

だが面倒だ

  • 頑張れ
  • 勝負記事だけでいいから修正してみないか
  • これから作る記事でルーチン化推奨

ポイント

  • h2もh3もまずはエディターの「大見出し」を振って、最後にHTML編集で必要な個所のh3タグをh2にすると楽ではないかな。

    f:id:pojihiguma:20151128072644p:plain

  • こうやってh2へ変える予定の見出しは「・」を打っておいて、修正したら「・」を消すと捗るよ。

 

文字列変換ツール(フリーソフトなど)でhタグを一律変換とかできるのかな。わかりません...

 

救世主出現

理沙:とっても便利なアドオンが公開されています!

クロームの拡張機能で、一発で文字列をh2にするアドオンを開発した猛者がいまして、そのツールが公開されています。

 

 

2016年11月27日現在はこれでノーストレスでh2入れてます、おすすめ!