CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】

2016-04-02Web制作

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

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

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

 

スタイルシートは、子テーマにコピペすることをおすすめします。
子テーマって何? どうやって作るの? という方は「【画像付き解説】子テーマを作成してWordPressのカスタマイズを楽にしよう! 」へどうぞ。

スポンサーリンク

見出しデザインの使い方・コピペする場所

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

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

HTMLは全て

<h2>見出し</h2>

であることを仮定したコードになってます。

見出し3(h3)に適用させたい場合は、
HTML:<h3>見出し</h3>
CSS:h3{(中略)}
と、なります。

【重要】CSSをテーマに合わせる

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

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

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

h2の前にクラス名を付けないと、サイドバーなど色々な箇所全てにスタイルが反映されてしまいます。

 

Luxeritas .post
SANGO .entry-content
Simplicity .article
STORK .entry-content
XeoryBase .post-content

 

色の変更

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

見出しデザインとソースコード

ボーダー+左線

h2{
    border-left: 10px solid #f0bdc4;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 5px 10px;
    position: relative;
    text-shadow: -1px -1px 1px #e18692, 1px -1px 1px #e18692, -1px 1px 1px #e18692, 1px 1px 1px #e18692;
}
h2:before{
    background: repeating-linear-gradient(45deg, #f5d5da, #f5d5da 4px, #fcf0f1 0, #fcf0f1 7px);
    border-radius: 0 5px 5px 0;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

ボーダー+白いグラデーション

h2{
    color: #ffffff;
    padding: 5px 10px;
    position: relative;
    text-shadow: -1px -1px 1px #e18692, 1px -1px 1px #e18692, -1px 1px 1px #e18692, 1px 1px 1px #e18692;
    z-index: 0;
}
h2:before{
    background: repeating-linear-gradient(45deg, #f5d5da, #f5d5da 4px, #fcf0f1 0, #fcf0f1 7px);
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
}
h2:after{
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.1));
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;	
}

左2本線

h2{
    color: #dd6a7a;
    padding: 5px 5px 5px 30px;
    position: relative;
}
h2:before{
    background-color: #ef858c;
    border-radius: 5px;
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 5px;
    height: 100%;
}
h2:after{
    background-color: #f3cbd0;
    border-radius: 5px;
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    width: 5px;
    height: 100%;
}

付箋(ポストイット)風

h2{
    background-color: #fff;
    border: 1px solid #ef858c;
    border-right: 20px solid #ef858c;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    color: #ef858c;
    padding: 10px 20px;
    position:relative;
}
h2:after{
    background-color: rgba(255, 255, 255, .7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, .1);
    content: '';
    position: absolute;
    transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    bottom: 15px;
    right: -3px;
    width: 85%;
    height: 10px;
    z-index: -1;
}

大きな円

h2{
    background-color: #ef858c;
    color: #fff;
    overflow: hidden;
    padding: 10px;
    position: relative;
}
h2:before{
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0px;
    display: block;
    width: 200px;
    height: 100px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    opacity: 0.6;
}

大きな円2つ

h2{
    background-color: #ef858c;
    color: #fff;
    padding: 10px;
    position: relative;
    overflow: hidden;
}
h2:before{
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    content: '';
    display: block;
    opacity: 0.6;
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 200px;
    height: 100px;
}
h2:after{
    background-color: #fff;
    border-radius: 50px 50px 0 0;
    content: '';
    opacity: 0.6;
    position: absolute;
    bottom: -1px;
    left: 180px;
    display: block;
    width: 100px;
    height: 50px;
}

色切替

h2{
	background-color: #ef858c;
	color: #fff;
	overflow: hidden;
	padding: 10px;
	position: relative;
}
h2:before{
	background-color: #fff;
	content: '';
	display: block;
	opacity: 0.6;
	transform: rotate(-30deg);
	position: absolute;
	bottom: -30px;
	right: -100px;
	width: 200px;
	height: 200px;
}

先頭に白抜き円グラデ

h2{
	border-bottom: 1px solid #f0bdc4;
	color: #ff99ac;
	padding: 10px 10px 10px 50px;
	position: relative;
}
h2:before{
	background-color: #FF9A8B;
	background-image: linear-gradient(180deg, #ff9a8b 0%, #ff6a88 55%, #ff99ac 100%);
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 5px;
	width: 30px;
	height: 30px;
}
h2:after{
	background-color: #fff;
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 15px;
	left: 10px;
	width: 20px;
	height: 20px;
}

h2{
    color: #d04255;
    padding: 10px 10px 10px 60px;
    position: relative;
}
h2:before{
    content: '**';
    color: #fff;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    margin-right: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF;
}
h2:after{
    border-bottom: 2px dotted #EAA8BF;
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

花(背景色あり)

h2{
    background-color: #f5d5da;
    border-radius: 5px;
    color: #ef858c;
    padding: 10px 10px 10px 60px;
    position: relative;
    text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff;
}
h2:before{
    content: '**';
    color: #fff;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    margin-right: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff;
}
h2:after{
    border-bottom: 2px dotted #fff;
    content: '';
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

グラデーション

h2{
    background: -webkit-linear-gradient(left, #ef858c, #f3cbd0);
    background: -moz-linear-gradient(left, #ef858c, #f3cbd0);
    background: linear-gradient(left, #ef858c, #f3cbd0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2:before, h2:after{
    background: -webkit-gradient(linear, left top, right bottom, from(#ef858c), to(#f3cbd0));
    background: -moz-linear-gradient(left, #ef858c, #f3cbd0);
    background: linear-gradient(left, #ef858c, #f3cbd0);
    content: '';
    margin: 10px 0px;
    display: block;
    height: 1px;
    width: 100%;
}

上枠ストライプ

h2{
    background-color: #fcf0f1;
    border: 1px solid #fcf0f1;
    border-top: 0;
    color: #701722;
    padding: 10px;
    position: relative;
}
h2:after{
    background: repeating-linear-gradient(-45deg, #f0b8bf, #f0b8bf 5px, #fcf0f1 0, #fcf0f1 10px);
    content: '';
    height: 5px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
}

下枠ストライプ

h2{
    background-color: #fcf0f1;
    border: 1px solid #fcf0f1;
    border-bottom: 0;
    color: #701722;
    padding: 10px;
    position: relative;
}
h2:after{
    background: repeating-linear-gradient(-45deg, #f0b8bf, #f0b8bf 5px, #fcf0f1 0, #fcf0f1 10px);
    content: '';
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

水玉模様

h2{
    background-color: #f3a3a8;
    background-image: radial-gradient(#f5b2b6 20%, transparent 0), radial-gradient(#f5b2b6 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    color: #590c11;
    padding: 10px;
}

セロテープ

h2{
    padding: 10px;
    background-color: rgba(255,255,255,0.4);
    border-left: 2px dotted rgba(0,0,0,0.1);
    border-right: 2px dotted rgba(0,0,0,0.1);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

コピペ後に元々の見出しのデザインが残っている場合

コピペしたけど、元々テーマで設定されているデザインが残ってしまうことがあります。

そんな場合の対処法を書きました。

関連記事Simplicityで見出し2のスタイルに線が入る原因とその解決方法

タイトルはSimplicityですが、他のテーマでも同様に解決できますよ。

あとがき

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

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