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

WEB

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

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

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

さる子
さる子

今後、種類を増やしていきたいと思っています。

記述するHTML

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

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

クラス名を足したり<h3>に変えたり、ご自分のブログに合うようにして下さい。

メモ帳風見出し

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;
}

メモ帳風の見出しです。

border: solid 2px #999; /*外枠の設定*/」の部分が外枠の設定です。solidが線の種類、2pxが線の太さ、#999が色の設定です。

border-top: dotted 10px #ddd; /*ドットの設定*/」の部分がドットの設定です。10pxがドットの大きさ、 #dddが色の設定です。dottedでドット(丸)を表現しています。

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

ハート付きの見出し

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; /*アイコン色*/
}

border-bottom: dashed 3px #ff4f80;/*下線の設定*/」の部分が外枠の設定です。dashedが線の種類、3pxが線の太さ、#ff4f80が色の設定です。

ハートマークにはアイコンフォント「FontAwesome」(バージョン4)を使用しています。\f004でハートマークを指定しています。

font-size: 0.5em;/*サイズ*/」がハートの大きさ、「color: #d0c0c0; /*アイコン色*/」がハートの色の設定です。

left: 1.4em; /*アイコンの位置*/」「top: 0.6em; /*アイコンの位置*/」がアイコンの位置の設定です。

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

アイコンフォント「FontAwesome4」について

この記事では、アイコンフォント「FontAwesome」を使用しています。

このページ内のCSSで利用しているバージョンが4(旧バージョン)になりますので、5を利用している場合は、

font-family: FontAwesome;

content: "\f004";

上記の記述を、対応するバージョン5のものへ、修正してください。

FontAwesomeの使い方については、サルワカさんの記事が参考になります。

FontAwesome4を利用する場合は、ものぐさWEBノートさんのツールを利用するとアイコンが探しやすいです。利用するバージョンが4の場合は、こちらの記事で基本的な使い方も記載されています。

CSSが効かないときは?

サルワカさんのこちらの記事で、CSSが効かない・反映されない場合の対処法(検証方法)が分かりやすいです。

タイトルとURLをコピーしました