アメブロデフォルトの見出しヘッダーCSSを変更する

見出しヘッダー（H2とか）のCSS設定を変更します。

デフォルト設定であたっているCSSをひとつずつ確認して、気に入れば良しとし、そうでなければ自分好みにCSSを修正していきます。ウインク

CSSの確認はChromeブラウザのデベロッパーツールを使って行います。

まず見出しレベル１（H1）

.skin-entryTitle {
    color: #333333;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

[data-uranus-component="entryTitle"] {
    line-height: 1.4;
    text-decoration: none;
    font-size: 26px;
}

H1はページタイトルです。
まあこれはいいか…
ページタイトル以外には使わないだろうし…ニヤリ

次、見出しレベル2のH2。

[data-uranus-component="entryBody"] h2 {
    font-size: 1.96em;
    margin: 0.83em 0;
}
見出しレベル2（H2）

オリジナルは見てのとおり、かなり大きいです。

bodyでfont-size: 16pxを指定していますので、16×1.96＝31.36pxのフォントサイズとなっています。

H1のフォントサイズが26pxですから、H2とH1のフォントサイズが大きく逆転してしまっています。びっくり

それとデフォルトのCSSではマージンが上下に取ってあります。
マージンは相殺しあいますから、上下どちらか一方向にだけ設定して複雑化を避けたいところ。キョロキョロ

フォントの大きさは2.4rem（24px）として少し小さくします。
見出しなので下線を引いたり行頭に装飾を施したくなりますが…
アメブロなので止めておきます。

何故かというと下線はそこで視線を遮る効果があるからです。
行頭の装飾も同じです。

もっともこれが自然な「見出し」の使い方…
つまり「ここから先は少し別の内容ですよ」という目印ですからね。

でもこれが「読み」を区切ってしまうのも事実。
アメブロは論文ではないので、こうした表記を読み慣れない読者が先に進みづらくなってしまいます。ショボーン

これらを考慮してH2のCSSを以下のように修正します。

.skin-entryBody > h2 {
    margin: 0 0 15px;
    display: block;
    box-sizing: border-box;
    font-size: 2.4rem
}

更に、オリジナルの見出しレベル2の大きさが再現できるようにh2-originalというクラスを作ってCSSを保存しておきます。

.skin-entryBody > .h2-original {
    margin: 0 0 15px;
    display: block;
    box-sizing: border-box;
    font-size: 3.136rem;
    font-weight: 700
}

次はH3です。
オリジナルのCSS設定は次のようになっています。

 h3 {
    font-size: 1.4em;
    margin: 1em 0;
}

フォントサイズは1.4emで16px×1.4 =22.4px。
マージンは上下に取ってあり、どちらも22.4pxとなっています。

こちらは以下のように修正します。

.skin-entryBody > h3 {
    margin: 0 0 12px;
    display: block;
    box-sizing: border-box;
    font-size: 2.0rem
}

更に、オリジナルの見出しレベル3の大きさが再現できるようにh3-originalというクラスを作ってCSSを保存しておきます。

.skin-entryBody > .h3-original {
    margin: 0 0 12px;
    display: block;
    box-sizing: border-box;
    font-size: 2.24rem;
    font-weight: 700
}

これでH2とH3のCSS設定見直しが完了しました。グッ

まとめとして文字の大きさを比較しておきましょう。

オリジナルの見出しレベル2（H2)

新たに設定したCSSで表現された見出しレベル2（H2)

オリジナルの見出しレベル3（H3)

新たに設定したCSSで表現された見出しレベル3（H3)

次回はH4～H6の設定について考えていきますね。ウインク