最終回となる今回は、テーマとして使ったSandbox特有のデザインテクニックについてご紹介したいと思います。
自動挿入されるclassを利用してデザインする
Sandboxテーマでは、テンプレートが呼び出される場面によって様々なclassが自動的に挿入されるようになっています。
たとえば、おで流WordPressテーマの作り方（1）のbodyタグは
<body class="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">
上記のようになっています。記事がトップページなのか、個別記事なのか、公開日付が何月何日なのか、どのカテゴリに属しているのか、といった情報がclassとなって挿入されています。
これを利用して、トップページと個別記事をがらりとデザインを変える、特定カテゴリだけを特別なデザインにする、といったことができます。
この仕掛けと同様に、個別記事のコメント欄のコメントをしてくれた人の名前を表示する帯の色を、管理者とゲスト（管理者以外の人）とで変えています。
ゲストのコメントの帯は
<li id="comment-xxxxx" class="comment c0 c-y2008 c-m06 c-d04 c-h00 alt">
<div class="comment-author vcard"><img /> <span class="fn n">guest</a></span></div>
<div class="comment-meta">コメント内容</div>
</li>
こんな簡略化すると感じに。管理者による書き込みは以下のようになっています。
<li id="comment-xxxxx" class="comment c1 byuser comment-author-admin bypostauthor c-y2008 c-m06 c-d04 c-h22">
<div class="comment-author vcard"><img /> <span class="fn n">Administrator</span></div>
<div class="comment-meta">コメント内容</div>
</li>
上記二つの比較から、管理者による書き込みには、comment-author-adminクラスがつくことが分かると思います。これを使って、
li.comment div.comment-author {
background-color: #E0E0E0;
}
li.comment-author-admin div.comment-author {
background-color: #94E0F4;
}
のようにして色を変えています。そのコメントが本当に管理者のものであるかどうか、ある程度ゲストさんからも分かる（なりすましされていない）というのがメリットですね。
Gravatarの画像サイズを変更
WordPress 2.5からアバターを表示するサービスGravatarに標準対応していますが、SandboxテーマもこのGravatarに対応しています。
コメント欄にGravatarに登録したメールアドレスを書くと、Gravatarに登録したアバターアイコンが表示されるのですが、このアイコンは標準で32x32のものが表示されます。
ところが僕はGravatarに80x80のアイコンを登録していたため、32x32のアイコンでは微妙にアンチエイリアスがかかってせっかくのドット絵が台無しに(´Д⊂
ということで、この表示されるアイコンのサイズを変えてやることにしました。
SandboxはGravatarのアイコンサイズをfunctions.php内で指定して取得している。デフォルトは32。サイズを変更したい場合はSandbox ver1.5.2だと267行目「32」を変更。ぼくは40にしてみました。
266: $email = get_comment_author_email();
267: $avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( "$email", "32" ) );
268: echo $avatar . ' <span class="fn n">' . $commenter . '</span>';
inputやtextareaのフォームもおしゃれに
CSSを使えば、コメントに使われているinputやtextareaのフォームもただの四角から離れて、画像を使っておしゃれに飾ることができます。
inputの背景に画像を指定してやればよいのですが、IE6とそれ以外のモダンブラウザでは指定の仕方を変えてやる必要があります。
というのも、IE6の場合フォームに長文を入力すると、背景画像がずれて左に行ってしまいます。そこで、backgroud-position: fixedを指定してやると、今度はモダンブラウザでは画像そのものが表示されなくなってしまいます。これを回避するには、IE6とモダンブラウザとで指定を変えてやります。
input#author {
background: transparent url(images/hogehoge.gif) no-repeat fixed 0 0;
}
* > input#author {
background: transparent url(images/hogehoge.gif) no-repeat;
}
これで完成、と思ったら、今度はIE7でも長文を入力する際に文字が画像の端っこに載ってしまって、フォームっぽくありません（サイドバーのフォームを処置せずこのままにしてありますので、IE7で試してみてください）。
Sandboxでは、コメントのフォームのところは以下のようになっています。
<div class="form-label"><label for="author">名前</label> <span class="required">*</span></div>
<div class="form-input"><input id="author" name="author" type="text" size="30" maxlength="20" tabindex="3" /></div>
<div class="form-label"><label for="email">メールアドレス</label> <span class="required">*</span></div>
<div class="form-input"><input id="email" name="email" type="text" size="30" maxlength="50" tabindex="4" /></div>
<div class="form-label"><label for="url">ウェブサイト</label></div>
<div class="form-input"><input id="url" name="url" type="text" value="" size="30" maxlength="50" tabindex="5" /></div>
<div class="form-label"><label for="comment">コメント</label></div>
<div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
<div class="form-submit"><input id="submit" name="submit" type="submit" value="コメントを書く" tabindex="7" accesskey="P" /><input type="hidden" name="comment_post_ID" value="864" /></div>
そこで、inputやtextareaを囲っているdiv（たとえばdiv.form-input）の背景画像に、フォームのような画像を指定してやり、inputやtextareaが真ん中にくるように位置を調整してやりました。
div#respond div.formcontainer form#commentform div.form-label {
padding-bottom: 0.5em;
height: 1em;
}
div#respond div.formcontainer form#commentform div.form-input {
padding: 12px;
width: 200px;
height: 40px;
background: transparent url(images/inputbox200x40.gif) no-repeat;
}
なかなかうまくいっているようです。
WordPressのデフォルトテーマになる、といってなかなかならないSandboxですが、組み込まれた仕掛けを使えば、まだまだ面白いデザインができそうです。
© 2008 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.
鼻からカフェモカ。
