こんにちは、おおまめです。
皆様見出しは使っていますか？
はてなブログで使える、コピペ可能の見出しデザインカスタマイズのcssをご紹介致します！
見出しとは？
↑↑↑こちらのことです。
見出しは一目見て何のことが書いてあるかわかりやすくしたもので、ブログを書くうえでとても大事なものです。
同じ大きさの文字がずらーっと並んでいるよりも、メリハリがつきとても見やすいですよね。
最適な言葉で見出しを作ることは、SEO（検索エンジン最適化）の面からいっても非常に重要とされています。
今まで使っていなかった方は使ってみましょう。
見出しの種類
見出しは全部で6つあります。
<h1>見出し1</h2>→１番大きな見出し
<h2>見出し2</h2>→２番目に大きな見出し
<h3>見出し3</h3>→３番目に大きな見出し
<h4>見出し4</h4 >→４番目に大きな見出し
<h5>見出し5</h5>→５番目に大きな見出し
<h6>見出し6</h6>→６番目に大きな見出し
見出しの使い方は？
見出しの使い方は2種類！
HTMLで書く
<h3>ここに文字</h3>
このように書くと見出しとして反映されます。
【スポンサーリンク】
まず見出しにしたい文章を打ち込みます。
文章の左にカーソルを合わせます。
ブログを編集するページの左上にある【見出し】をクリック。
好きな見出しを選んで下さい。
簡単に見出しが作れますね。
簡単！見出しをオシャレにカスタマイズしよう
では実際に見出しをカスタマイズしてみましょう。
自分好みに色やデザインを変えることでやる気もアップしますし、オリジナリティを出せますよ！
CSSコピペ場所
デザイン→工具マーク→デザインcss
に貼り付けて下さい。
コピペする際に見出し【h○】変更してください！
全てh2～h4で記述しています。
それぞれご自身の用途に合うよう変更して下さい。
見出しの書き換え等行っていない場合は↓↓↓
はてなブログ大見出しに使用→h3
中見出しに使用→h4
小見出しに使用→h5 に変更
見出しの書き換えについてはこちら↓↓↓
何のことかわからない人は特に読むことをおすすめします。
www.oomametomame.com
注意点
自己責任でお願いします。
CSSを書き換える際はバックアップをとってくださいね。
CSSを勉強中の為、統一性がなく、実験みたいになっていますが、気にならない方はご自由にどうぞ(笑)
【下線】
.entry-content h2 {
padding: .25em 0 .25em .75em;
border-bottom: 3px solid #663d3d;
}【下線2本】
.entry-content h4 {
padding: .25em 0 .25em .75em;
border-bottom: 5px double #3d663d;
}【下線点線】
.entry-content h3 {
padding: .25em 0 .25em .75em;
border-bottom: 3px dotted #3d6666;
}【破線】
.entry-content h3 {
padding: .25em 0 .25em .75em;
border-bottom: 3px dashed #3d6666;
}【破線上下】
.entry-content h2 {
padding: .25em 0 .25em .75em;
border-top: 3px dashed #3d3d66;
border-bottom: 3px dashed #3d3d66;
}【マーカー】
.entry-content h4 {
background: linear-gradient(transparent 60%, #e6b7b1 60%);
}【左ボーダー＋下線＋背景】
.entry-content h2 {
padding: 4px 10px;
color: #111;
background-color: #f5f5f5;
border-left: 8px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}【上下ボーダー】
.entry-content h3 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}【上下二重線】
.entry-content h4 {
position: relative;
padding: 1em 0;
}
h4::before,
h4::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
h4::before {
top: 10px;
border-top: 2px solid #b0e0e6;
border-bottom: 1px solid #b0e0e6;
}
h4::after {
bottom: 10px;
border-top: 1px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}【左ボーダー】
.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px solid #a9a9a9;
}【左２本ボーダー】
.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px double #5f9ea0;
}【左ボーダー２本＋下線】
.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px double #80a15f;
border-bottom: 2px solid #80a15f;
}【かこみ角丸】
.entry-content h3 {
padding: .5em .75em;
border: 2px solid #191970;
border-radius: 4px;
}【かこみ四隅飛び出し】
.entry-content h3{
position: relative;
padding: 10px 20px;
font-size:20px;
text-align:center;
border-top: solid 1px #fa8072;
border-bottom: solid 1px #fa8072;
}
h3::before,
h3::after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: calc(100% + 20px);
background-color: #fa8072;
}
h3::before{left: 10px;}
h3::after{right: 10px;}【左上にpoint】
.entry-content h2{
position:relative;
padding:20px 10px;
font-size:20px;
border:1px solid #000000;
}
h2::after{
content: "POINT";
position: absolute;
top: -8px;
left: 10px;
background: #fff;
font-size: 12px;
color: #778899;
padding: 0 10px;
}【かこみ二重線】
.entry-content h4 {
padding: 10px;
border: 3px double;
border-color: #000000;
}【かこみ二重線背景あり】
.entry-content h4 {
padding: 10px;
background-color: #e6ffff;
border: 3px double;
border-color: #000000;
}【かこみ角丸背景あり】
.entry-content h3 {
padding: .5em .75em;
background-color: #b0c4de;
border-radius: 4px;
}【背景＋下線】
.entry-content h3 {
padding: 12px;
background-color: #ffcccc;
border-bottom: 2px solid #ff9999;
}