はてなブログの見出しデザインを変更する

CSS

はじめに

はてなブログの見出しデザインを変更してみましたので、やり方をまとめておきます。CSSについての説明は割愛します。

使用しているテーマはMinimalismです。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

変更方法

(1) 設定からデザインを選択する。

(2) カスタマイズからデザインCSSを選択する。

(3) 変更したいCSSを書く。

これで保存すると、指定したCSSが反映されます。

変更したデザインとCSS

はてなの場合、

を使う指定になっているので、h3〜h5のデザインを変更しています。h2はブログタイトルの下の説明欄に使われています。

デザインのサンプルはサルワカを参考にしました。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

実際のデザインはこんな感じです。

CSSの指定です。

h3 {
  padding: 0.5em;
  color: #333;
  background: #F9F9F9;
  border-left: solid 5px #ccc;
}

h4 {
  padding: 0.3em;
  color: #333;
  border-bottom: solid 1px #ccc;
}

h5 {
  padding: 0.2em;
  color: #333;
}