電卓片手に

Octopress テーマの開発

投稿日:

Octopress は、rake install["theme-name"] によって、 テーマの切り替えができる。ただ、最初からインストールできるテーマは classic しかないので、 rake install["classic"] をする。

今回はこのテーマの開発をしてみた。基本的には上記の classic に相当する .theme/classicsasssource 以下を参考にした。

残念ながらこの classic は、機能と見た目がうまく切り分けられておらず、 今回はその切り分け作業から始まった。(といってもすべてできているわけではないんだけど。。。)

で、できたのが今使ってるテーマ。ソースコードは

kui/k-ui-octopress-theme - GitHub

使い方は README.md に書いてある通り。追加機能として tumblr の情報を 表示できるようになっている。

ここから開発方法について。

HTML ソースの改変

編集対象は rake install["kui"] 前なら .theme/kui/source 以下の HTML ファイル、 rake install["kui"] 後なら source ディレクトリ以下の HTML ファイルになる。

注意点としては、source/_layout/{category_index.html,post.html,page.html}, _includes/asides* は、削除すると rake サブコマンドがうまく動かなくなる。 各種 rake サブコマンドが直接読みに行っているファイルの様子。

sass, scss の変更

css を弄るだけなら、source/stylesheets 以下に css ファイルを追加していけばいい。

しかしせっかく Octopress 使ってるからには scss (sass) 使いたい!と思うはず。その場合は、 sass/_kui.scss を編集する。これをマッサラにすると、ほとんどスタイルシートが 効いていない状態になる。

編集前に rake preview コマンドを実行すると、scss を編集すると自動で css に変換してくれ かつ localhost:4000 でプレビューができる。便利ですね。

以上でした

まだまだ、うまく分離できていない上に、ドキュメントも不十分だけれど少しずつ改変したいと思う。