Octopressの外観の変更

Octopressの外観を変更したかったので、下記ページで色々テーマをインストールして試してみた。
3rd Party Octopress Themes · imathis/octopress Wiki

テーマごとに導入方法の説明が書いてあるが、大抵は

git clone http://github.com〜 .themes/テーマ名
rake install["テーマ名"]

でよいようだ。

導入は簡単で良かったのだがやっぱり元に戻そうとしたところ、戻し方がわからず。
幸い少し前に作業フォルダごと圧縮保存してあったので、それを戻して事無きを得た。

ただ少しは外観を変えたい。ヘッダーの色とか、サイト名のフォントの大きさとか。

stylesheetsフォルダ内のscreen.cssを見てみると、スタイルに関するらしきことが改行も無しにすごい勢いで書いてある。
検索するとOctopressではSassとCompassというのが導入されていてsass/custom/以下のファイルを編集すればいいらしい。
Octopressのスタイル設定とカスタマイズ – T.I.D.

ファイル内の記述冒頭の「//」はコメントアウトを意味するようだ。
_colors.scssでヘッダーの色を少し変えて_layout.scssのheader-font-sizeを0.8emに変更した。
これだけでずいぶん好みの外観になった。

_styles.scssは再構築の際に最後にインポートされて上書きしてくれるから、好きな設定をあまり詰め込まずに追加すればよいらしい。
記事タイトルも少し小さくしたかったので、よく分からないのだけどここに

h1{font-size:〇〇em;line-height:☓☓em}
article header h1 a {font-size:△△em;line-height:□□em}

を足したらちゃんと小さくなってくれた。

めでたしめでたし。