はてなブログの見出しを好みにカスタマイズ（コピペで簡単HTML・CSS)

こんにちは

今回は、「はてなブログ」の見出しを自分好みにカスタマイズする方法を
紹介します。

そもそも「見出し」は、ブログを訪問してくれた方に読みやすいよう
記事の案内をするものですが、Googleの検索エンジンにも見つけてもらい
やすいように設定するものです。

Googleの検索エンジンに「見出し」として認識されるのは、h2~h3だそうです
ので、「見出し」にはh2~h3を指定して使いましょう。かく言う私も、始めは
分からずデザインが気に入って「見出し」にh4を使ってました。

ですから、できるだけ見やすいようにデザインし、見出し文も
キーワードを意識しながら決定する方がいいでしょう。

基本コピペで簡単にできますし、wordpressにも応用可能です。

ただ、はてなブログには特有の注意点がいくつかありますので、その辺りも
詳しく解説していきます。

見出しh3~h5のデザインを変更

「はてなブログ」の記事本文では「見出し」としてh3~h5まで使用できます。
h2は使えません。

はてなのエディタで記事編集画面（見たままモード）の左上「見出し」ボタン
を押すと、

このように「見出し」の選択ができます。

・大見出し⇒h3
・中見出し⇒h4
・小見出し⇒h5

にそれぞれ対応してます。

「はてなブログ」標準で、範囲を選択してそれぞれ指定してみると↓

このように、何とも味気ない太字だけの「見出し」になります。
これをもう少し見栄えよくしようと言う訳です。

CSSでコピペ

「見出し」のデザイン変更もやはりCSSをコピペします。
「ブログ　見出し　デザイン」で検索すれば沢山の見出しデザインサンプルが
出てきます。お好きなデザインを見つけCSSをコピペして利用してください。

「はてなブログ」用「見出し」デザイン↓

こちらで探せば、きっとお好みのデザインが見つかると思います。

はてなブログでデザインを変更するときの注意点

デザインの変更はCSSのコードを「デザイン」→「カスタマイズ」→「デザイ
ンCSS」に張り付ければいいのですが、ここで注意点がいくつかあります。

私もうまくいくまで何回もネットで調べまくり、設定してはやり直しを繰り返し
ました。

CSSをコピペする前にクラスの確認

「見出し」デザインには下記↓のようなCSSをコピペするんですが、

.entry-content h3 {
    font-size: 140%;
    position: relative;
    padding: 0.2em 0.5em;
    background-color: #d2e7e4;
    box-shadow: 0px 0px 0px 5px #d2e7e4;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff;
}

この先頭の「.entry-content」の部分をクラス名と言います。「はてなブログ」
は「見出し」のクラス名が「.entry-content」なので上記のデザインCSSは
そのままコピペで使えます。

上記のCSSを適用すると、はてなの見出しh3は↓

このようになります。

しかし、見出しデザインサンプルの中には、このクラス名が無かったり別の
クラス名を使用している場合があります。
例

.h3
.article h3
.post h3

のようになっていると、そのままコピペしてもうまくいきません。使いたい
見出しデザインがあればCSSコードのクラス名を確認して、「.entry-content」
と付け足すか、修正してください。

既存の設定をリセット

見出しデザインのCSSコードのコピペだけでは、既存の設定が残っていて
デザインが被ったりしてうまく変更できない場合があります。

そんな時は、テーマに既に指定されているコードを一旦リセットしてあげると
うまくいくことがあります。

リセットするCSSコードは、

.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
   content: none;
   background: none;
   background-color: none;
   border: none;
   border-radius: 0;
}

順番としては、このリセット用CSSをあらかじめコピペしておいてその下に、
後から見出しデザインのCSSを追加する方が確実だと思います。

補足ですが、リセット用CSSでもう一つ、

.entry-content h3{
padding: 0;
background: none;
}

というのを付けたらいいという情報もありましたが、私の場合うまく行きません
でした。何が原因かはおじさんには分かりませんが。

また「はてなブログ」では、見出しh4を変更するときリセット無しでもうまく
行きました。はてなの見出しが簡素すぎるからでしょうか？

たまたまかもしれませんが、念のためリセットしておく方が
無難かな？と思いますよ。

CSSをいじり始めると、覚えることもたくさん増えてきます。有料テンプレート
などでデザインはサクッと済ませれば楽なのですが、これもいつかは役立つ日
が来る、自信のスキルアップのためと考えてトライしていきましょう。

まとめ

やり始めたらキリがないブログのデザイン編集。ほどほどで妥協しないと終わり
が見えません。

凝りすぎて自己満足だけで終わってしまわないように、大切なのは、あくまで
ブログを訪れてくれる人に気持ちよく閲覧してもらえることです。

そのことを念頭に置きながら。デザインしてください。そうすれば
必然的にSEOにも適したブログになるのではないかと思います。

それでは。