19日にサトタカさん邸でカレーなる勉強会が開催されました。WordCamp Yokohama 2010 のスタッフの有志でサトタカさんちにお仕掛けお邪魔し、サトタカさんの特製カレーをいただき、デザインについて教えてもらうという、まったくもって WIN-WIN でない素晴らしい勉強会です。本当にありがとうございました。
カレーなる勉強会でデザインとアフィリエイトを学んできた
3
「デザイン」タグアーカイブ
おで流WordPressテーマの作り方（5）Sandbox特集
最終回となる今回は、テーマとして使ったSandbox特有のデザインテクニックについてご紹介したいと思います。
自動挿入されるclassを利用してデザインする
Sandboxテーマでは、テンプレートが呼び出される場面によって様々なclassが自動的に挿入されるようになっています。
たとえば、おで流WordPressテーマの作り方（1）のbodyタグは
|
1 |
<body <span class="kwrd">class</span>=<span class="str">"wordpress y2008 m06 d04 h23 single postid-856 s-y2008 s-m04 s-d25 s-h01 s-category-wordpress s-category-homepagetips s-tag-design s-tag-sandbox s-tag-theme s-tag-wordpress"</span>> |
上記のようになっています。記事がトップページなのか、個別記事なのか、公開日付が何月何日なのか、どのカテゴリに属しているのか、といった情報がclassとなって挿入されています。
これを利用して、トップページと個別記事をがらりとデザインを変える、特定カテゴリだけを特別なデザインにする、といったことができます。
この仕掛けと同様に、個別記事のコメント欄のコメントをしてくれた人の名前を表示する帯の色を、管理者とゲスト（管理者以外の人）とで変えています。
ゲストのコメントの帯は
|
1 |
<li id=<span class="str">"comment-xxxxx"</span> <span class="kwrd">class</span>=<span class="str">"comment c0 c-y2008 c-m06 c-d04 c-h00 alt"</span>> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"comment-author vcard"</span>><img /> <span <span class="kwrd">class</span>=<span class="str">"fn n"</span>>guest</a></span></div> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"comment-meta"</span>>コメント内容</div> |
|
1 |
</li> |
こんな簡略化すると感じに。管理者による書き込みは以下のようになっています。
|
1 |
<li id=<span class="str">"comment-xxxxx"</span> <span class="kwrd">class</span>=<span class="str">"comment c1 byuser comment-author-admin bypostauthor c-y2008 c-m06 c-d04 c-h22"</span>> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"comment-author vcard"</span>><img /> <span <span class="kwrd">class</span>=<span class="str">"fn n"</span>>Administrator</span></div> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"comment-meta"</span>>コメント内容</div> |
|
1 |
</li> |
上記二つの比較から、管理者による書き込みには、comment-author-adminクラスがつくことが分かると思います。これを使って、
|
1 |
li.comment div.comment-author { |
|
1 |
background-color: #E0E0E0; |
|
1 |
} |
|
1 |
|
1 |
li.comment-author-admin div.comment-author { |
|
1 |
background-color: #94E0F4; |
|
1 |
} |
のようにして色を変えています。そのコメントが本当に管理者のものであるかどうか、ある程度ゲストさんからも分かる（なりすましされていない）というのがメリットですね。
Gravatarの画像サイズを変更
WordPress 2.5からアバターを表示するサービスGravatarに標準対応していますが、SandboxテーマもこのGravatarに対応しています。
コメント欄にGravatarに登録したメールアドレスを書くと、Gravatarに登録したアバターアイコンが表示されるのですが、このアイコンは標準で32×32のものが表示されます。
ところが僕はGravatarに80×80のアイコンを登録していたため、32×32のアイコンでは微妙にアンチエイリアスがかかってせっかくのドット絵が台無しに(´Д⊂
ということで、この表示されるアイコンのサイズを変えてやることにしました。
SandboxはGravatarのアイコンサイズをfunctions.php内で指定して取得している。デフォルトは32。サイズを変更したい場合はSandbox ver1.5.2だと267行目「32」を変更。ぼくは40にしてみました。
|
1 |
<span class="lnum"> 266: </span> $email = get_comment_author_email(); |
|
1 |
<span class="lnum"> 267: </span> $avatar = str_replace( <span class="str">"class='avatar"</span>, <span class="str">"class='photo avatar"</span>, get_avatar( <span class="str">"$email"</span>, <span class="str">"32"</span> ) ); |
|
1 |
<span class="lnum"> 268: </span> echo $avatar . <span class="str">' <span class="fn n">'</span> . $commenter . <span class="str">'</span>'</span>; |
inputやtextareaのフォームもおしゃれに
CSSを使えば、コメントに使われているinputやtextareaのフォームもただの四角から離れて、画像を使っておしゃれに飾ることができます。
inputの背景に画像を指定してやればよいのですが、IE6とそれ以外のモダンブラウザでは指定の仕方を変えてやる必要があります。
というのも、IE6の場合フォームに長文を入力すると、背景画像がずれて左に行ってしまいます。そこで、backgroud-position: fixedを指定してやると、今度はモダンブラウザでは画像そのものが表示されなくなってしまいます。これを回避するには、IE6とモダンブラウザとで指定を変えてやります。
|
1 |
input#author { |
|
1 |
background: transparent url(images/hogehoge.gif) no-repeat <span class="kwrd">fixed</span> 0 0; |
|
1 |
} |
|
1 |
|
1 |
* > input#author { |
|
1 |
background: transparent url(images/hogehoge.gif) no-repeat; |
|
1 |
} |
|
1 |
これで完成、と思ったら、今度はIE7でも長文を入力する際に文字が画像の端っこに載ってしまって、フォームっぽくありません（サイドバーのフォームを処置せずこのままにしてありますので、IE7で試してみてください）。
Sandboxでは、コメントのフォームのところは以下のようになっています。
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-label"</span>><label <span class="kwrd">for</span>=<span class="str">"author"</span>>名前</label> <span <span class="kwrd">class</span>=<span class="str">"required"</span>>*</span></div> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-input"</span>><input id=<span class="str">"author"</span> name=<span class="str">"author"</span> type=<span class="str">"text"</span> size=<span class="str">"30"</span> maxlength=<span class="str">"20"</span> tabindex=<span class="str">"3"</span> /></div> |
|
1 |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-label"</span>><label <span class="kwrd">for</span>=<span class="str">"email"</span>>メールアドレス</label> <span <span class="kwrd">class</span>=<span class="str">"required"</span>>*</span></div> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-input"</span>><input id=<span class="str">"email"</span> name=<span class="str">"email"</span> type=<span class="str">"text"</span> size=<span class="str">"30"</span> maxlength=<span class="str">"50"</span> tabindex=<span class="str">"4"</span> /></div> |
|
1 |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-label"</span>><label <span class="kwrd">for</span>=<span class="str">"url"</span>>ウェブサイト</label></div> |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-input"</span>><input id=<span class="str">"url"</span> name=<span class="str">"url"</span> type=<span class="str">"text"</span> <span class="kwrd">value</span>=<span class="str">""</span> size=<span class="str">"30"</span> maxlength=<span class="str">"50"</span> tabindex=<span class="str">"5"</span> /></div> |
|
1 |
|
1 |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-label"</span>><label <span class="kwrd">for</span>=<span class="str">"comment"</span>>コメント</label></div> |
|
1 |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-textarea"</span>><textarea id=<span class="str">"comment"</span> name=<span class="str">"comment"</span> cols=<span class="str">"45"</span> rows=<span class="str">"8"</span> tabindex=<span class="str">"6"</span>></textarea></div> |
|
1 |
|
1 |
<div <span class="kwrd">class</span>=<span class="str">"form-submit"</span>><input id=<span class="str">"submit"</span> name=<span class="str">"submit"</span> type=<span class="str">"submit"</span> <span class="kwrd">value</span>=<span class="str">"コメントを書く"</span> tabindex=<span class="str">"7"</span> accesskey=<span class="str">"P"</span> /><input type=<span class="str">"hidden"</span> name=<span class="str">"comment_post_ID"</span> <span class="kwrd">value</span>=<span class="str">"864"</span> /></div> |
|
1 |
そこで、inputやtextareaを囲っているdiv（たとえばdiv.form-input）の背景画像に、フォームのような画像を指定してやり、inputやtextareaが真ん中にくるように位置を調整してやりました。
|
1 |
div#respond div.formcontainer form#commentform div.form-label { |
|
1 |
padding-bottom: 0.5em; |
|
1 |
height: 1em; |
|
1 |
} |
|
1 |
|
1 |
div#respond div.formcontainer form#commentform div.form-input { |
|
1 |
padding: 12px; |
|
1 |
width: 200px; |
|
1 |
height: 40px; |
|
1 |
background: transparent url(images/inputbox200x40.gif) no-repeat; |
|
1 |
} |
なかなかうまくいっているようです。
WordPressのデフォルトテーマになる、といってなかなかならないSandboxですが、組み込まれた仕掛けを使えば、まだまだ面白いデザインができそうです。
おで流WordPressテーマの作り方（4）
脱線続きでしたが、いよいよCSSを書いてデザインしていきます。
7. CSSをリセットする
ブラウザはHTML/XHTMLを描画する際にデフォルトの見栄えを持っていますが、その見栄えはブラウザごとに微妙に異なります（入力フォームを見ると分かりますよね。Internet ExplorerとSafariのフォームは全然違います）。
このデフォルトスタイルをリセットして、ブラウザごとの設定を統一するのがこの項目の目的です。
以前は下記のようにユニバーサルセレクタ（*）を使ってリセットする方法が用いられていましたが、
|
1 |
* { |
|
1 |
margin: 0; |
|
1 |
padding: 0; |
|
1 |
line-height: 1; |
|
1 |
border: 0; |
|
1 |
text-decoration: none; |
|
1 |
font-size: 100%; |
|
1 |
} |
最近では必要な要素だけをリセットするのが望ましいとされています。
このあたりを参考にして、以下のようにリセットしてみました。
最近は、ブラウザが持っているデザインを活かすべきだということで、CSSをリセットしない作り方をするサイトも増えてきているようです。ということは、サイト訪問者のブラウザによって見栄えが微妙に違ってくることになります。
サイト製作側のポリシーなんてサイト訪問者に押し付けてはいけないし、訪問者にはブラウザによらず同じ見栄えで見てほしいと思います。また、ブラウザごとの見栄えの差異に頭を悩ませるのは嫌だったので、今回はリセットを選択しています。
8. XHTMLの構造を見極める
CSSでデザインしていくにあたって、XHTML構造を把握しておくことが大事です。どのタグ、id、classにスタイルを加えればよいのか、というあたりをつけられるからです。
SandboxテーマのXHTML構造は大雑把に表現すると、以下のようになっています。
※#top-imageのdivはぼくが追加したもので、オリジナルのSandboxにはありません。
この構造をデザインモックに近づけるため、以下のようにもっていきます。
この図から、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のみでフロートを解除できるよう開発されたものです。
様々な方法が開発されていますが、今回はモダンブラウザを対象にしているということで、
|
1 |
div#フロートしたボックスの親要素 { |
|
1 |
zoom: 100%; |
|
1 |
} |
|
1 |
|
1 |
div#フロートしたボックスの親要素:after { |
|
1 |
content: <span class="str">""</span>; |
|
1 |
clear: both; |
|
1 |
display: block; |
|
1 |
} |
こんな感じにしてみました。これをフロートしているボックスの親にあたるボックスに指定してやればOKです（参考：スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－。上記方法だとNetscapeで不具合があるようですが、すでに開発終了しており、Firefoxへの誘導がされていること、アクセスログを見てもほとんどこのブラウザからのアクセスがないことから、問題視はしていません。）
9.ロゴを画像置換する
情報と見た目の分離を（過度に？）徹底するための方法として、ロゴ等をXHTMLではテキストで記載し、CSSで画像を定義して置き換える画像置換というテクニックがあります。
方法論やSEOの観点などから様々議論されていますが、以下のようなメリットとデメリットがあります。
メリット
- XHTMLに依らず、画像を使った多彩なデザインが実現できる
- （ロゴなど）プリインストールフォントが貧弱な日本語環境でフォントを擬似的に実現できる
- CSSを切り替えることで、XHTMLを変更せずに画像を変更できる
デメリット
- （方法によっては）CSS有効でJavaScript無効の環境で何も表示されなくなる＝アクセシビリティ上問題が出てしまう
- （やろうと思えば）テキストの情報とはまったく無関係の画像を表示できるため、SEOスパムと判定される恐れがある
ということが言われています。画像置換を行ったからといって、ただちに検索エンジンからスパム扱いされるわけではない一方で、alt属性をきちんと付与したimgタグを書いたとしてもSEO的に不利になることはないという考え方から、画像置換を使わないアプローチをするサイトも増えてきているようです。
今回はSandboxのテーマは後から変更することのないように、またデザインをCSSで差し替えられるように、最低限に止めつつ画像置換を使っています。
画像置換の手法は日々改良が加えられており、今回採用したのはGilder/Levin Methodの改良版です。
|
1 |
<h1 id=<span class="str">"blog-title"</span>><a href=<span class="str">"<?php echo get_option('home') ?>/"</span> title=<span class="str">"<?php bloginfo('name') ?>"</span> rel=<span class="str">"home"</span>><?php bloginfo(<span class="str">'name'</span>) ?><span></span></a></h1> |
|
1 |
h1#blog-title { |
|
1 |
position: relative; |
|
1 |
float: left; |
|
1 |
width: 230px; |
|
1 |
height: 62px; |
|
1 |
} |
|
1 |
|
1 |
h1#blog-title span { |
|
1 |
cursor: hand; |
|
1 |
display: block; |
|
1 |
position: absolute; |
|
1 |
top: 0; |
|
1 |
left: 0; |
|
1 |
width: 230px; |
|
1 |
height: 62px; |
|
1 |
background: url(images/title.gif) no-repeat; |
|
1 |
} |
空のspanタグを追加する必要があるのが若干気持ち悪いですが、画像無効・CSS有効の際にはaタグの中の文字が表示されるため、弱点を克服したものになっています。
ただし、spanタグを拡大して文字を塗りつぶしているような手法になるので、spanタグの背景に指定する画像が透過していると下にある文字が透けて見えてしまうのでご注意を。
その他の画像置換はmezzoblue § Testing Grounds: Revised Image Replacementから。画像置換は英語でImage Replacementといいます。このワードで検索しても様々な情報が得られるでしょう。
次回はいよいよ最終回。Sandboxに緻密に組み込まれた仕掛けを利用したテクニックをいくつかご紹介します。
おで流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 分割管理の方法でも参考にさせてもらっています。こちらも、上記と同じで、どこに何のプロパティがあるか分かりやすくするために行っています。
ということで、僕が採用したこのテーマの構成は以下のようになっています。
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テーマの作り方（2）
1回目ではテーマのイメージをスケッチし、モックアップとなる画像を作成するところまで行いましたが、今回からはこの画像を使って組み立てていく作業に入ります。
3.画像ファイルをスライスする
2で作成した画像ファイルをお手持ちのスライスツールを使って裁断し、部品ごとに分解（個別の画像ファイルに）します。PhotoshopやFireworksにはスライスツールが搭載されていますし、こんなに高価なアプリケーションではなくとも、
などでスライスすることも可能です。
また最近のトレンドとして、CSS Spriteと呼ばれる手法を使うサイトも増えてきています。これは画像ファイルをスライスせず、一枚の画像を使ってCSSで位置をずらして表示する手法で、HTTPリクエストを減らす効果が期待できます。反面複雑なデザインを組むためにはCSSのコーディングに頭を悩ませるかもしれません。参考：Website Performance | CSS Sprite Generator
複雑なコーディングに頭を悩ませたくなかったので、今回はスライスしています。
本来なら、ここでテーマのテンプレートを書くという工程が入るのですが、今回はSandboxのテンプレートを使うので、省略しています。codexを見ながら、テンプレートタグを埋めていくのも楽しいとは思うのですが、一般的なブログに必要な要素ってだいたい決まっているので、特別変わったサイトを作るのでもなければ、既存のテーマのテンプレートを流用したほうが時間が節約できていいと思っています。
4.ターゲットブラウザの決定
CSSのコーディングに入る前に、ターゲットとするブラウザを決めておきます。デザインの視点で言うと、どのブラウザなら正常に見えるようにするのか、ということです。
基本的にはモダンブラウザと言われるFirefox 2および 3、Opera 9、Safari 2および3で正しく表示されるようにコーディング、Internet Explorer 6および7向けにいくらかハックする、という方針が一番作りやすいのではないかなと思っています。
これよりも古いブラウザをターゲットに入れれば入れるほど、CSSでハックを多用したり、複数のCSSを用意したりと、手間と工数が増大していくことを覚悟しないといけないからです。
クライアントのサイトである場合には、クライアントの意向が第一ですが、個人サイトである場合や今までに運用していたサイトである場合は、それまでのアクセス数を元にターゲットブラウザを決めてもよいと思います。
このサイトのアクセスは7割がIEで、そのうち95%がIE6とIE7です。IE7の割合はすでに2008年4月末で4割を超えている状況です。海外のサイトではすでにIE6をターゲットから外すサイトも出てきているようですが、念のためということで今回は入れてみました。
ターゲットから外したブラウザに対してはどうするかというと、CSSを読み込ませないようにします。テーマのテンプレートに書かれたXHTMLがきちんとしていれば、最低限コンテンツの内容は伝わるからです。
Sandboxテーマはstyle.cssを
|
1 |
<link rel=<span class="str">"stylesheet"</span> type=<span class="str">"text/css"</span> href=<span class="str">"http://www.example.com/wordpress/wp-content/themes/sandbox/style.css"</span> /> |
というコードで読み込んでおり、さらにstyle.cssの中で
|
1 |
<span class="preproc">@import</span> url(<span class="str">'sandbox-layouts/2c-l.css'</span>); |
@importを使って、様々なCSSを読み込む形になります。@importの記述の仕方によっては古いブラウザにCSSを読み込ませないようにできます。上の記述だとWindowsのNN4、MacのIE4と5、NN4はCSSを読み込めません。（参考：Complex @import rules）
次回はいよいよSandboxをCSSでデザインしていきます。ということでもうしばらくCSSのお話が続きます。