はてなブログの見出しを好みにカスタマイズ(コピペで簡単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をコピペする前にクラスの確認

「見出し」デザインには下記↓のような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を変更するときリセット無しでもうまく
行きました。はてなの見出しが簡素すぎるからでしょうか?

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

昭平令
昭平令

私も時間を忘れて「CodePen」で遊んでしまいました。

師匠
師匠

バカチンが。

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

まとめ

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

冷静な嫁
冷静な嫁

あんたもデザインに時間とられすぎだ。

師匠
師匠

仕方がない、始めは分からないことだらけだ。許してやれ。

昭平令
昭平令

し、師匠。ありがとう。

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

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

それでは。

コメント

タイトルとURLをコピーしました