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

WordPress

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

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

HTMLは全て

です。

見出しデザインの一覧画像です。

title-design-sample

色は全てスタイルシートでの指定ですので自由に変更可能です。
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.

キラキラ

特殊記号を使っているため、環境によっては下に表示されているように絵文字になってしまう場合があります。
問題があれば、h2:beforeの content: ‘\02728’; を content: ‘★’; に変更してください。

See the Pen xRJYVZ 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.

あとがき

キラキラした星は特殊記号です。表示されないOSやブラウザがありますのでその点ご注意ください。

記号を変えたいときはcontent: の中を変えます。
特殊記号を探す場合はこちらのまとめがおすすめです。

PCで使える特殊記号・特殊文字リスト – NAVER まとめ

PCでの文書作成やTwitterなど特殊記号や特殊文字を一覧にしてみました。顔文字や絵文字、ドクロ記号、矢印、花、足跡、怒りマークなど普段使えるものもリスト化し…

でも、面倒なことにそのままコピペでは使えず、記号を16進数に変換してcontent: に記述する必要があります。
下記のサイトでは簡単に16進数に変換できます。

[css] contentプロパティで挿入できるコンテンツ

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、今一度contentプロパティで挿入出来る内容についてまとめておこうと思…

 

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

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

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

 

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

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