これまでに用意したモックアップと、スライスした画像ファイルを使って、CSSでデザインを形作っていきます。
5. ローカル環境を作ろう
公開しているサイトを使ってデザインしていくことももちろんできますが、デザイン途中のサイトの様子が見えてしまったりしていろいろとカッコ悪いので(笑)、ローカル環境（お手持ちのPC/Mac/Linux等）にテスト用のWordPressを構築することをオススメします。
参考：Eclipse + XAMPP で WordPress の開発環境を作ろう@hiromasa.zone
CSSのコーディングもそのままEclipseで続けてもよいのですが、それなりにメモリ食いしん坊なアプリなので、僕はFirefoxにアドオンのFirebugを入れてXHTMLの構造を把握しながらCSSを書いていきました。下の写真のように、その要素に設定されているスタイルを視覚的に把握できるので、設定状況を理解しやすいと思います。
6. スタイルシートコーディングのルールを決める
スタイルシートを書いていく前に、コーディングルールを明確にしておくとよいと思います。インデントはTABにするのか、空白スペースなのか、widthはmarginより先に書くのか、後に書くのか、といったことです。
一人で書く場合はもちろん、複数人で共同作業するときはなおさら、このようなルールを決めておいたほうが、後からCSSをメンテナンスしようとしたときの見易さ、理解のしやすさが劇的に変わってきます。
CSSプロパティのABC順に書く、よく使うものを前に書く、などいろいろ書き方はありますが、長いものには巻かれろ（？）ということで僕が参考にしたのはこちら
参考：スタイルシートを書く時のガイドライン@2xUP.org
2xUPさんはCSS 分割管理の方法でも参考にさせてもらっています。こちらも、上記と同じで、どこに何のプロパティがあるか分かりやすくするために行っています。
参考：CSS 分割管理の実践編@2xUP.org
ということで、僕が採用したこのテーマの構成は以下のようになっています。
wp-content
└themes
└ sandbox
├style.css
└sandbox-css
├common.css
├fonts.css
├layout-2column-right-sidebar.css
├module.css
├reset.css
└theme
└dotluv
└theme-dotluv.css
CSSを分割管理すると、ディレクトリの中がCSSだらけになってしまうので、sandbox-cssというディレクトリを作って、CSSをその中にまとめました。
common.cssやfonts.css、module.cssにはテーマに限らず自分が好きなスタイル（行間だとか、段落とかインデントとか）を入れて、テーマ独自のスタイルはthemeディレクトリの中のtheme-dotluv.cssに入れています。
いずれ、別のテーマとリアルタイムにデザインを切り替えできればいいなと思って、こんな構成にしています。
前置きが長くなりましたが、次回こそいよいよごりごりとCSSを書いていきます。
おで流WordPressテーマの作り方（3）
これまでに用意したモックアップと、スライスした画像ファイルを使って、CSSでデザインを形作っていきます。
5. ローカル環境を作ろう
公開しているサイトを使ってデザインしていくことももちろんできますが、デザイン途中のサイトの様子が見えてしまったりしていろいろとカッコ悪いので(笑)、ローカル環境（お手持ちのPC/Mac/Linux等）にテスト用のWordPressを構築することをオススメします。
参考：Eclipse + XAMPP で WordPress の開発環境を作ろう@hiromasa.zone
CSSのコーディングもそのままEclipseで続けてもよいのですが、それなりにメモリ食いしん坊なアプリなので、僕はFirefoxにアドオンのFirebugを入れてXHTMLの構造を把握しながらCSSを書いていきました。下の写真のように、その要素に設定されているスタイルを視覚的に把握できるので、設定状況を理解しやすいと思います。
6. スタイルシートコーディングのルールを決める
スタイルシートを書いていく前に、コーディングルールを明確にしておくとよいと思います。インデントはTABにするのか、空白スペースなのか、widthはmarginより先に書くのか、後に書くのか、といったことです。
一人で書く場合はもちろん、複数人で共同作業するときはなおさら、このようなルールを決めておいたほうが、後からCSSをメンテナンスしようとしたときの見易さ、理解のしやすさが劇的に変わってきます。
CSSプロパティのABC順に書く、よく使うものを前に書く、などいろいろ書き方はありますが、長いものには巻かれろ（？）ということで僕が参考にしたのはこちら
参考：スタイルシートを書く時のガイドライン@2xUP.org
2xUPさんはCSS 分割管理の方法でも参考にさせてもらっています。こちらも、上記と同じで、どこに何のプロパティがあるか分かりやすくするために行っています。
参考：CSS 分割管理の実践編@2xUP.org
ということで、僕が採用したこのテーマの構成は以下のようになっています。
CSSを分割管理すると、ディレクトリの中がCSSだらけになってしまうので、sandbox-cssというディレクトリを作って、CSSをその中にまとめました。
common.cssやfonts.css、module.cssにはテーマに限らず自分が好きなスタイル（行間だとか、段落とかインデントとか）を入れて、テーマ独自のスタイルはthemeディレクトリの中のtheme-dotluv.cssに入れています。
いずれ、別のテーマとリアルタイムにデザインを切り替えできればいいなと思って、こんな構成にしています。
前置きが長くなりましたが、次回こそいよいよごりごりとCSSを書いていきます。
このブログで関連すると思われる他の投稿