Rubyちゃんこんにちわ

子育てエンジニアが綴る

Octopress の CSS を編集する

ブログのヘッダタイトル文字が大き過ぎて、iPhone で見ると画面の半分以上がタイトルという残念な表示結果だったので、小さくしてみることにした。
後で忘れそうなので作業記録をつけておく。

Octopress の CSS は sass ディレクトリ以下にあるファイルを編集することで、Octopress が scss から source/stylesheets/screen.css にまとめてくれる。
今回はヘッダの文字列をさくっと小さくしたかったので、/sass/custom/_layout.scss にある以下のコメントアウト部分を編集した。コメントを取って、値を小さくしただけ。

1
2
3
//$header-font-size: 1em;
//$header-padding-top: 1.5em;
//$header-padding-bottom: 1.5em;