ひとに寄り添うデザインの追求
12月7日に行なわれた、第3回ウェブテコで発表した、「Microformats 入門」というプレゼンのスライドPDFを公開します。
尚、公開に際して、誤字の修正と、スライドの最後に Appendix としてリンク集を付け加えました。
ですので、解説なしでも、それなりに分かりやすい感じになっているかと思います。
Creative Commons 表示-継承 2.1 日本 License今回は、どんどん実例紹介をしていくか、ひたすらコードを紹介するか悩んだのですが、全体を俯瞰してもらうよりも、実際のコード例を見てもらった方が理解が早いかなと思い、終盤までひたすらマイクロフォーマットとそのプロパティの紹介とコードサンプルをお見せして、解説し続けました。
聞きづらかったかと思いますが、みなさん最後までおつきあい頂いて、本当にありがとうございました。
また、北方さんどうもありがとうございました。
他の発表者のスライドも北方さんのブログに纏められておりますので、どうぞ 
11月2日に行なわれた、第2回ウェブテコで発表した、「IEのため」だけじゃないCSS対策。というプレゼンのスライドPDFを公開します。
Creative Commons 表示-継承 2.1 日本 Licenseあと、前回のスライドもリクエストがあったので、ようやく公開しておきますね。
AutoPagerizeに対応して、もっと便利なサイトにしよう。こちらはHTMLです。
Tempa Playground : ウェブテコ第2回終了の方に他の発表者の資料のまとめがありますので、ご覧下さいませ
とある案件で子どもをモデルにした撮影に臨む機会がありました。
以前、取材モノの撮影の際に、カメラマンとインタビュアーの役割を明確に分けておかなかったせいで、写真もインタビューも焦点がぼやけた中途半端な仕事になってしまった、という失敗談を記事にしたことがあります。
その時に、取材モノの撮影においては役割を分担して、それぞれの役割に専念して撮影に臨む必要があると学びました。
今回は取材モノではなく、モデル撮影でしたが、そのモデルの機嫌・表情一つで良い写真にも悪い写真にもなりますから、事前にモデルをリラックスさせて楽しませるような仕掛けが必要だと考えました。そこで中村は、自身はカメラマンに徹して、メンバーであるtokoに“子どもと遊ぶ役”として撮影に参加してもらうことにしました。
何故tokoなのかと言うと、実は彼女には大学時代、大道芸サークルに所属し、多くのステージで観客を楽しませてきたという経歴があります。幼稚園や子どもの沢山いる場所でのステージもあったでしょう。その経験を見込んでtokoに撮影に協力してくれるよう頼んだのです。
その申し出を快く引き受けてくれた彼女は、当日レパートリーの中から、分かりやすくて手軽にできるバルーンアートを現場でモデルのお子さんに見せてくれました。
最初は緊張していたモデルも、バルーンアートを目の前でやって見せて、できたものをプレゼントするとちょっとづつ緊張も和らいで、最後には「もっとつくって！」と撮影そっちのけで、バルーンアートをおねだりしていました。（これはこれでちょっと困りましたが…）結果、望んだ写真を撮ることができ撮影は成功に終わりました。
撮影の前から、子どもがモデルということで、「お菓子を用意しよう」とか「オモチャもいるだろう」とか、いつもより気を遣っていましたが、tokoのパフォーマンスがやはり一番重要だったように思います。彼女がいなければ撮影は失敗してかもしれません。本当に感謝！です。
大学時代にやっていたこと、しかも一見、広告やデザインとはかけ離れた印象のある大道芸が、仕事の鍵を握ったりしちゃうんですね。経験はどこでどう活きるかわからないもんだなぁとつくづく感心するとともに、それをきちんと応用できる能力も育てないと駄目だなぁと感じます。
今回は、僕のスタイル編集について紹介します。前回の今時の WordPress サイト構築法 (テンプレート編)の続きですので、併せて読むと理解しやすいかもしれません。
まず、WordPress のテーマでは、テーマフォルダのstyle.cssというファイルにスタイルを記述するのが基本です。Sandbox では、構造をそのまま使えるのであれば、miyoshiさんの記事に書かれてあるように、テンプレートの継承を利用して、テーマを作成する方が望ましいのですが、商用サイトを作る場合は、どうしても構造を変更してしまう事がほとんどです。
ですので、あくまでベストの方法ではなく、僕の方法であるという事だけ先に述べておきます。
では、先ずはディレクトリ構造を説明します。sandbox ディレクトリの中に、以下のディレクトリを作成します。
よくある形ですが、この様なディレクトリを作成します。
そして、style.css には、
この様に記述しています。つまり、4つの 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 Browser Selectorを利用しています。これは、JavaScript でブラウザの判別を行ない、HTML の html 要素に、ブラウザやOSの名前のclassを埋め込んでくれるというものです。
例えば、Mac で Opera9 を使っている場合だと、class="opera opera9 mac js" となります。
default.css にこのように記述していているが、
IE6 や IE7 のCSS解釈のバグで、ズレが生じた場合、hack.css に
頭に .ie6 (もちろん html.ie6 でも良い) の様に記述する事によって、CSS 優先度の関係で、IE6 であれば、 .ie6 に書かれた内容に、IE7 であれば .ie7 に書かれた内容で default.css に記述されたスタイルを上書きしてくれるのです。
独自のJavaScriptを読み込む場合は、header.php にファイルパスを指定して読み込むのですが、ドメインを変更した場合でも一々修正せずに済むように、WPのテンプレートタグを使います。
bloginfo('stylesheet_directory') は、使用しているテーマのディレクトリまでのパスを補完してくれます。
サイト画像も img タグで埋込む場合は、このテンプレートタグを利用した方が管理が楽になるでしょう。
同様の理由で、css で背景画像などを読み込む場合は、相対パスを使って指定するのが望ましいです。
の様に指定します。
スタイルの編集やその管理については、色々な方法がありますが、多人数ではなく一人で管理する場合だと、これくらいが丁度良いと考えています。
大人数であれば、Subversion を利用するなどのバージョン管理を行ったり、CSS を更にモジュール毎に細分化したりなどが必要かもしれません。
さて、次回はどうするかまだ決ってませんが、プラグインあたりについてでも書こうかと思っています。ここを読んでくれている方で、何かリクエストがあればお気軽にお寄せ下さい。
今回は、僕のWordPressサイト構築のテンプレートデザインを紹介します。
WordPressがMovableTypeより便利だと感じる点として、テンプレートを編集した直後に、変更が反映されるという点です。
なので、制作側に関してはWPの方がよりスピーディーに開発できると思うのですが、WPのテンプレートはphpになっており、テンプレートタグ以外にも自分で関数を作ったりできるため、柔軟性が高いものの、構造を弄り過ぎると理解しにくくなる傾向があります。
今では、CSS + (X)HTML によるウェブデザインが浸透してきましたが、構造設計がずさんな場合、意味の分からないクラスやIDが乱発を招き、せっかくのMVCの分離の理念が崩壊してしまいます。
しかし、ひとつのサイトを作る度に、毎回いちから堅牢で柔軟性に富んだ構造を設計するのは大変ですし、時間もかかり過ぎてしまいます。ウェブ制作に慣れた人であれば、自分の構造パターンができあがっているかもしれませんが、僕はWPでサイト制作するのであれば、Sandbox テーマを元に構造設計を行なう事をお勧めします。
このテーマの最大の特徴は、自動的に分かりやすい class や id を適切に割り振ってくれる所にあります。
例えば、トップページであれば、body class="wordpress y2008 m06 d13 h10 home loggedin" の様に、
また、ブログカテゴリであれば、body class="wordpress y2008 m06 d13 h10 archive category category-blog loggedin" という class が body 要素にセットされます。
自動的に意味付けされた class や id がセットされるHTML要素は、body と div id="post-{n}" と li id="comment-{n}" ({n} は WordPress システム内における id)の3つの部分です。
セマンティクスな class と id についての詳しい説明は、Miyoshiさんの記事Sandbox テーマとSandbox 1.2をお読み下さい。
つまり、これを使えば、
という様に、CSS だけでヘッダーのスタイルを自由に変更できます。このサイトも、背景画像を変える事で、トップとそれ以外のページでロゴのサイズを切り分けています。
サイドバーは、直接 sidebar.php を直接編集するよりも、せっかくテーマがWidgetsに対応しているのであれば、管理画面のデザイン > ウィジェットで管理したいです。
例えば、ホームとブログカテゴリと、それ以外のページで、サイドバーの表示を変更したい場合はどうすればよいのでしょうか。
それには、まず sidebar.php に簡単な分岐を入れてあげましょう。
!dynamic_sidebar(1) というのは、現在のウィジットで選択できるサイドバー1 のことです。この例ではサイドバー3まで使用しています。
しかし、Sandbox テーマでは標準で2個のサイドバーしか使えませんので、3個目を使えるようにする必要があります。
サイドバーを増やすには、functions.php の370行目付近、
register_sidebars() の数字を好きな数に変更するだけです。サイドバーを左右に設置したければ、sidebar-2.php というファイルを作成して、どのページでどのサイドバーを使うのかを指定して、
テーマの中で、この様に呼び出せば、2本のサイドバーもウィジットで管理する事ができる様になります。class は div class="sidebar-2" とでもしておきましょう。
他のテーマと違い、出来上がったスタイルを提供するのではなく、カスタマイズし易い構造を提供してくれる SandboxはWordPressの成長に共なって、バージョンアップされています。
また、全く構造に独自の変更を加えなければ、Sandbox Designs Competitionというギャラリーに投稿できます。色々な作品を見て、インスピレーションを得るのにも大いに役立つでしょう。
次回は、スタイル編集についてもう少し掘り下げて紹介します。
copyright (c) 2007-2012 JACO-BASS. All Rights Reserved.
