自分のブログの見出しデザインを解説【CSS付き】

ブログの見出しはサイトの雰囲気を表現したり記事を読みやすくするために重要な要素です。

当サイトは最初見出しギャラリーサイトからコピペして使用していたのですが、現在はキチンと記事が読みやすくなるように考えてデザイン、コーディングしています。

ということで、今回は当サイト見出しのデザインやコードについて解説します。

CSSの解説もしているので、軽く勉強したいという方もぜひ参考にしてください。

見出し１

※見出し1は記事タイトルなので上記参照

記事のタイトルに使用される見出し1は基本的にアイキャッチ画像とセットで見られるものなのでシンプルに吹き出し風の下線でデザインしました。

コードはタイトル自体には下線のみ設定し前後(before・after)に絶対要素(position:absolute)の三角形を重ねて線のように表現しています。

.entry-title{
 position: relative;
 font-size: 1.5rem;
 padding: 0 0 5px 5px;
 border-bottom: solid 3px #738851;
}

.entry-title:before {
 position: absolute;
 bottom: -14px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #738851 transparent transparent transparent;
}

.entry-title:after {
 position: absolute;
 bottom: -10px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #fff transparent transparent transparent;
}

見出し２

記事本文のメインとなる見出し2は話の区切りとして機能するようにベタ塗りで、見出し1と合わせて吹き出し風の白抜き文字デザインにしています。

コードは見出し1を単純にした形で見出し自体には背景色・文字色を設定し後(after)に絶対要素の三角形をつけるだけです。

.entry-content h2{
  background-color: #738851;
  position: relative;
  border-radius: 10px;
  color: #fff;
	font-size: 1.375rem;
	padding: 15px 25px;
	margin: 4em 0 2em;
}

.entry-content h2:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 12px solid #738851;
  width: 0;
  height: 0;
}

見出し３

見出し3は見出し2内に複数トピックがある場合に使用するサブ的な見出しのため付箋風のデザインで目立ちすぎず、目立たなすぎずのちょうど良いくらいを目指しました。

コードは背景色と左の枠線のシンプルなものです。

左線色を基準に背景色は同系色のグレーにしているので、緑以外を使用する時は同じように考えるといい感じになると思います。

.entry-content h3{
  background-color: #f1f5ef;
  color: #222;
	margin: 3em 0 2em;
	border: 0px solid #738851;
	border-left: 10px solid #738851
}

見出し４

正直見出し4以降は基本的に使う場面が極端に少なくなるので見出し1〜3ほど真剣に考えなくても良いと思います。

使い方としてはさらに細かく見出しを設定するか、何か特殊な場面での使用を考えるかのどちらでしょうか。

見出し4はここまで来ると本文寄りの優先度なので下線のみ設定しています。

ただ下線をつけるのも味気ないので後(after)に太い下線をつけて下線の太さを途中で変えたデザインにしています。

.entry-content h4{
  padding: 12px;
  border-top: none;
	position:relative;
	margin: 0;
	border-bottom: 3px solid #dddddd
}

.entry-content h4:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 3px #738851;
 bottom: -3px;
 left: 0px;
 width: 30%;
}

見出し５

見出しとしては僕的には見出し4までで十分なので見出し5は特殊な場面で使用する想定でデザインしています。

僕は記事の最後には「まとめ」をつけるので「まとめ」用の見出しがあると分かりやすいかな？ということで丸で他とは変化をつけたデザインにしました。

コードは文字は中央揃えで前(before)に絶対要素の丸を配置しています。

「まとめ」の場合は丸に収まるので問題ないですが、文字数が多くなると丸からはみ出てしまうので文字に丸と同じ色の影をつけることで対応しています。

.entry-content h5{
	text-align: center;
 position: relative;
 color: #fff;
 display: block;
 margin: 80px 0;
	padding: 0px;
	border: none;
	text-shadow: 0 0 5px #738851;
}

.entry-content h5:before {
 content: "";
 position: absolute;
 background: #738851;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

見出し６

見出し6は固定ページの見出しで使う用にスタイリッシュなデザインを目指しました。

中央揃えに下線とシンプルなデザインですが、コードは少し複雑です。

まず見出しには中央揃えのみ設定し後(after)に下線を配置。

このままだと全体に下線がついてしまうので絶対要素にして半分移動(left50%)、ズレを調整(transform50%)して完成です。

.entry-content h6{
	border: none;
	position: relative;
	text-align: center;
	display: block;
  margin-bottom: 1em;
}

.entry-content h6:after{
	content: "";
  position: absolute;
  bottom: -2px;
  display: inline-block;
  width: 60px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 3px;
}

まとめ

当サイトの見出しデザインを解説しました。

CSSをそのままコピーして使っても良いですが、ぜひ今回の解説をヒントに自身のサイトに最適な形でカスタマイズしてみてください。

少しでも参考になれば幸いです。