IT Geek Girl

飛び散る興味を整理整頓@貧乏初心者プログラマーの野望

CompassとDropboxではてなブログカスタマイズ環境を作る

ということで新たにブログのカスタマイズをしていきます。
前回はいろいろなことがわからないままにカスタマイズに挑戦し、結果挫折しました・・・。

CSSって難しい。デザインってわからないorz

拾ってきたものを混ぜこせしすぎてわけのわからない状態となってしまったので、1から勉強しながらやっていこうと思います。

Compassを使う

SASSという言葉を聞いたことがあるものの、一体どんなものかとわからない状態でいました。
ということでこれを機にCompassとやらを利用していこうと思います!

Compass Home | Compass Documentation

gem update --system
gem install compass
compass create HatenaThemes

これでインストール&はてなのテーマ用のプロジェクトが作成されました!
プロジェクトに移動して

compass w

としておけば、変更したものが随時反映されていきます。

これを、Dropboxの中に書いてしまえば準備オッケー!!

はてなブログからDropboxの公開ファイルを読み込む

screen.scssの公開URLをコピーして、はてなブログCSSで読みこむように設定します。
この時、URLの最後尾?dl=0を?dl=1に変更しておきます。

https://www.dropbox.com/s/XXXXXX/screen.scss?dl=0

これで準備完了Σ・ω・*
こうすると、Dropbox内で編集したら即時はてなブログに反映されてとっても便利。
デザインカスタマイズ時は一旦これで行くとスムーズに確認できます。

さて・・・がんばるぞっと。