8bitodyssey.com » sandbox

おで流WordPressテーマの作り方（5）Sandbox特集

おで — Sun, 08 Jun 2008 04:47:33 +0000

最終回となる今回は、テーマとして使ったSandbox特有のデザインテクニックについてご紹介したいと思います。

自動挿入されるclassを利用してデザインする

Sandboxテーマでは、テンプレートが呼び出される場面によって様々なclassが自動的に挿入されるようになっています。

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となって挿入されています。

これを利用して、トップページと個別記事をがらりとデザインを変える、特定カテゴリだけを特別なデザインにする、といったことができます。

この仕掛けと同様に、個別記事のコメント欄のコメントをしてくれた人の名前を表示する帯の色を、管理者とゲスト（管理者以外の人）とで変えています。

ゲストのコメントの帯は

"comment-xxxxx" class="comment c0 c-y2008 c-m06 c-d04 c-h00 alt">

class="comment-author vcard"> class="fn n">guest

class="comment-meta">コメント内容

こんな簡略化すると感じに。管理者による書き込みは以下のようになっています。

"comment-xxxxx" class="comment c1 byuser comment-author-admin bypostauthor c-y2008 c-m06 c-d04 c-h22">

class="comment-author vcard"> class="fn n">Administrator

class="comment-meta">コメント内容

上記二つの比較から、管理者による書き込みには、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 . ' ' . $commenter . '';

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では、コメントのフォームのところは以下のようになっています。

class="form-label">for="author">名前 class="required">*

class="form-input">"author" name="author" type="text" size="30" maxlength="20" tabindex="3" />

class="form-label">for="email">メールアドレス class="required">*

class="form-input">"email" name="email" type="text" size="30" maxlength="50" tabindex="4" />

class="form-label">for="url">ウェブサイト

class="form-input">"url" name="url" type="text" value="" size="30" maxlength="50" tabindex="5" />

class="form-label">for="comment">コメント

class="form-textarea">"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>>

class="form-submit">"submit" name="submit" type="submit" value="コメントを書く" tabindex="7" accesskey="P" />"hidden" name="comment_post_ID" value="864" />

そこで、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ですが、組み込まれた仕掛けを使えば、まだまだ面白いデザインができそうです。

© 2012 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.

鼻からカフェモカ。

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

おで — Mon, 02 Jun 2008 15:15:48 +0000

脱線続きでしたが、いよいよ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をリセットしない作り方をするサイトも増えてきているようです。ということは、サイト訪問者のブラウザによって見栄えが微妙に違ってくることになります。

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

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の手法を使っています。

これはページ内でフロートを繰り返すことで発生するレイアウト崩れを防ぐ手法で、従来

という空ボックスを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の改良版です。

"blog-title">"/" title="" rel="home">'name') ?>

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に緻密に組み込まれた仕掛けを利用したテクニックをいくつかご紹介します。

鼻からカフェモカ。

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

おで — Sun, 04 May 2008 17:39:33 +0000

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

鼻からカフェモカ。

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

おで — Thu, 01 May 2008 16:06:36 +0000

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を

"stylesheet" type="text/css" href="http://www.example.com/wordpress/wp-content/themes/sandbox/style.css" />

というコードで読み込んでおり、さらにstyle.cssの中で

@import url('sandbox-layouts/2c-l.css');

@importを使って、様々なCSSを読み込む形になります。@importの記述の仕方によっては古いブラウザにCSSを読み込ませないようにできます。上の記述だとWindowsのNN4、MacのIE4と5、NN4はCSSを読み込めません。（参考：Complex @import rules）

次回はいよいよSandboxをCSSでデザインしていきます。ということでもうしばらくCSSのお話が続きます。

鼻からカフェモカ。

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

おで — Thu, 24 Apr 2008 16:32:56 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鼻からカフェモカ。