tDiaryのテーマをscssで書く(暫定版)

このブログのデザインを変更したでbootstrap-sassをもとにtDiaryのテーマを作るという記事があって、だったらいっそのこと、なにかしら.scssを書いたら日記に反映される仕組みを作れば良いんじゃないだろうかということでtwitterでつぶやきつつ調べていたら、tDiaryでsprocketsが動いているということを教えてもらった。

ということで、まずは自作のテーマと同じような感じでcssとして反映されるところまでの手順を確立しようということでやったのが以下の内容。

(bootstrap-)sassの導入

sprocketsは.cssのコンパイルにsassを使用するのでsassを入れる。今回はbootstrap-sassをベースにしたので、Gemfile.localにそれを記述して、

gem 'bootstrap-sass'

アップデート。

$bundle install

scssを書く

diary/theme の下に、hoge/hoge.css みたいな感じでcssを配置、中身はscssを読み込むだけ。

//= require_tree .

.css.scssを同じディレクトリに作成。

@import 'bootstrap';

を先頭に書き、てきとうにscssを書いていく。

テスト用に日記を立ち上げて、上記のブログを参考に見た目を確認しながら変更した。 内容は、 https://gist.github.com/kp1/4d24f828f1441d2cd9d6 にて公開している。

テーマとして選択

本番用にファイルを配置すると、テーマの選択肢として「Hoge」が表示されるのでそれを選ぶと反映される。ということで、すでにこの日記は新しいデザイン*1になっている。

ToDo

• メジャーなプラグインに対応
• bootstrap3用のナビバーのプラグインを作成
• .cssを公開する手順の確立