おで流WordPressテーマの作り方（4）

脱線続きでしたが、いよいよCSSを書いてデザインしていきます。

7. CSSをリセットする

ブラウザはHTML/XHTMLを描画する際にデフォルトの見栄えを持っていますが、その見栄えはブラウザごとに微妙に異なります（入力フォームを見ると分かりますよね。Internet ExplorerとSafariのフォームは全然違います）。

このデフォルトスタイルをリセットして、ブラウザごとの設定を統一するのがこの項目の目的です。

以前は下記のようにユニバーサルセレクタ（*）を使ってリセットする方法が用いられていましたが、

* {

  margin: 0;

  padding: 0;

  line-height: 1;

  border: 0;

  text-decoration: none;

  font-size: 100%;

最近では必要な要素だけをリセットするのが望ましいとされています。

このあたりを参考にして、以下のようにリセットしてみました。

reset.css

CSSをリセット

最近は、ブラウザが持っているデザインを活かすべきだということで、CSSをリセットしない作り方をするサイトも増えてきているようです。ということは、サイト訪問者のブラウザによって見栄えが微妙に違ってくることになります。

サイト製作側のポリシーなんてサイト訪問者に押し付けてはいけないし、訪問者にはブラウザによらず同じ見栄えで見てほしいと思います。また、ブラウザごとの見栄えの差異に頭を悩ませるのは嫌だったので、今回はリセットを選択しています。

8. XHTMLの構造を見極める

CSSでデザインしていくにあたって、XHTML構造を把握しておくことが大事です。どのタグ、id、classにスタイルを加えればよいのか、というあたりをつけられるからです。

SandboxテーマのXHTML構造は大雑把に表現すると、以下のようになっています。

SandboxのXHTML構造

※#top-imageのdivはぼくが追加したもので、オリジナルのSandboxにはありません。

この構造をデザインモックに近づけるため、以下のようにもっていきます。

20080515b

この図から、div#containerを左に、div.sidebarを右にフロートし、footerの手前でフロートを解除してやればよさそうです。また、これだけだとdiv#containerの包含要素（主にブログの本文）が少ない（短い）場合に2つに別れているサイドバーが横に二段並んでしまうので、div#primary、#secondaryそれぞれでフロートをクリアして、再度右にフロートしています。

（注：フロート、フロートと書いているのはfloatは必ずしも回り込みをするものではないからです。通常の流れから取り除いて、左または右に寄せるものと考えると誤解がないと思います。参考：てんぽ : floatは「回り込み」ではない）

このようにfloatで段組してまとめたのが以下のファイル。大枠のレイアウトはすべてこのファイルにまとめています。

layout-2column-right-sidebar.css

フロートの解除については、いわゆるclearfixの手法を使っています。

これはページ内でフロートを繰り返すことで発生するレイアウト崩れを防ぐ手法で、従来<div style="clear: both;"></div>という空ボックスをXHTML内に書いてフロートを解除する方法がよく取られていましたが、見た目の制御のために情報構造上まったく意味のないコードを書くことを嫌う流れから、CSSのみでフロートを解除できるよう開発されたものです。

様々な方法が開発されていますが、今回はモダンブラウザを対象にしているということで、

div#フロートしたボックスの親要素 {

  zoom: 100%;

div#フロートしたボックスの親要素:after {

  content: "";

  clear: both;

  display: block;

こんな感じにしてみました。これをフロートしているボックスの親にあたるボックスに指定してやればOKです（参考：スタイルシートをめぐる冒険: clearfixの決定版を作る－モダンブラウザ編－。上記方法だとNetscapeで不具合があるようですが、すでに開発終了しており、Firefoxへの誘導がされていること、アクセスログを見てもほとんどこのブラウザからのアクセスがないことから、問題視はしていません。）

9.ロゴを画像置換する

情報と見た目の分離を（過度に？）徹底するための方法として、ロゴ等をXHTMLではテキストで記載し、CSSで画像を定義して置き換える画像置換というテクニックがあります。

方法論やSEOの観点などから様々議論されていますが、以下のようなメリットとデメリットがあります。

メリット

XHTMLに依らず、画像を使った多彩なデザインが実現できる
（ロゴなど）プリインストールフォントが貧弱な日本語環境でフォントを擬似的に実現できる
CSSを切り替えることで、XHTMLを変更せずに画像を変更できる

デメリット

（方法によっては）CSS有効でJavaScript無効の環境で何も表示されなくなる＝アクセシビリティ上問題が出てしまう
（やろうと思えば）テキストの情報とはまったく無関係の画像を表示できるため、SEOスパムと判定される恐れがある

ということが言われています。画像置換を行ったからといって、ただちに検索エンジンからスパム扱いされるわけではない一方で、alt属性をきちんと付与したimgタグを書いたとしてもSEO的に不利になることはないという考え方から、画像置換を使わないアプローチをするサイトも増えてきているようです。

今回はSandboxのテーマは後から変更することのないように、またデザインをCSSで差し替えられるように、最低限に止めつつ画像置換を使っています。

画像置換の手法は日々改良が加えられており、今回採用したのはGilder/Levin Methodの改良版です。

<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?><span></span></a></h1>

h1#blog-title {

  position: relative;

  float: left;

  width: 230px;

  height: 62px;

h1#blog-title span {

  cursor: hand;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 230px;

  height: 62px;

  background: url(images/title.gif) no-repeat;

空のspanタグを追加する必要があるのが若干気持ち悪いですが、画像無効・CSS有効の際にはaタグの中の文字が表示されるため、弱点を克服したものになっています。

ただし、spanタグを拡大して文字を塗りつぶしているような手法になるので、spanタグの背景に指定する画像が透過していると下にある文字が透けて見えてしまうのでご注意を。

その他の画像置換はmezzoblue § Testing Grounds: Revised Image Replacementから。画像置換は英語でImage Replacementといいます。このワードで検索しても様々な情報が得られるでしょう。

次回はいよいよ最終回。Sandboxに緻密に組み込まれた仕掛けを利用したテクニックをいくつかご紹介します。