【CSSカスタマイズ】かわいくて個性的な見出し

シンプルな見出しデザインのカスタマイズCSSを紹介しているブログはたくさんありますが、人とは違うデザインを使いたい！という人の向けの、かわいくて個性的な見出しのCSSの紹介です。

全体的にかわいい、女性向けデザインです。

ブログなどにコピペして、利用していただいてOKです。

少しずつ種類を増やしていきたいと思っています。

記述するHTML
メモ帳風見出し
小さなハート2つの見出し
大きなハートの見出し

記述するHTML

<h2>かわいい見出し</h2>

掲載しているCSSは、上記のHTMLに対応しています。

デザインやセレクタを変えて、ご自分のブログに合うようにカスタマイズして下さい。

メモ帳風見出し

h2 {
   border: solid 2px #999; /*外枠の設定*/
   padding: 1em 0.5em 0.25em 0.5em;
   position: relative;
}

/*ドットの設定*/
h2::before {
   content: "";
   position: absolute;
   border-top: dotted 10px #ddd; /*ドットの設定*/
   width: 95%;
   height: 0.2em;
   top:0.25em;
   left:0.25em;
}

メモ帳風の見出しです。

見出し以外にも、ルーズリーフ風のボックス、リスト（箇条書き）のCSSカスタマイズも紹介してます。

合わせて読みたい

小さなハート2つの見出し

h2{
    position: relative;
    padding: 0em 0.5em 0em 1.5em;
    line-height: 1.4em;
    color: #642b14; /*文字色*/
    border-bottom: dashed 3px #ff4f80;/*下線の設定*/
}

h2::before {/*ピンクハートの設定*/
  font-family: FontAwesome; /*アイドルフォントの設定*/
  content: "\f004"; /*アイコンフォントの設定*/
  position: absolute;
  font-size: 0.75em; /*サイズ*/
  left: 0.2em; /*アイコンの位置*/
  top: -0.3em; /*アイコンの位置*/
  color: #ff4f80; /*アイコン色*/
}

h2::after {/*グレーハートの設定*/
  font-family: FontAwesome; /*アイコンフォントの設定*/
  content: "\f004"; /*アイコンフォントの設定*/
  position: absolute; 
  font-size: 0.5em; /*サイズ*/
  left: 1.4em; /*アイコンの位置*/
  top: 0.6em; /*アイコンの位置*/
  color: #d0c0c0; /*アイコン色*/
}

アイコンフォントと色の組み合わせ次第で、いろんなパターンが作れます。

ハートマークにはアイコンフォント「FontAwesome」のバージョン4を使用しています。バージョン5を利用している場合は、/*アイコンフォントの設定*/の二行をバージョン5に対応したものへ変更してください。

大きなハートの見出し

h2{
  	color: #5d1d2d; /*文字の色*/
  	position: relative;
  	padding: 0.2em 0.5em 0em 0.5em;
  	line-height: 2em;
}

/*　ハートの設定　*/
h2::before{
  	font-family: FontAwesome;/*アイコンフォントの設定*/
  	content: "\f004";/*アイコンフォントの設定*/
  	position: absolute;
  	color: #fab2ba; /*色*/
  	font-size: 2em; /*サイズ*/
  	left: 0.1em; /*位置*/
  	top: 0.1em; /*位置*/
  	transform: rotate(-25deg); /*傾き*/
  	line-height: 1em;
  	z-index: -1;
}

小さなハートと同じくアイコンを変えたり文字を変えればいろんなパターンが作れます。アイコンは薄めの色を使わないと文字が読めなくなるので注意。