CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】
ブログをお持ちの方必見!
スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。
※アイキャッチ画像では10個になってますが、徐々に増えて現在19個あります。
子テーマって何? どうやって作るの? という方は「【画像付き解説】子テーマを作成してWordPressのカスタマイズを楽にしよう! 」へどうぞ。
- 1. 見出しデザインの使い方・コピペする場所
- 2. 見出しデザインとCSSソースコード
- 2.1. 太さが異なる二重線の見出し
- 2.2. 左2本線の見出し
- 2.3. ボーダー+白いグラデーションの見出し
- 2.4. ボーダー+左線の見出し
- 2.5. 付箋(ポストイット)風な見出し
- 2.6. 背景に大きな円がある見出し
- 2.7. 背景に大きな円が2つある見出し
- 2.8. 色が途中で切り替わる見出し
- 2.9. 色が途中で切り替わる見出し(2色)
- 2.10. 先頭に白抜き円グラデがある見出し
- 2.11. ドットの見出し
- 2.12. 花の見出し
- 2.13. 花の見出し(背景色あり)
- 2.14. 和風な見出し
- 2.15. 線も文字もグラデーションな見出し
- 2.16. 上枠ストライプの見出し
- 2.17. 下枠ストライプの見出し
- 2.18. 水玉模様の見出し
- 2.19. セロテープ風の見出し
- 3. コピペ後に元々の見出しのデザインが残っている場合
- 4. CSSのみで作る見出しデザイン あとがき
見出しデザインの使い方・コピペする場所
使い方ですが、下記にあるそれぞれのHTMLとスタイルシート(CSS)を、指定の場所にコピペします。
WordPressなら
- HTML:記事投稿のテキストタブ
- CSS:ダッシュボードの外観 → テーマの編集 → style.css
です。
HTMLは全て
<h2>見出し</h2>
であることを仮定したコードになってます。
HTML:<h3>見出し</h3>
CSS:h3 {(中略)}
と、なります。
【重要】CSSをテーマに合わせる
WordPressをお使いの場合、CSSをコピペしただけでは反映されない場合があります。
- Simplicity:.article h2{ }
- Luxeritas:.post h2{ }
というように、記事を囲っている要素のクラスに合わせてクラス名を追記してください。
Cocoon | .article |
Luxeritas | .post |
SANGO | .entry-content |
Simplicity | .article |
STORK | .entry-content |
SWELL | .post_content |
XeoryBase | .post-content |
色の変更
色は全てスタイルシートにて指定していますので自由に変更可能です。
色の検索はこちらがおすすめ。
見出しデザインとCSSソースコード
太さが異なる二重線の見出し
borderの指定時にdoubleと記載することで二重線にできますが、幅が同じものになってしまいます。ひと手間加えて太さが違う二重線に。
h2 {
border: 1px solid #f0bdc4; /* 内側の線の太さ・種類・色 */
color: #e7939f; /* 文字色 */
margin: 20px 10px; /* 外側の余白 上下・左右 */
padding: 10px; /* 内側の余白 */
position: relative;
z-index: 0;
}
h2:before {
border: 2px solid #f0bdc4; /* 外側の線の太さ・種類・色 */
content: '';
display: block;
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
z-index: -1;
}
左2本線の見出し
シンプルですが、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 {
color: #fff; /* 文字色 */
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;
}
ボーダー+左線の見出し
ボーダーだけだと味気ないのでアクセントに左だけ枠線を。
h2 {
border-left: 10px solid #f0bdc4; /* 左線 */
border-radius: 5px;
color: #fff; /* 文字色 */
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;
}
付箋(ポストイット)風な見出し
何回も使うには向かないデザインなので、記事内の見出し2よりは人気記事や関連記事のみ…等、限定的なタイトル向きです。
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 {
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;
}
背景に大きな円がある見出し
大きな円が1つある見出しです。h2:beforeのopacityの数値を変更することで、円の色の不透明度が簡単に変えられます。(0.0(完全に透明)~1.0(完全に不透明))
h2 {
background-color: #ef858c; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h2:before {
background-color: #fff; /* 円の色 */
border-radius: 50%;
content: '';
display: block;
opacity: 0.6; /* 円の不透明度 */
position: absolute;
top: -20px;
left: 0px;
width: 200px; /* 円の幅 */
height: 200px; /* 円の高さ */
}
背景に大きな円が2つある見出し
円が2つあるバージョン。2つの円は別々の色を指定することも可能です。
h2 {
background-color: #ef858c; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h2:before {
background-color: #fff; /* 大きな円の色 */
border-radius: 50%;
content: '';
display: block;
opacity: 0.6; /* 大きな円の不透明度 */
position: absolute;
top: -20px;
left: 0px;
width: 200px; /* 大きな円の幅 */
height: 200px; /* 大きな円の高さ */
}
h2:after {
background-color: #fff; /* 小さな円の色 */
border-radius: 50%;
content: '';
display: block;
opacity: 0.6; /* 小さな円の不透明度 */
position: absolute;
bottom: -50px;
left: 180px;
width: 100px; /* 小さな円の幅 */
height: 100px; /* 小さな円の高さ */
}
色が途中で切り替わる見出し
途中で色が切り替わるスタイリッシュな見出しです。
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;
}
色が途中で切り替わる見出し(2色)
サンプルではピンク×白2つですが、切り替わる色を別々のカラーコードを指定することにで、より複雑な色が出せます。
h2{
background-color: #ef858c; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h2:before{
background-color: #fff; /* 切り替わる色1 */
content: '';
display: block;
opacity: 0.3; /* 不透明度 */
transform: rotate(-50deg);
position: absolute;
bottom: -10px;
right: -330px;
width: 500px;
height: 500px;
}
h2:after{
background-color: #fff; /* 切り替わる色2 */
content: '';
display: block;
opacity: 0.3; /* 不透明度 */
transform: rotate(-70deg);
position: absolute;
bottom: -100px;
right: -500px;
width: 500px;
height: 500px;
}
先頭に白抜き円グラデがある見出し
スマートなデザインと綺麗なグラデーションで印象付ける見出し。グラデーションと文字色と下線は、同系色でまとめると統一性が出るのでおすすめです。
h2 {
border-bottom: 1px solid #f0bdc4; /* 下線 */
color: #ff99ac; /* 文字色 */
padding: 10px 10px 10px 50px; /* 上・右・下・左の余白 */
position: relative;
}
h2:before {
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; /* 白抜き円の高さ */
}
ドットの見出し
タイトルの後ろにドットが12個くっつきます。コンテンツ幅からはみ出た場合は非表示になる設定です。サイドバー向き。
h2 {
color: #590c11; /* 文字色 */
overflow: hidden;
padding: 10px; /* 余白 */
position: relative;
}
h2:after {
background-color: #f3a3a8; /* 1個目(一番左)のドットの色 */
border-radius: 50%;
content: '';
margin-left: 15px; /* 最後の文字とドットとの余白 */
position: absolute;
top: 50%;
transform : translateY(-50%);
width: 5px; /* ドットの幅 */
height: 5px; /* ドットの高さ */
box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */
40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */
60px 0px 0px rgb(243,163,168), /* 4個目のドットの位置と色 */
80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */
100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */
120px 0px 0px rgb(243,163,168), /* 7個目のドットの位置と色 */
140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */
160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */
180px 0px 0px rgb(243,163,168), /* 10個目のドットの位置と色 */
200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */
220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */
}
花の見出し
ほんわかした花の見出しです。女性向けサイトに。
h2 {
color: #d04255; /* 文字色 */
padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
position: relative;
}
h2:before {
content: '**'; /*花に見せかけるためのアスタリスク*/
color: #fff; /* アスタリスクの色 */
display: inline-block;
font-size: 30px; /* アスタリスクの大きさ */
font-weight: bold;
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;
}
和風な見出し
丸を3つ+中央に白抜き円で、デフォルメされた椿のようなイメージです。和風なサイトにおすすめの見出し。
h2 {
border-bottom: 1px solid #f0bdc4; /* 下線 */
color: #ff99ac; /* 文字色 */
padding: 10px 10px 10px 70px; /* 上・右・下・左の余白 */
position: relative;
}
h2:before {
background-color: #ff6a88; /* 円1の色 */
border-radius: 50%;
content: '';
display: block;
position: absolute;
top: 0px;
left: 10px;
width: 25px; /* 円1の幅 */
height: 25px; /* 円1の高さ */
box-shadow: 25px 10px 0px #ff6a88, /* 円2の位置・色 */
3px 25px 0px #ff6a88; /* 円3の位置・色 */
}
h2:after {
border: 4px solid #fff; /* 白抜き円 */
border-radius: 50%;
content: '';
display: block;
position: absolute;
top: 13px;
left: 21px;
width: 15px; /* 白抜き円の幅 */
height: 15px; /* 白抜き円の高さ */
}
線も文字もグラデーションな見出し
線と文字とは別々の色を指定することもできます。文字のグラデーションとは逆のグラデーションを線にかけてみてもいいですね。
h2 {
background: -webkit-linear-gradient(left, #ef858c, #f3cbd0); /* 文字のグラデーション(Chrome、Safari) */
background: -moz-linear-gradient(left, #ef858c, #f3cbd0); /* 文字のグラデーション(Firefox) */
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)); /* 線のグラデーション(Chrome、Safari) */
background: -moz-linear-gradient(left, #ef858c, #f3cbd0); /* 線のグラデーション(Firefox) */
background: linear-gradient(left, #ef858c, #f3cbd0); /* 線のグラデーション */
content: '';
margin: 10px 0px;
display: block;
height: 1px; /* 線の太さ */
width: 100%;
}
上枠ストライプの見出し
上枠のみストライプの見出し。囲み枠として使うのもアリです。
h2 {
background-color: #fcf0f1; /* 背景色 */
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; /* 背景色 */
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; /* 余白 */
}
セロテープ風の見出し
一風変わったセロテープ風の見出しは、DIY系のサイトに合いそうです。背景色を変えてマスキングテープ風にするとより可愛くなりますよ。
h2 {
padding: 10px; /* 余白 */
background-color: #fff; /* 背景色 */
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); /* 影 */
}
コピペ後に元々の見出しのデザインが残っている場合
コピペしたけど、元々テーマで設定されているデザインが残ってしまうことがあります。
そんな場合の対処法を書きました。
関連記事WordPressで見出し2のスタイルに線が入る原因と消す方法
内容はSimplicityをお使いの場合の解説になってますが、他のテーマでも同様に解決できますよ。
CSSのみで作る見出しデザイン あとがき
見出しだけではなくカエレバ・ヨメレバのカスタマイズ記事や囲み枠のサンプルデザインもあわせてどうぞ。ブログを自分好みにカスタマイズしちゃいましょう。
ディスカッション
ピンバック & トラックバック一覧
[…] h2に使っている見出しは『第0版』さんを参考にさせていただいたものをカラーのみ変更して、使用しています。 […]
[…] 引用サイト:CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 […]
[…] 個人的にはこちらの方のデザインする見出しがガーリーなデザインで気に入っています💕 […]
[…] h2に使っている見出しは『第0版』さんを参考にさせていただいたものをカラーのみ変更して、使用しています。 […]
[…] 「見出し」をCSSで簡単・キレイに装飾!~WordPressでの設定方法|チーとクルクルメモWordpressで見出しのデザインを不満に思ったことはありませんか。「オシャレな見出しにしたいけど子テーマをいじるのは怖い」という方に、コピペだけで簡単すぐに見出しの装飾を実現できる、便利なCSSをご紹介します。kurukulu.com CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版ブロ… […]
[…] https://0edition.net/archives/1448 […]
[…] CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版 (0edition.net) […]
[…] CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 […]
[…] 見出しで参考にしたサイト 0edition […]
[…] このあとの見出しは第0版さんのCSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】からboxは6 […]