女子におすすめ! CSSコピペで出来る可愛い見出しデザイン10個

2017-03-24WordPress

こんにちは、とみーです。

ブログをお持ちの方必見!
スタイルシートをコピペするだけでOKな見出しを作成しました。

HTMLは全て

です。

 

色は全てスタイルシートでの指定ですので自由に変更可能です。
color: で文字の色、background-color: で背景色を指定しています。
色の検索はこちらがおすすめ。

スポンサーリンク

見出しデザイン

ポラロイド風

See the Pen QGBQwV by tommy (@tommy0719) on CodePen.

魔法陣

See the Pen gLjvpX by tommy (@tommy0719) on CodePen.

付箋(ポストイット)風

See the Pen XNBZXr by tommy (@tommy0719) on CodePen.

大きな円

See the Pen woxyMj by tommy (@tommy0719) on CodePen.

大きな円2つ

See the Pen KNBQVb by tommy (@tommy0719) on CodePen.

ボーダー+左線

See the Pen jBrWZN by tommy (@tommy0719) on CodePen.

セロテープ

See the Pen gLjvro by tommy (@tommy0719) on CodePen.

See the Pen ObwQNv by tommy (@tommy0719) on CodePen.

グラデーション

See the Pen yVqvOr by tommy (@tommy0719) on CodePen.

Flower Pop

Simplicity2テーマスキン「Flower Pop」で使っている見出しです。背景の●はスキンではアイコンフォントですが、こちらではborder-radiusで丸めています。そのせいか、残念なことにIEやEdgeで見るとズレが発生します。。。詳しい方助けてください(´;ω;`)

See the Pen mOjXEB by tommy (@tommy0719) on CodePen.

あとがき

見出しだけではなくカエレバ・ヨメレバのカスタマイズ記事や囲み枠のサンプルデザインもありますので合わせてお読みください!

CSSコピペでカエレバ・ヨメレバをカスタマイズ【CSSデザインサンプル】

こんにちは、とみーです。 ブロガーにとって外せないツールとなっているカエレバ、ヨメレバ。 私も愛用しています。…

CSSコピペで装飾する囲み枠(ボックスデザイン)【div, p】

こんにちは、とみーです。 ブログを運営されている方は記事を書く中で「ここに注目してほしい!」と思うことが多くあ…