はてなブログにおける見出しのカスタマイズ

本日は､はてなブログにおける見出しのカスタマイズについてです｡

見出しとは以下です↓

これが見出しのデザインです

文中の見出しを付けるときに表示されます｡

具体的に､はてなブログではどこを指すのか｡

それを書いてみますね｡

CSSでカスタマイズ

そもそも､はてなブログでデザインのカスタマイズをしようと思ったら､CSSの知識が必要です｡

当ブログで使っている見出しのCSSは以下になります｡

文字についてはデフォルトのCSSが適用されています｡

文字については､特に何もしておりません｡

entry-content h2 {
  position: relative;
  border-bottom: 7px solid #e57373;
}

.entry-content h2::after {
  position: absolute;
  content: "";
  border-bottom: 7px solid #ffc0cb;
  width: 90%;
  right: 0;
  bottom: -7px;
}

はてなブログで見出しのデザインをする際､｢.entry-content h2｣に対してCSSを書くことになっているようです｡

上のCSSの詳しい説明は省きますが､一点だけ｡一番下の｢bottom: -7px;｣は線幅によって変わるので､そこは注意しないといけないかなと思っています｡

配布されているCSSを使うと簡単？

はてなブログのデザインテーマを作る方法の1つ｡以下の記事でご紹介されています｡

help.hatenablog.com

ベースとなるCSSが配布されているようですが､ぼくは使いませんでした｡

よって､多大な労力を使いました｡

あとから考えると､ベースとなるCSSを使った方が楽だったかもって思いましたね｡

幸い､ぼくはCSSに詳しい方なので､割とサクサクと作業できましたが｡

しかし､バグが結構ありまして対応するのが大変です｡

なので､よほどの理由がない限り､ベースとなるCSSを使うのが良いと思っています｡

まとめ

はてなブログで真っ先に気になるのが見出しかと思います｡

目に付きますからね｡

カスタマイズも比較的簡単ですので､もし､見出しデザインをしたいと思っている方はチャレンジしてみてください｡

ありがとうございました｡