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

2016-04-02WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

HTMLは全て

です。

※アイキャッチ画像では10個になってますが、徐々に増えて現在12個あります。

スポンサーリンク

使い方

使い方ですが、下記にあるそれぞれのHTMLとスタイルシートを、指定の場所にコピペします。

WordPressなら
HTML:記事投稿のテキストタブ
CSS:ダッシュボードの外観 → テーマの編集 → style.css
です。

CSSをテーマに合わせる

WordPressをお使いの場合、CSSをコピペしただけでは反映されない場合があります。

Simplicity:.article h2{ }
Luxeritas:.post h2{ }

というように、記事を囲っている要素のクラスに合わせてクラス名を追記してください。

色の変更

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

見出しデザイン

ボーダー+左線

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

左2本線

See the Pen gWGEMd 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 zwapbr by tommy (@tommy0719) on CodePen.

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

花(背景色あり)

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

下枠ストライプ

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

グラデーション

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

セロテープ

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

ポラロイド風

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

あとがき

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

こちらの記事もおすすめです