blog.textfile.org結城浩のブログ

blog.textfile.org

Octopressでフォントサイズを変える

Octopressでフォントサイズを変えるときには、 sass/custom/_styles.scssの末尾に以下のようにフォントサイズ用のCSSを書くのが簡単でいい。

sass/custom/_styles.scss
1
2
3
4
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1em; }
h4 { font-size: 0.9em; }

rake generateすると、sass/custom/_styles.scssは最後に設定されるCSSとなるので、 他の部分でどう設定されているかを気にせずに上書きできる。

という情報は、Octopress公式ドキュメントのOverriding Stylesに書いてあることだが、 sass/screen.scss@import "custom/styles";という行が最後に入っていることからも確かめられる。

このsass/screen.scssrake generateによってsource/stylesheets/screen.cssに変換されることになる。

なお、フォントそのものはsass/custom/_fonts.scssで指定するようだ。 たとえば結城は以下のように指定している。

sass/custom/_fonts.scss
1
2
3
$sans: "Verdana", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
$serif: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
$mono: "Inconsolata", "Courier", "Osaka-等幅", Osaka-mono, "MS ゴシック", "MS Gothic", monospace;