見出しのカスタマイズはどうするの？CSSをコピペして、おしゃれな見出しへ21選！
今回の問題は？
ブログの記事を書くのに、自分好みのおしゃれな見出しにカスタマイズしたい人は多いのではないでしょうか。今回は、CSSコードをコピペして、そのまま使用できる見出し21選を紹介していきます。
シンプルな見出し
１．下線の見出し
【CSSコード】
h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}
２．点線下線の見出し
【CSSコード】
h1 {
color: #6594e0;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #6594e0;
}
３．二重線の見出し
【CSSコード】
h1 {
/*線の種類（二重線）太さ 色*/
border-bottom: double 5px #FFC778;
}
４．上下線の見出し
【CSSコード】
h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}
５．背景色がある見出し
【CSSコード】
h1 {
background: #c2edff;/*背景色*/
padding: 0.5em;/*文字まわり（上下左右）の余白*/
}
６．枠線の見出し
【CSSコード】
h1 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}
７．背景色＆下線の見出し
【CSSコード】
h1 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/
}
８．左線の見出し
【CSSコード】
h1 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}
９．左線＆背景色の見出し
【CSSコード】
h1 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
１０．左線＆背景色＆影の見出し
【CSSコード】
h1 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
デザイン的な見出し
１１．吹き出し風の見出し
【CSSコード】
h1 {
position: relative;
padding: 0.6em;
background: #e0edff;
}
h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
１２．ジーパン風の見出し
【CSSコード】
h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}
１３．帯風の見出し
【CSSコード】
h1 {
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
h1::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
１４．蛍光マーカーの見出し
【CSSコード】
h1 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
１５．２色下線（異色系）の見出し
【CSSコード】
h1 {
border-bottom: solid 3px skyblue;
position: relative;
}
h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}
１６．２色下線（同色系）の見出し
【CSSコード】
h1 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
１７．ストライプ（背景色）の見出し
【CSSコード】
h1 {
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
１８．左線＆ストライプ（背景色）の見出し
【CSSコード】
h1 {
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
１９．上下線＆ストライプ（背景色）の見出し
【CSSコード】
h1 {
color: #6cb4e4;
text-align: center;
padding: 0.25em;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
２０．上下線＆ストライプ（背景色）の見出し
【CSSコード】
h1 {
position: relative;
}
h1:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}
２１．吹き出し風（ストライプ）の見出し
【CSSコード】
h1 {
position: relative;
padding: 0.6em;
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;
}
h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
width: 0;
height: 0;
}
まとめ
見出しのデザインをカスタマイズすることで、ブログの雰囲気ががらりと変わります。気に入った見出しのデザインはあったかな？
色などは好みに合わせて変更してくださいね。
