今回は、僕のスタイル編集について紹介します。前回の今時の WordPress サイト構築法 (テンプレート編)の続きですので、併せて読むと理解しやすいかもしれません。
まず、WordPress のテーマでは、テーマフォルダのstyle.cssというファイルにスタイルを記述するのが基本です。Sandbox では、構造をそのまま使えるのであれば、miyoshiさんの記事に書かれてあるように、テンプレートの継承を利用して、テーマを作成する方が望ましいのですが、商用サイトを作る場合は、どうしても構造を変更してしまう事がほとんどです。
ですので、あくまでベストの方法ではなく、僕の方法であるという事だけ先に述べておきます。
スタイル編集の下準備
では、先ずはディレクトリ構造を説明します。sandbox ディレクトリの中に、以下のディレクトリを作成します。
- css - CSS ファイルを格納します
- img - サイトデザインで使用する画像を格納します
- js - サイトデザインで使用する JavaScript ファイルを格納します
よくある形ですが、この様なディレクトリを作成します。
そして、style.css には、
-
@import url("./css/default.css"); /* defalt style CSS */
-
@import url("./css/reset.css"); /* browser default style resetting CSS */
-
@import url("./css/hack.css"); /* CSS filters and browser specific CSS */
-
@import url("./css/fonts.css"); /* YUI fonts CSS */
この様に記述しています。つまり、4つの CSS ファイルをインポートし、かつ古いブラウザには、クラッシュを防ぐために CSS を読み込ませないようにしています。
楽に、厳格に、そして未来を見据えてた CSS 管理
さて、4つのCSSですが、基本となるスタイルは default.css に記述します。これは、ブラウザによる差異を気にせず、CSS の仕様に従った正しいCSSを書きます。
次に、reset.css は、Eric Meyer氏の方法を参考に、多少手を加えたものを使っています。1ピクセルのずれも許せないWebデザイナのためにResetting Againという記事でも紹介されていますが、ブラウザ毎の特有のスタイルの差を取り除いてくれます。
hack.css は、ブラウザ独自のCSSバグを潰す為のCSSです。これについては、詳しく後述しますが、正しいスタイルとバグを潰す為のCSSを分けているのは、管理を容易にするのと、恒久的に正しく表示される様にする為です。
最後に font.css ですが、これは、YUI の Font CSS を利用させてもらっています。デザインによっては、px 単位でフォントサイズを指定する事も仕方ない場合がありますが、基本的には、フォントサイズを指定したくはありません。なので、折衷案として、font.css でブラウザ毎のサイズの差を無くして、%指定しようという方針です。
| If you want this size in pixels (px) | Declare this percent (%) |
|---|---|
| 10 | 77 |
| 11 | 85 |
| 12 | 93 (was 93) |
| 13 | 100 |
| 14 | 108 (was 107) |
| 15 | 116 (was 114) |
| 16 | 123.1 (was 122) |
| 17 | 131 (was 129) |
| 18 | 138.5 (was 136) |
| 19 | 146.5 (was 144) |
| 20 | 153.9 (was 152) |
| 21 | 161.6 (was 159) |
| 22 | 167 |
| 23 | 174 |
| 24 | 182 |
| 25 | 189 |
| 26 | 197 |
この表にあるように、YUI Font CSS を利用すると、100% で 13px になります。
ブラウザのCSSバグを潰す方法
CSS のブラウザ毎のバグを潰すのに、僕はCSS Browser Selectorを利用しています。これは、JavaScript でブラウザの判別を行ない、HTML の html 要素に、ブラウザやOSの名前のclassを埋め込んでくれるというものです。
例えば、Mac で Opera9 を使っている場合だと、class="opera opera9 mac js" となります。
default.css にこのように記述していているが、
-
div.post {
-
margin: 0 40px;
-
}
-
div#container {
-
margin: 20px 0 0 0; padding: 0;
-
}
IE6 や IE7 のCSS解釈のバグで、ズレが生じた場合、hack.css に
-
.ie6 div.post {
-
margin: 0 20px;
-
}
-
.ie7 div#container {
-
margin: 0; padding: 20px 0 0 0;
-
}
頭に .ie6 (もちろん html.ie6 でも良い) の様に記述する事によって、CSS 優先度の関係で、IE6 であれば、 .ie6 に書かれた内容に、IE7 であれば .ie7 に書かれた内容で default.css に記述されたスタイルを上書きしてくれるのです。
覚えておきたいテンプレートタグ
独自のJavaScriptを読み込む場合は、header.php にファイルパスを指定して読み込むのですが、ドメインを変更した場合でも一々修正せずに済むように、WPのテンプレートタグを使います。
-
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/css_browser_selector.js"></script>
bloginfo('stylesheet_directory') は、使用しているテーマのディレクトリまでのパスを補完してくれます。
サイト画像も img タグで埋込む場合は、このテンプレートタグを利用した方が管理が楽になるでしょう。
同様の理由で、css で背景画像などを読み込む場合は、相対パスを使って指定するのが望ましいです。
-
div#header {
-
background: transparent url("../img/header.gif") center top no-repeat scroll;
-
color: #fff;
-
}
の様に指定します。
まとめ
スタイルの編集やその管理については、色々な方法がありますが、多人数ではなく一人で管理する場合だと、これくらいが丁度良いと考えています。
大人数であれば、Subversion を利用するなどのバージョン管理を行ったり、CSS を更にモジュール毎に細分化したりなどが必要かもしれません。
さて、次回はどうするかまだ決ってませんが、プラグインあたりについてでも書こうかと思っています。ここを読んでくれている方で、何かリクエストがあればお気軽にお寄せ下さい。
