Odysseygate.com

これまでに用意したモックアップと、スライスした画像ファイルを使って、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を書いていきます。

今回の「おでげーと」リニューアルにあたってSandbox をベースにデザインをしてみました。

配布されているテーマファイルをthemes フォルダに入れるだけで様々なデザインを楽しめるのがWordPress の醍醐味ではあるのですが、できることなら世界に一つしかない自分のサイトなのだから、自らデザインしてもっとWordPress を楽しんで欲しいと思います。

その一助になることを願って、今回のリニューアルにあたって僕が行ったテーマ作成の流れをまとめてみました。

（WordPress と銘打ってはいますが、通常のサイトデザイン/作成の流れとしてみてもらってもいいかもしれません。）

1.テーマのイメージスケッチを書く

サイトでもっとも訴えたいのは何か、どういうサイトにしたいのか、（クライアントから依頼されたサイトであれば）クライアントのイメージはどのようか、というようなことを考えながらイメージスケッチを描きます。思うままにがりがり書きます。

ニュース系サイトなら情報が詰まって見えるようにとか、学校のサイトなら白基調の明るいサイトで。黒ベースにすると裏サイトになっちゃいます。

この段階でいくつものステキなデザインが沸き、いくつも消えていきます。

個人サイトのデザインであれば、この段階は自分の好きなデザインでいいわけです。絵の得意な人は絵を、写真の得意な人は写真を、猫の好きな人は猫をフィーチャーしてデザインできるでしょう。

僕の好きなものはなんだろう？他のサイトと自分のサイトを分け隔てられるものは？そう、ドット絵しかない。こんな風に考えながら決めていきます。

2.イメージスケッチを用いてデザインを画像化

1で描いたイメージスケッチをファイル化（画像化）します。PhotoshopとかFireworksとか使い慣れた画像ファイル作成ツールを使えばいいと思います。ぼくはドット絵なのでペイントでもできちゃいます。

画像化するにあたって、上の写真にもあるようにある程度のフレームワークを考えておきます。横幅は何ピクセルにするのか、サイドバーは何ピクセルなのか、といったところですね。

一昔前は800×600のディスプレイ環境でも見られるよう、800px以下（もしくはリキッド）でデザインするのが当たり前とされていましたが、最近は1000px近い横幅を持つサイトも増えてきました。ケータイもWVGA+(854pxとか)の時代ですしね。

こちらのページに大手のサイトの幅が何pxか調べたものが掲載されているので参考にしてみるとよいでしょう。
今webサイトは幅何pxで製作されているのか | Liquid Paper Clips

この後のコーディング作業の中でもいろいろアイディアが沸いたり、技術的にハードルが高すぎて諦めたりするところも出てくると思うので、完璧な最終形を作らず、大体にしています。

次回は、これをスライスして、コーディング作業に入ります。