当サイトのhタグのカスタマイズをメモの意味も込めて投じておきます。
目次
ソースコード
以下がh1〜h5までのcssです。
h1 {
color: #083358;
padding: 0.3em ;
margin: 2em 0;
border-bottom: solid 1px #b3b3b3;
font-weight: bold;
}
h2 {
border-left: solid 5px #0f4471;
background: #f6f6f6;
padding: 0.4em 0.75em 0.3em ;
margin: 2em 0;
font-weight: bold;
color: #0f4471;
}
h3 {
padding: 0.35em 0.5em 0.35em ;
margin: 2em 0;
border-left: solid 4px #083358;
border-bottom: solid 2px #e4e4e4;
color: #083358;
background: #f6f6f6;
font-weight: bold;
}
h4 {
color: #083358;
padding: 0.2em 0em 0.2em 0.5em;
margin: 2em 0;
border-left: solid 3px #083358;
border-bottom: solid 1px #0f4471;
font-weight: bold;
}
h5{
color: #083358;
padding: 0.5em 0em 0em 0.5em;
margin: 2em 0;
border-bottom: solid 1px #0f4471;
font-weight: bold;
}
h6{
color: #0f4471;
position: relative;
line-height: 1.4;
margin: 2em 0 0.5em 0;
padding:0.3em 1em 0.25em;
display: inline-block;
top:0;
font-weight: bold;
}
h6:before,h6:after{
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
h6:before{
border-left: solid 1px #0f4471;
border-top: solid 1px #0f4471;
border-bottom: solid 1px #0f4471;
left: 0;
}
h6:after{
content: '';
border-top: solid 1px #0f4471;
border-right: solid 1px #0f4471;
border-bottom: solid 1px #0f4471;
right: 0;
}
完成図
h1サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
h2サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
h3サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
h4サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
h5サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
h6サンプル
ここに本文ここに本文ここに本文ここに本文ここに本文
ここに本文ここに本文ここに本文ここに本文ここに本文
まとめ
コピペが多いので不要な箇所もあったりするかもしれませんが、
一応スッキリ統一感が出せるよう多少意識して作成しました。
