Octopressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について 前回、Octopressのテーマをカスタマイズするという記事で、 Octopressにbootstrap-themeを導入しました。 If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade. 上の文はOctopressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。 しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。 OctopressのCSS生成の仕組み Octopressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん) SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。 本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。 というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。 // Custom @import "custom/colors"; @import "custom/fonts"; @import "custom/layout"; @import "custom/styles"; 後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。 // This File is imported last, and will override other styles in the cascade // Add styles here to make changes without digging in too much div.

Ocpressの標準のデザインは悪くはないのですが、個人的にはいまいち物足りなさを感じたので、テーマを変更しました。

テーマですが、このページなどから、 かっこいいのを見つけてくればいいと思います。

とりあえず私は、bootstrap-themeを入れてみることにしました。 導入はとても簡単です。

コード例を示すまでもないですが、Codeblockを試してみたいので、導入するまでのコードを貼り付けます。

(ちなみに、シェルのコマンドを貼り付けるときはlangをbashにすると良いみたいです。)

cd ~/git/octpress #octpressのディレクトリ
git clone https://github.com/bkutil/bootstrap-theme.git .themes/bootstrap-theme
rake install["bootstrap-theme"]
rake generate
rake deploy #公開

テーマを変えることで、一気にモダンな感じになりました!

話題のBootstrapだけあって、こんなショボイブログも見てくれだけはいい感じに見えるような気がします。

あとは、_config.ymlをちょっといじるだけで、facebookやGoogle+のボタンをつけたり、 Disqus Commentsでコメントをできるようにできるので、簡単にモダンなブログを作ることが出来ました。

Octopressすごい!