無料版のはてなブログの見出しのデザインを変更しました！【コピペで簡単】
こんにちは。
おまつ(yururito_030)です！
ずっと気になってはいたけど後回しにしていた、見出しのデザインを変更をしてみました！
「見出し デザイン css」で検索し好みのデザインを見つけてコピペで簡単にデザインの変更ができました。
- 見出し大(h3)、中(h4)、小(h5)の変更
- はてなブログの見出しデザインの変更方法
- コピペ元CSS
- コピペしてきたCSSにはてな用のクラスを指定しよう
- 変更した見出しデザインが崩れてしまっている
- まとめ
見出し大(h3)、中(h4)、小(h5)の変更
はてなブログの見出しには、大見出し、中見出し、小見出しの３種類があります。
今回はこの３種類の見出しのデザインを変更しました。
見出しはそれぞれ下記のタグに対応されています。
大見出し → h3
中見出し → h4
小見出し → h5
変更前の見出しのデザインはこんな感じでした。
黒文字で文字の大きさだけ違っています。
ものすごくシンプル！
シンプルなのは好きだけど流石に読みにくさを感じました。
はてなブログの見出しデザインの変更方法
管理画面にログイン→ダッシュボード→右メニューのデザイン→カスタマイズ→デザインCSS
の一番下にコピペするとデザインが変更されます。
※変更する場合は一度デザインCSSに記入されているタグをメモ帳などに保存してバックアップをとっておくと、間違って消しちゃったりした場合でもすぐに戻せるのでおススメです。
コピペ元CSS
コピペするCSSですが検索してコピペOKな所から好きなデザインを探すのが一番だと思います！
ちなみに私のおススメのサイトはこちら↓↓↓
jajaaan.co.jp
種類が豊富なので好みのデザインがきっと見つかるはずです！
また、カラーコードはこちら↓のサイトを使用しました。
カラーピッカー - 原色大辞典
変更した見出しデザインが崩れてしまっている
使用しているテーマによっては、既存のデザインと混ざってうまくデザインの変更ができない場合があるようです。
そんな時はデザイン変更用のCSSの前に、リセットCSSを記載してみましょう！
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3の個所は大、中、小で変更してください。
まとめ
前よりは見やすくなったかなと自分で思いますし、好みのデザインに変更できて良かったです！
