【Cocoonカスタマイズ】見出しh1~h6をコピペでカスタマイズしよう！

この記事は 約5 分で読めます。

「見出しのデザインを変えたい」

見出しのデザインをアレンジすることで、
本文と見出しの区別がつきやすくユーザーにとって
見やすい記事となる効果が期待できます。

本記事では、
CSSコードをコピペするだけで当サイトで
使用している見出しタグを使うことができます。

CSSが全く分からない人でもカスタマイズできます！

それでは、解説します。

h1タグの装飾
h2タグの装飾
h3タグの装飾
h4タグの装飾
h5タグの装飾
h6タグの装飾
まとめ

h1タグの装飾

.article h1 {
color: #5c6b80;
font-weight: 800;
font-size: 1.5rem;
line-height: 1.3;
}

h2タグの装飾


.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #1baa9a;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #1baa9a;
border-bottom: 0px
}

h3タグの装飾

.article h3 {
border: none; 
padding: 0.7em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #F3FEF1;/*背景色*/
border-left: solid 10px #69B560;/*左線（実線 太さ 色）*/
}

h4タグの装飾

.article h4,
#comment-area h4,
#related-entries h4{
border: none; 
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
.article h4::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #69B560;
}

h5タグの装飾

.article h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border: none; 
padding:0px 30px 10px;
margin-top: 30px !important;
color: #69B560;/*文字色*/
}
.article h5:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #69B560; /*アイコン色*/
}

h6タグの装飾

.article h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}
h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}