【はてなブログ】minimalismの見出しのカスタマイズ

当ブログはminimalismを使用しています。
元々シンプルでスッキリしてるテーマなので
そのままでも十分良いのですが
更にスッキリさせたりメリハリをつけたりと
色々カスタマイズしました。

この記事では見出しのカスタマイズで
行ったことを記載しています。

デザインのカスタマイズの仕方

左上か右上から開くボックスの中から
デザイン→スパナアイコンを押し、
下の方にデザインCSSがあるのでそこに
コードを記入します。

見出しと文章の間の余白を狭める

下記の画像はカスタマイズする前の
当ブログの記事の一部なのですが
見出しと文章の余白が広すぎる感じがしたので
調整しました。

/* 見出しの行間と上下余白の設定 */ 
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 1em 0 0.5em 0;
  line-height: 1.5;
}

見出しの上を調整したければ
「1em」の数値を
下を調整したければ 「0.5em」の数値を
変更すると調整できます。

見出しの装飾

見出しにアクセントを入れました。
h2タグを使うと左と下に線が、
h3タグを使うとひし形が表示されます。

.entry-content h2 {
  position: relative;
  padding: 0.25em 0 0.5em 0.75em;
  border-left: 6px solid #3498db;
}

.entry-content h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

.entry-content h3::before {
    content: "◆";
    color: #999999;
}

この他のいろんな見出しのカスタマイズが
知りたい場合は「見出し css」とかで
検索すると色々出てきます。