はてなテーマストア「Palette（パレット）」のカスタマイズ解説（２）です。
カスタマイズが簡単で色々なデザインができる、はてなブログのテーマ「Palette（パレット）」はこちらからダウンロードできます。
Palette （パレット） - テーマ ストア
第２回目の今日は「見出し」について解説します。
※コードは赤字の部分を変更することで色やサイズを変えられます！
※変更後のCSSは、デザイン→カスタマイズ（スパナマーク）→{}デザインCSSに挿入します。
見出し 基本の設定
見出しはh1~h6まであります。
はてなブログの編集画面で使う、通常の見出しは
大見出し→h3
中見出し→h4
小見出し→h5
となっています。
以下は、見出し全体の基本の設定です。
基本の文字色
h1, h2, h3, h4, h5, h6 {
color: #454545;/*h1~h6の文字色*/
line-height: 1.3;/*行間の高さ*/}
見出しにリンクがある時の文字色
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #454545;/*h1~h6にリンクがある時の色*/
text-decoration: none;/*下線はなし*/}
リンクがある時にマウスオーバーした時の色
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #d3d3d3;/*h1~h6リンクがある時のマウスオーバーの色*/}
文字サイズ
レスポンシブなので、h1~h3は「PCでの表示サイズ」と「タブレット＆スマホでの表示サイズ」を変えています。
@media(min-width: 992px){ 〜 } で、→ PC表示は992pxより大きい場合の設定をしています。
/*=== h1 ===*/
.entry-content h1 {/*タブレットとスマホ表示時*/
font-size: 1.5rem;/*1.5倍*/}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h1 {font-size: 1.7rem;/*1.7倍*/}}
/*=== h2 ===*/
.entry-content h2 {/*タブレットとスマホ表示時*/
font-size: 1.4rem;}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h2 {font-size: 1.5rem;}}
/*=== h3 ===*/
.entry-content h3 {/*タブレットとスマホ表示時*/
font-size: 1.2rem;}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h3 {font-size: 1.3rem;}}
/*=== h4 ===*/
.entry-content h4 {font-size: 1.1rem;}
/*=== h5 ===*/
.entry-content h5 {font-size: 1rem;}
/*=== h6 ===*/
.entry-content h6 {font-size: .9rem;}
デザイン
現在の見出しデザインの解説です。
赤字部分を変更することで色や線を変えられます。
※このデザイン変更とは別に自分で用意した見出しを使う場合は、一旦、テーマの見出しをリセットしてください。リセットの仕方は次の項で解説しています。
h1 見出し
/*h1 見出し*/
.entry-content h1{
padding: .5em;/*文字の周りの空白*/
background: #f5f5f5;/*背景色*/
border-bottom: 5px solid #000;/*下線*/}
h2 見出し
/*h2 見出し*/
.entry-content h2{
padding: .5em;
background: #f5f5f5;/*背景色*/
border-left: 5px solid #000;/*左側の線*/}
h3 大見出し
/*h3 大見出し*/
.entry-content h3{
padding: .5em;
background: #f5f5f5;/*背景色*/
border-top: 2px solid #000;/*上の線*/
border-bottom: 2px solid #000;/*下線*/}
h4 中見出し
/*h4 中見出し*/
.entry-content h4{
padding: .2em .5em;
border-left: 5px solid #000000;/*左の線*/}
h5 小見出し
（h5だけCSSデザインの設定が上記と少し違います。）
/*h5 小見出し ===================================*/
.entry-content h5 {/*ポジションや空白を指定*/
position: relative;line-height: 1.4;
padding:0.25em 1em;display: inline-block;top:0;}
/*h5の前後に8pxの空白''を入れる↓↓*/
.entry-content h5:before,.entry-content h5:after{
position: absolute;top: 0;content:'';
width: 8px;
height: 100%; display: inline-block;}
/*空白の左側に"["を付けている↓↓*/
.entry-content h5:before{
border-left: solid 1px #000;/*色*/
border-top: solid 1px #000;/*色*/
border-bottom: solid 1px #000;/*色*/
left: 0;}
/*空白の右側に"]"を付けている↓↓*/
.entry-content h5:after{
border-top: solid 1px #000;/*色*/
border-right: solid 1px #000;/*色*/
border-bottom: solid 1px #000;/*色*/
right: 0;}
/*h5 小見出し ここまで ============================*/
見出しをリセットする方法
/*==============================================
見出しをリセットする方法
・別の見出しに変更する場合、現在の設定をリセットする
・下のCSSを挿入し、それよりも後ろに別の見出しのCSSを入れる
（CSSは後に書いてある方が優先される）
================================================*/
素敵な「見出し」は、こちらのサイトが参考になります！
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
/*h1 見出し リセット*/
.entry-content h1{
background: #fff;
border-bottom: none;}
/*h2 見出し リセット*/
.entry-content h2{
background: #fff;
border-left:none;}
/*h3 大見出し リセット*/
.entry-content h3{
background: #fff;
border-top: none;
border-bottom :none;}
/*h4 中見出し リセット*/
.entry-content h4{
border-left: none;}
/*h5 小見出し リセット*/
.entry-content h5:before,
.entry-content h5:after{display:none;}
.entry-content h5{display:block;}
h5の見出しリセットのCSSの記述にミスがあり、久古 (id:randumemo) さんが正しい記述を書いてくれました(^-^)
現在は、正しいものに書き直してます。
↓↓元ネタ
「Pallete」でH5タグのデザインをリセットする方法＆オススメのＣＳＳデザイン参考サイト紹介 - MemoRandum
★その他にもPaletteのカスタマイズ方法を色々載せてくださっているので、ぜひご参考になさってください！
はてなブログ「Pallete」カスタマイズまとめ - MemoRandum
久古 (id:randumemo) さん、ありがとうございますm(_ _)m
Palette★カスタマイズ解説（１）基本の設定（全体・フォント・背景色）
