H4～H6の見出しヘッダーCSSをカスタマイズする

H4～H6の見出しヘッダーCSSがデフォルトでどのように指定されているか調査し修正していきます。

H4～H6までの見出しは階層が深いことからアメブロではほとんど使うことはないと思います。

でも念のためきちんとCSSを設定しなおしておきましょう。ニヤリ

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h4のオリジナルのフォントサイズは1em、bodyで16pxを指定していますから結局1×16px＝16pxとなります。

これではpタグで囲まれるテキストと同じ大きさになってしまいます。
もう少し大きくしたいところ。キョロキョロ
h3を20pxに指定したので18pxぐらいが妥当でしょうか。

h5 {
    display: block;
    font-size: 0.83em;
    -webkit-margin-before: 1.67em;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h5のフォントサイズは0.83×16px＝13.28pxとなっています。
地のテキストより小さいのはおかしいので修正しましょう。

h6 {
    display: block;
    font-size: 0.67em;
    -webkit-margin-before: 2.33em;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h6は更に小さいです。
0.67×16px＝10.72px。

これも修正します。
到底「見出し」として使う文字の大きさではありません。
単純に小さい文字を作りたかっただけだと思います。ショボーン

さて、h4もh5もh6もフォントサイズを18pxとすると、後は何らかの装飾によって区別してもらうしかありません。

ここではh4に二重下線、h6に点線の下線を施してみました。
ここまで階層が深いものを読んでもらうのであれば、アメブロでも下線を引いても良いかなと思ったわけです。
単純な一本下線はリンクと間違われる恐れがあるので使わないようにします。キョロキョロ

CSSとその表示はそれぞれ以下のようになります。

.skin-entryBody > h4 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem;
    border-bottom: 4px double #c7c7c7
}

見出しレベル４

.skin-entryBody > h5 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem
}
見出しレベル5
.skin-entryBody > h6 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem;
    border-bottom: 4px dotted #c7c7c7
}
見出しレベル6

H1～H3のときと同様に見出しでなくともこれと同じ表示をしたいときのためにh4～h6クラスを作ります。
ドット（ピリオド）がついていることに注意。

.skin-entryBody > .h4 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 700;
    border-bottom: 4px double #c7c7c7
}

.skin-entryBody > .h5 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 700
}

.skin-entryBody > .h6 {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 700;
    border-bottom: 4px dotted #c7c7c7
}

また、アメブロデフォルトの見出しの大きさを再現したいときのためにCSSを準備します。

.skin-entryBody > h4-original {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: 700
}

.skin-entryBody > h5-original {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.328rem;
    font-weight: 700
}

.skin-entryBody > h6-original {
    margin: 0 0 10px;
    display: block;
    box-sizing: border-box;
    font-size: 1.072rem;
    font-weight: 700
}

これでH1～H6までの見出しヘッダーのCSSを設定しなおすことができました！

次は強調表示のCSSを見ていきましょう。ウインク