八幡がブログをよりよくしていくために行ったこと。
第2弾は大大見出しの「ｈ２」タグです。
どうも、八幡です。
ＳＥＯ対策として有効なのか賛否両論のｈ２タグですが、有効な可能性があるなら使って損はないだろうということで取り入れました。
そもそもブログ始めた当初は、見出しのつけ方も分からなかったんですけどね。
見出しのつけ方はまた別の機会に。
今回は見出しについて、「ｈ２」タグを使って「大見出し」ならぬ「大大見出し」のつけ方です。
はてなブログの大見出しは「ｈ２」じゃない
そもそも見出しって何でしょう？簡単に書くとこんなんです。
っていうか、書いてないですね。
この中の一番大きなものが大見出しです。
この大見出しは、はてなブログでは何故か「ｈ３」タグが使われています。
これを「ｈ２」にしちゃいましょう。
「ｈ３」の大見出しから、「ｈ２」の大大見出しにするとこうなります。
うん、視覚的にも大きくなってますね。
そもそもなぜ、「ｈ２」にするのか。
ＳＥＯ対策に有効だと言われているからですね。
ＳＥＯ対策に、タイトルが重要だというのは皆さんご存知の通り。
このタイトルは「ｈ１」タグなわけです。
グーグル先生は記事の表紙である「ｈ１」を見ながら、記事を物色します。
その次に先生が目次の「ｈ２」を見ようとしても、はてなブログでは「ｈ２」がない状況になっています。
実際は「ｈ３」の目次で代用しているわけですが、「ｈ２」を探しているグーグル先生は戸惑うかもしれないというわけです。
先生が戸惑うことの無いよう「ｈ２」を使用しましょう。
先生が戸惑わなかったとしても、読者の皆さまの視覚的にも大きいと見やすいですよね。取り入れて損はないと思います。
はてなブログではｈ３を大見出しとしているので、八幡はｈ２を大大見出しを便宜的に呼ばせてもらってます。
ｈ2タグのつけ方
ｈ2タグのつけ方としては3パターンほどあります。
- 自分の手作業でｈ３→ｈ２へ打ち換える
- コードをフッターに貼り付け自動変換
- Chromeの拡張機能を使う
それぞれを説明します。
１、自分の手作業でｈ３→ｈ２へ打ち換える
「編集みたまま」で大見出しをつけます。
「HTML編集」と「プレビュー」で見てみると上記のようになっています。
「HTML編集」で「ｈ３」部分の2か所を「ｈ２」に打ち換えると
このように変わります。
手作業でタグが付け替えられますが・・・毎回は大変ですね。
あまりお勧めはできません。
２、コードをフッターに貼り付け自動変換
手作業を完全自動化できるコードがあります。
これは楽ですね。
一度コードを貼り付けるだけですから。
下記がそのコードになります。
使用する場合は自己責任でお願いします。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h3').replaceWith(function() {
$(this).replaceWith('<h2>'+$(this).text()+'</h2>')
});
$('h4').replaceWith(function() {
$(this).replaceWith('<h3>'+$(this).text()+'</h3>')
});
$('h5').replaceWith(function() {
$(this).replaceWith('<h4>'+$(this).text()+'</h4>')
});
});
</script>
なお、このコードは
http://dokuwohaku.hateblo.jp/entry/h-tag
こちらを参考にさせていただいています。
ありがとうございます。
上記コードを「ダッシュボード」→「デザイン」→「カスタマイズ（スパナマーク）」→「フッタ」にはりつけるだけでOKとのこと。
一番楽なのはコチラですね。
３、Chromeの拡張機能を使う
八幡がおススメするのはコチラの方法。
インターネット接続をChromeでする必要がありますが、「編集みたまま」の編集アイコンと同じ感覚で使用することが出来ます。
Chrome拡張機能を使うには、一度インストールする必要があります。
こちらからどうぞ。
Chrome Add-on for Hatena – Chrome ウェブストア
一度インストールすると、ブラウザの右上...検索窓の横に、このようなアイコンが出てきます。クリックするとこのような仕様になってます。
この中の「ｈ２」を、編集アイコンと同じように使用すると「大大見出し」を作成できます。
使用感が同じというところが、ユーザーに優しくて嬉しいです。
Chrome拡張機能は他の機能も使える！
「ｈ２」タグ機能のほか、拡張機能には他にも有用な機能があります。
八幡が使うのは「背景をグレーにする」と「中央揃え」
背景グレー化は手軽に目立たせたいときに有用です。
八幡は箇条書きと併用することが多いですね。
-
シロ
-
柿助
-
ルリオ
-
芥子
-
火車
こんな感じで。
中央揃えは画像の差込に威力を発揮
八幡は画像をある程度、縮小して貼り付けます。
PC画面では丁度いい大きさの画像も、スマホ画面では大きすぎることが多いですからね。しかし、画像を縮小すると、今度は左側によったPC画面が気になります。
ノーマル（左揃え）
中央揃え
そんな時、画像を「中央揃え」するとスッキリします。
まあ、八幡の気分の問題ですけどね。
「ｈ２」の大大見出しが、SEO対策に有効かどうかはハッキリしませんが、Chrome拡張機能は記事の作成的には有用です。
取り入れて損はないと思いますので、ぜひ活用してみてください。
八幡でした。
