jubilee

Programing, Books and more...

Octopressのフォントや文字間・行間を変更する

Octopressでフォントやフォントサイズ・文字間・行間の変更をする方法。
サイドバーにAbout Meを表示させる方法。

デフォルトのフォント周りの設定はちょっとタイトルの文字が大きすぎたり、文章の行間がつまりすぎたりしていると感じていたので、変更してみた。
ちなみにサイドバー用の小さいAbout Meはデフォルトで用意されている。

フォント

/sass/custom/_fonts.scss にフォントを定義する。
今時点で自分が定義している内容は以下。

1
2
3
4
$sans: "TrebuchetMS", "HiraMaruPro-W4", Arial, sans-serif;
$serif: "Courier-Oblique", "HiraMaruPro-W4", serif;
$mono: "Consolas", monospace;
$heading-font-family: "TrebuchetMS", "HiraMaruPro-W4", Arial, sans-serif;

フォントサイズ・文字間・行間

/sass/custom/_styles.scss に定義する。
こんな感じ。

1
2
3
4
5
6
7
8
9
10
11
h1.entry-title a {
  font-size: 0.8em;
}

body {
  letter-spacing: 3px;
}

p {
  line-height: 1.8;
}

サイドバーにAbout meを表示させる

_config.yml を変更する。

53行目あたりにパス custom/asides/about.html, を追加する。

1
default_asides: [custom/asides/about.html,asides/recent_posts.html, ...

About Meの内容を作成するには、このcustom/asides/about.html をいじる。