女子におすすめ！コピペだけでかわいい見出しになるCSS10選

ブログを書いていて、ちょっと見出しのデザインに飽きてきた。

見出しの装飾を変えたいんだけどCSSよくわからない。。なんて方。

コピペするだけでOKな女子におすすめのかわいい見出し装飾CSSを厳選して10個集めてみました！

着せ替えやお部屋の模様替えをするように、この機会に見出しの装飾を変えて気分転換してみませんかー？

CSSをカスタマイズする時に注意したいこと

CSSをカスタマイズする時は、親テーマを直接変更するのではなく、子テーマを作って変更しましょう。

親テーマにアップデートなどがあっても、子テーマを使っていればカスタマイズしたCSSが消えたりしませんよ！

WordPressをカスタマイズする時には子テーマを使うと幸せになれるお話

女子におすすめのかわいい見出しCSS10個

子テーマの準備ができたら、さっそくレッツカスタマイズ！

かわいい見出し　シンプルな破線タイプ

よく見かける下線をつけた見出しの応用で、下線を実線じゃなく破線に。

左には太目の縦線をいれたオーソドックスだけどちょっとかわいい見出しタイプです。

このタイプの見出しはh2やh3におすすめ。

h2{
font-size: 1.2em;/* 文字の大きさ */
font-weight: bold;/* 文字の太さ */
color: #5C4747;/* 文字の色 */
border-left: 7px solid #E07C7D;/* 文字左の点線の太さ・種類・カラー */
border-bottom: 2px dashed #E07C7D;/* 文字下の点線の太さ・種類・カラー */
margin: 0 0 1.5em;
padding: 0.2em 0.8em;
}

かわいい見出し　ゆるふわステッチタイプ

周囲を少しぼかすことでゆるふわチックになった背景色の少し内側をステッチしたような見出し。

ピンクだとかわいい系、ベージュ系にするとナチュラル系にも使えそうな見出しです。

このタイプはh1タグなどにおすすめ。

h2{
	font-size: 1.2em;/* 文字の大きさ */
	font-weight: bold;/* 文字の太さ */
	color: #fff;/* 文字の色 */
	border: 2px dashed #ffecef;/* ステッチの太さ・種類・カラー */
	background: #F9B8CD;/* 背景色 */
	border-radius: 8px;/* 四隅の丸み */
	box-shadow: 0 0 3px 3px #F9B8CD;
	margin: 0 0 1.5em;
	padding: 0.5em 0.8em;
}

かわいい見出し　きりっ放しリボンが垂れたようなタイプ

文字の前にちょっとワンポイント。

リボンの色と文字の背景色はそれぞれ変更できるので、同系色にするもよし。

別の系統の色を組み合わせてカラフルポップにするもよしです。

このタイプは使いようによってはh1タグでもh2タグでも使えそう。

h2{
    font-size: 1.2em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #fff;/* 文字の色 */
    background: #F9B8CD;/* 背景色 */
	border-radius: 8px;/* 四隅の丸み */
    -webkit-border-radius: 8px;/* 四隅の丸みと同じ数字に */
    -moz-border-radius: 8px;/* 四隅の丸みと同じ数字に */
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.4em 0.4em 0.4em 2em;
}
h2:before,
h2:after {
     content: "";
    position: absolute;
    display: block;
}
h2:before{
    top: -0.1em;
    left: 0.5em;
    width: 20px;
    height: 23px;
    padding: 5px 0 0 0;
    background: #f69;/* リボン部分の色 */
    text-align: center;
}
h2:after{
    top: 0.8em;
    left: 0.5em;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent #f69;/* リボンの切りっぱなし部分の色 */
}

かわいい見出し　吹き出しタイプ

よく見る吹き出しタイプの見出しです。

吹き出しタイプと言っても、角の丸みや下の出っ張り部分の角度などで印象ががらりと変わります。

このままコピペするのもいいですが、ちょっと数字を変えて自分好みの吹き出しにしてみるのもおすすめ。

このタイプの見出しはh2タグにおすすめです。

h2{
    font-size: 1.2em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #fff;/* 文字の色 */
    background: #F77825;/* 背景色 */
    border-radius: 5px;/* 四隅の丸み */
    -webkit-border-radius: 5px;/* 四隅の丸みと同じ数字に */
    -moz-border-radius: 5px;/* 四隅の丸みと同じ数字に */
    position: relative;
    margin-bottom: 0 0 1.5em;
    padding: 0.5em 0.8em;
}
h2:after{
    border-top: 15px solid #F77825;/* 下の出っ張り部分の色 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    bottom: -15px;
    left: 5%;
    z-index: 90;
    content: "";
}

かわいい見出し　リボンタイプ

リボンが記事部分を包み込んでいるかのような見出しタイプ。

かわいい系にもシンプル系にも使えそうですが、多様するとうるさくなりがち。

うるさくなりすぎないためにもh1タグでの使用がおすすめです。

h2{
	font-size: 1.2em;/* 文字の大きさ */
	font-weight: bold;/* 文字の太さ */
	color: #7E8B90;/* 文字の色 */
	background: rgb(209, 232, 203);/* 背景色 */
	box-shadow: 0 3px 3px 0 rgb(181, 195, 178);/* リボン下の影 */
	position:relative;
	margin: 0 -10em -10em -0.5em;
	padding: 0.5em 0.8em;
	margin-bottom: 40px;
	width: 100%;
}
h2:before{
	border-left-color: #9CB396;/* 左のリボン影色 */
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	left:0;/* 左のリボン影位置 */
	position:absolute;
	top:100%;
	content:" ";
}
h2:after{
	border-right-color: #9CB396;/* 右のリボン影色 */
	border-width:10px 10px 0 0;
	border-style:solid;
	border-color:transparent;
	right:0;/* 右のリボン影位置 */
	position:absolute;
	top:100%;
	content:" ";
}

かわいい見出し　文字前にワンポイントタイプ１

文字の前にワンポイントとして四角が２個並んだタイプ。

h2{
    font-size: 1.143em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #5C4747;/* 文字の色 */
    border-bottom: 2px dashed #D26466;/* 文字下の点線の太さ・種類・カラー */
    margin: 0 0 1.5em;
    padding: 0.2em 0 0 1.7em;
    position: relative;
}
h2:before{
    background: #d48789;/* 左上四角部分の色 */
    top: 0;/* 左上四角部分の位置 */
    left: 0.5em;/* 左上四角部分の位置 */
    height: 12px;/* 左上四角の大きさ */
    width: 12px;/* 左上四角の大きさ */
    position: absolute;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    content: "";
}
h2:after{
    background:#d26466;/* 左下四角部分の色 */
    top: 0.8em;/* 左下四角部分の位置 */
    left: 0.2em;/* 左下四角部分の位置 */
    height: 8px;/* 左下四角の大きさ */
    width: 8px;/* 左下四角の大きさ */
    position: absolute;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    content: "";
}

かわいい見出し　きりとりタイプ

タイトル部分だけ切り取られてしまったかのように見える見出しタイプです。

実際に切り取ってブログの背景色が見えているわけではなくて、ブログの背景色と同じ色を見出しの背景色に指定しているだけ。

なので、この見出しタイプはコードのハイライト部分「背景色」を自分のブログの背景色に変更して使ってくださいね。

このきりとりタイプの見出しはh1タグやh2タグがおすすめです。

h2{
    font-size: 1.2em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #5C4747;/* 文字の色 */
    border-top: 1px dashed #aaa;/* 文字上の点線の太さ・種類・カラー */
    border-bottom: 1px dashed #aaa;/* 文字下の点線の太さ・種類・カラー */
    background: #F2ECC4;/* 背景色(自分のブログの背景色を同じものに設定) */
    margin: 0 0 1.5em;
    padding: 0.8em;
    text-shadow: 1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -o-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -ms-box-shadow: 05px4px-4pxrgba(0,0,0,0.3) inset;
}

かわいい見出し　ワンポイントタイプ２

見出しの前にワンポイントをいれた見出しタイプをもう1種類ご紹介します。

これは下のコードのハイライト部分にいれた記号や文字が、そのままワンポイントとして見出しの文字前に出てくるタイプ。

ワンポイントタイプの見出しはそこまでうるさくないのでh2タグやh3タグにおすすめです。

h2 {
    font-size: 1.2em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #5C4747;/* 文字の色 */
    border-bottom: 2px dashed #E07C7D;/* 文字の下の点線の太さ・種類・カラー */
    padding: 0 35px;
    margin-bottom: 2em;
    position:relative;
}
h2:after{
    content:"★";/* 文字前のワンポイント */
    font-size:26px;/* ワンポイントの大きさ */
    color: #E07C7D;/* ワンポイントのカラー */
    top: -6px;/* ワンポイントの位置 */
    left:5px;/* ワンポイントの位置 */
    position:absolute;
}

かわいい見出し　BOXタイプ

ちょっと目を引くBOXタイプの見出し。

色を変更しようとすると変更箇所が多くなるので、初心者には少し難しいかも？

立体的なので難しいけど凝った感じがして目立ちますね。

このBOXタイプの見出しはh1タグやh2タグにおすすめです。

h2{
	font-size: 1.2em;/* 文字の大きさ */
	font-weight: bold;/* 文字の太さ */
	color: #fff;/* 文字の色 */
	background: #E07C7D;/* 背景色 */
	box-shadow: 0 -10px 0 0 #BB7374,/* BOX上の影色の部分大きさと色 */
10px 0 0 0 #E07C7D,/* BOX前面左部分の大きさと色(背景色と同じ色にする) */
-10px 0 0 0 #E07C7D,/* BOX前面右部分の大きさと色(背景色と同じ色にする) */
0 3px 3px 0 rgba(0,0,0,0.1);/* BOX下の影の位置と色 */
	margin-bottom: 20px;
	margin-top:10px;
	padding:10px;
	position:relative;
}
h2:before{
	border-width:0 0 10px 10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-color: #EA8A8B;/* BOX左上の三角部分の色 */
	top:-10px;
	left:-10px;
	width:0;
	height:0;
	position:absolute;
	content:" ";
}
h2:after{
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color: #EA8A8B;/* BOX右上の三角部分の色 */
	top:-10px;
	left:100%;
	width:0;
	height:0;
	position:absolute;
	content:" ";
}

かわいい見出し　矢印タイプ

最後はかわいい矢印タイプの見出しです。

BOXタイプの見出しと同じで、色を変更する時は変更箇所が多いですが、矢印タイプは2色しか使っていないのでわかりやすいと思います。

背景色と同色か、背景色より少し暗めの影色を準備して、コードの説明を読みながら当てはめていけばOK。

この矢印タイプの見出しも、h1タグやh2タグにおすすめです。

h2{
	font-size: 1.2em;/* 文字の大きさ */
	font-weight: bold;/* 文字の太さ */
	color: #5C4747;/* 文字の色 */
	background: #BFE2B6;/* 背景色 */
	box-shadow: 10px 0 0 0 #BFE2B6,/* 文字部分右はしの大きさと色(背景色と同じ色にする) */
-10px 0 0 0 #BFE2B6,/* 文字部分左はしの大きさと色(背景色と同じ色にする) */
0 3px 3px 0 rgba(0,0,0,0.1);/* 矢印下の影 */
	margin: 0 -1em 2em 1em;
	position:relative;
	padding:10px;
}
h2:before{
	border-width: 34px;
	border-style:solid;
	border-color:transparent;
	border-right-color: #BFE2B6;/* 矢印の先端部分色(背景色と同じ色にする) */
	top: -9px;
	left: -70px;
	position:absolute;
	content:" ";
}
h2:after{
	border-width:0 10px 10px 0;
	border-style:solid;
	border-color:transparent;
	border-bottom-color: #9DB995;/* 矢印の右上三角部分の影色 */
	top:-10px;
	right:-10px;
	position:absolute;
	content:" ";
}

コピペだけでかわいい見出しになるCSS10選　まとめ

コピペだけでかわいい見出しになるCSS10選はいかがでしたか？

コピペしたあとにちょっと変更したい！って方のために、コード内に簡単に変更できる箇所の説明も書いてみたので、是非コピペするだけでなくお好きな色に変更してみてくださいね。

使っているテーマによってはうまく表示されない、なんて場合もあるかもしれません。

コピペでもできない。。コピペしてみたけど反映しない。。なんて方は、思い切って誰かに作ってもらっちゃうのもおすすめ！

かわいくしたいけど記事をはやく書きたい！時短したい！なんて方向けにサイトやブログのカスタマイズもしているのでお気軽にご相談ください！

参考にさせてもらったサイト

今回参考にさせてもらったサイトでは他にもたくさん見出しが紹介されていますよ！

見出しのデザインをCSSのみでカスタマイズする
CSS でカッコいい見出しをつくろう
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン