アロイログ

アラサーSEの雑記ブログです。家庭菜園、子育て、ブログ運営などなど、ジャンルにはこだわらず執筆しています。

h2タグとh3タグを少しだけ見やすくカスタマイズした

こんにちは。アロイ(@setsuyakutousan)です。

私はGoogleBloggerでブログを書いていますが、テンプレートは「Vaster」を使っています。


この「Vaster」、シンプルでクセが無いのでとっても気に入っているのですが、殺風景な感じが否めなく、もう少しだけポップにしたいと思っていました。

そこで、よく使っているh2タグとh3タグを改善することにしました。


▽スポンサードリンク



変更前のh2タグとh3タグ:殺風景


変更前の画面はスマホで見た場合、以下のような感じです。

▼変更前


きちんとデザインはされており、メリハリが無いわけではないのですが、黒々していてとても殺風景です。

ちなみに、
・h2タグ部分:100均ダイソー野菜種から始める理由
・h3タグ部分:①種類が豊富
の内容になっています。

もう少し「明るく」「メリハリ」をつけることを目的に、以下の修正をしました。
  1. h2タグとh3タグの文字サイズを修正:h2:20px→18pxに。h3:20px→17pxに。
  2. h2タグのborder-leftのラインを太めに、色をオレンジ(っぽい色)に修正。
  3. h3タグのborder-bottomのラインを太めに、色をオレンジ(っぽい色)に修正。

変更後のh2タグとh3タグ:少しだけポップ


上記の修正内容適用後の画面はスマホで見た場合、以下のような感じです。

▼変更後

h2タグ、h3タグの見出し感にメリハリが出るようになり、少しだけ明るい感じになったので、見やすくなったかな~と思います。

ヨッセンス(ヨスさん)のような見出しが最高に読みやすいです。ヨスさんのブログに比べるとまだまだヒヨッコなレベルですが。。。日々改善していきたいと思います。