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

CSSカスタマイズ

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

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

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

さる子
さる子

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

記述するHTML

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

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

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

メモ帳風見出し

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カスタマイズも紹介してます。

ハート付きの見出し

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; /*FontAwesomeの設定*/
  content: "\f004"; /*FontAwesomeの設定*/
  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を利用している場合は、/*FontAwesomeの設定*/の二行をバージョン5に対応したものへ変更してください。

カスタマイズをしたブログを紹介させてください!

さる子
さる子

紹介しているカスタマイズを使ったら、ぜひ教えてください!

当ブログで紹介しているカスタマイズを行ったブログや記事を、当ブログで紹介させて下さい。カスタマイズ記事からリンクさせていただきます。

当ブログで紹介しているカスタマイズを参考にしたことが分かるようにしてください。カスタマイズを行ったページやブログ案内のページなどから、当ブログのカスタマイズ記事かブログトップページへリンクを貼って下さい。

コメント欄やツイッターのリプライ、問い合わせから、カスタマイズしたページのURLをお知らせ下さい。

年齢関係なく誰でもアクセスできるWEBページという性質上、年齢制限があるサイトへのリンクを控えさせていただきます。ご了承下さい。

その他、ブログの内容によってはリンクを控えさせていただく可能性があります。(レンタルサーバーなどの規約違反をしているブログなど。)

パスワードなどが必要な閲覧制限があるサイトもご遠慮ください。一部ページのみ閲覧制限ありで、カスタマイズした箇所が誰でも見れる場合はOKです。

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