はてなブログカスタマイズの記録⑤～見出し～

当ブログは新しいブログに移転しました。
5秒後に新しいブログに切り替わります。

https://www.simplecore.site/

今後とも引き続きよろしくお願いいたします。

simplecore.site

はてなブログのカスタマイズ。今日は見出しをカスタマイズしていきます。というか、一度にやれよ、と自分でも思うのですが、いかんせん時間が無さ過ぎる・・・本当はがっつりやって、一度に記事にまとめたいんですけどね。まあ、肩肘張らずに気長にやっていきます。

まずは記事タイトル

デフォルトだとこのような感じです。ちょっとフォントが重いような気がしなくもないので、手始めにフォントスタイルを変更します。

フォントスタイルをnormalにして、級数を上げました。スッキリしましたし、これでも充分見出しとしての役割は果たすと思います。

CSSがこちら。

.entry-title a {
    font-size: 30px;
    font-weight: normal;
}

次は大見出しをいじってみる

次はコンパネでいうところの大見出しの部分です。HTMLでは<h3>ですね。というか、<h2>ってどうやったら出てくるんでしょうか？きっと何かしらの方法があるんでしょうけど・・・SEO的には一応、<h1>から順番につかっていく、というルールがあったような気がします。後で調べてみましょうかね。

で、この大見出しですが、もっと削ぎ落とした方が個人的には好みです。もうここまでくるとこのテーマに対するイチャモンに近いですね。でも、デザインってそういうものなんで。

で、こんな風にしてみました。左のボーダーと背景を消して、級数をアップ。marginとpaddingを微調整しました。CSSはこちら。

.entry-content h3 {
    margin: 32px 0 20px;
    padding: 5px 0;
    font-size: 26px;
    background: none;
    border-bottom: solid 1px #999;
    border-left:none;
}

次は中見出しをいじる

これはもうシンプルに太字にするだけでいいかと。大見出しが下線をひっぱっただけの装飾なので。

このようにボーダーを消して、級数を少しだけ上げました。CSSはこんな感じ。

.entry-content h4 {
    margin: 30px 0 0 0;
    padding: 10px 0 0 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 1px;
    border:none;
}

最後に小見出しをカスタマイズ 

それほど深い話を書いていない証拠になってしまうのですが、小見出しってつかわないんですが・・・まあ、つかうときのために一応やっておきますが、これも左の余計な四角をとるだけです。

CSSはこちら。

.entry-content h5 {
    margin: 0;
}
.entry-content h5::before {
    border: none;
}

本日のまとめ

僕が好きなのは、装飾は一切入れずに余白とフォントサイズ、フォントスタイルだけでメリハリをつけるようなデザインなんですが、肝心の余白の調整が意外と面倒ですね。

例えば、大見出しの部分は本当は下線を引きたくありませんでした。ただ、それだと前後のコンテンツの境目がわかりづらくなってしまったため、妥協案として線を入れました。しかも、その前にわざわざHTMLで<p>を入れています。空タグなので本当はやりたくないんですけど。（改行タグも<p>に変換されてしまうようです。）

今後はこの辺りの余白の調整をもう少し簡単に出来るようにしていきたいですかね。どこまでできるのかわかりませんが。