こんにちは
今回は、「はてなブログ」の見出しを自分好みにカスタマイズする方法を
紹介します。
そもそも「見出し」は、ブログを訪問してくれた方に読みやすいよう
記事の案内をするものですが、Googleの検索エンジンにも見つけてもらい
やすいように設定するものです。
![](https://ksanhonsan.com/wp-content/uploads/2021/06/headingdesign-500x334.jpg)
Googleの検索エンジンに「見出し」として認識されるのは、h2~h3だそうです
ので、「見出し」にはh2~h3を指定して使いましょう。かく言う私も、始めは
分からずデザインが気に入って「見出し」にh4を使ってました。
ですから、できるだけ見やすいようにデザインし、見出し文も
キーワードを意識しながら決定する方がいいでしょう。
![はるこ](https://ksanhonsan.com/wp-content/uploads/2021/01/badd48079513eed0edb4491c9cd12266.png)
始めの内は、見た目ばかりを気にしすぎて、返って
閲覧者に見にくいデザインになってしまうことも。
![け~さん](https://ksanhonsan.com/wp-content/uploads/2019/05/1304181-e1558474689841.png)
他の有名ブロガーさんのサイトデザインを参考に
するのもいいと思う。
基本コピペで簡単にできますし、wordpressにも応用可能です。
ただ、はてなブログには特有の注意点がいくつかありますので、その辺りも
詳しく解説していきます。
見出しh3~h5のデザインを変更
「はてなブログ」の記事本文では「見出し」としてh3~h5まで使用できます。
h2は使えません。
はてなのエディタで記事編集画面(見たままモード)の左上「見出し」ボタン
を押すと、
![](https://ksanhonsan.com/wp-content/uploads/2019/12/688ac44495e7f20e90ec71fa4df78df5-500x251.png)
このように「見出し」の選択ができます。
・大見出し⇒h3
・中見出し⇒h4
・小見出し⇒h5
にそれぞれ対応してます。
「はてなブログ」標準で、範囲を選択してそれぞれ指定してみると↓
![](https://ksanhonsan.com/wp-content/uploads/2019/12/a05faa48a1d0d9d53e8382007169e2be-500x283.png)
このように、何とも味気ない太字だけの「見出し」になります。
これをもう少し見栄えよくしようと言う訳です。
CSSでコピペ
「見出し」のデザイン変更もやはりCSSをコピペします。
「ブログ 見出し デザイン」で検索すれば沢山の見出しデザインサンプルが
出てきます。お好きなデザインを見つけCSSをコピペして利用してください。
「はてなブログ」用「見出し」デザイン↓
![](https://miyazakilife.com/wp-content/uploads/2017/03/webdesign.jpg)
こちらで探せば、きっとお好みのデザインが見つかると思います。
はてなブログでデザインを変更するときの注意点
デザインの変更は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は↓
![](https://ksanhonsan.com/wp-content/uploads/2021/06/midasih3-500x235.png)
このようになります。
しかし、見出しデザインサンプルの中には、このクラス名が無かったり別の
クラス名を使用している場合があります。
例
.h3 .article h3 .post h3
のようになっていると、そのままコピペしてもうまくいきません。使いたい
見出しデザインがあればCSSコードのクラス名を確認して、「.entry-content」
と付け足すか、修正してください。
既存の設定をリセット
見出しデザインのCSSコードのコピペだけでは、既存の設定が残っていて
デザインが被ったりしてうまく変更できない場合があります。
![昭平令](https://ksanhonsan.com/wp-content/uploads/2019/05/1304181-e1558474689841.png)
この原因が理解できなくて何度もやり直ししました。
![師匠](https://ksanhonsan.com/wp-content/uploads/2019/06/f9c2bec96fa703c9aa1734757a48fcd1-1.png)
バカチンがぁ。
そんな時は、テーマに既に指定されているコードを一旦リセットしてあげると
うまくいくことがあります。
リセットする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を変更するときリセット無しでもうまく
行きました。はてなの見出しが簡素すぎるからでしょうか?
たまたまかもしれませんが、念のためリセットしておく方が
無難かな?と思いますよ。
![昭平令](https://ksanhonsan.com/wp-content/uploads/2019/05/1304181-e1558474689841.png)
私も時間を忘れて「CodePen」で遊んでしまいました。
![師匠](https://ksanhonsan.com/wp-content/uploads/2019/06/f9c2bec96fa703c9aa1734757a48fcd1-1.png)
バカチンが。
CSSをいじり始めると、覚えることもたくさん増えてきます。有料テンプレート
などでデザインはサクッと済ませれば楽なのですが、これもいつかは役立つ日
が来る、自信のスキルアップのためと考えてトライしていきましょう。
まとめ
![](https://ksanhonsan.com/wp-content/uploads/2021/06/pexels-tranmautritam-370470-500x333.jpg)
やり始めたらキリがないブログのデザイン編集。ほどほどで妥協しないと終わり
が見えません。
![冷静な嫁](https://ksanhonsan.com/wp-content/uploads/2019/06/fbc761d670babf2cb2d0bd2726611974.png)
あんたもデザインに時間とられすぎだ。
![師匠](https://ksanhonsan.com/wp-content/uploads/2019/06/f9c2bec96fa703c9aa1734757a48fcd1-1.png)
仕方がない、始めは分からないことだらけだ。許してやれ。
![昭平令](https://ksanhonsan.com/wp-content/uploads/2019/05/1304181-e1558474689841.png)
し、師匠。ありがとう。
凝りすぎて自己満足だけで終わってしまわないように、大切なのは、あくまで
ブログを訪れてくれる人に気持ちよく閲覧してもらえることです。
そのことを念頭に置きながら。デザインしてください。そうすれば
必然的にSEOにも適したブログになるのではないかと思います。
それでは。
コメント