Reverie を使ってみよう


今流行りのRWDに手を出してみようと、探しまわってるうちに、WordPressテーマとして使えるFoundationベースのテンプレートReverieを見つけた。
レスポンシブデザインとFoundationそしてWordPressもいっきに学習できてしまうのではないかと思い軽い気持ちで手を出してみたのだが、2、3日の予定であったがつまづくところ多々あり、結局5日間かかってしまった。その時のつまづきポイント覚え書き。

まずReverieへいってそこからダウンロード
Version 5.0.0 Foundation5をベースにしたテンプレートだ。

foundation

展開時のフォルダ構成は上記

Compassを起動してfoundationフォルダ下の_setting.scssを書き換えてもあれ?見た目は変化しない。あれれ?と思っている間に一時間経過。
答えはReverie-master直下のscssフォルダ内の_setting.scssをいじくらなくてはならなかったのだ。Compassで監視するのもこちらのscssフォルダ。吐出口は同階層のcssフォルダに設定すればOKなのだった。
_setting.scssの書き換えは

// We use these to control various global styles
$body-bg: #E0FFFF;
$body-font-color: #333;
$body-font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;;
// $body-font-weight: normal;
// $body-font-style: normal;

のように変更したい行の//を消してから、数値を書き換えること。

あとはheader.phpの最後に注意。

	<!-- End of Top-Bar -->

<!-- Start the main container --></pre>
<div class="container" role="document">
<div class="row">

このようにheader.phpの中からすでに.containerが始まっているので注意。あれ?レイアウトおかしいなぁ?なんていう時はここをぜひ注意してpage.phpを書いていくといいでしょう。メニューボタンなんかは

yousuiroMenu

こんな感じになっているので、primary navigationにチェックを入れると、foundation特有のシンプル&機能的なTop Barメニューに入ってくれるので、楽ちん。
Foundationの細かいところはhttp://foundation.zurb.com/docs/で見てください。なんでも出来ますよっ。

今回作ってみたテストページ用水路くらぶ

ご自由にどうぞ