CSS シグネチャとその iBlog への応用

2005年09月20日 (火)

CSS シグネチャとその iBlog への応用

昨日はズーム機能をサポートしていないブラウザでも、文字と画像を一緒にズームさせる CSS 技を紹介しましたが、今日は CSS シグネチャという CSS 技とそれを iBlog の CSS 作成に役立てる技の紹介です。

CSS シグネチャ

CSS シグネチャというのは HTML の body 開始タグのところに id="サイトやページを識別するための文字列" と ID 指定をすることです。例えば最近作成したサイト「CacheUpIt」では id="CacheUpit" と入れています。

これを入れるとどんな効果があるか。いや、直ちに現れる効果は特にありません。(爆)

ところで、よくブラウザにユーザが指定したスタイルシートを使う設定ってありますよね。例えば Safari でしたら [環境設定]-[詳細]-[スタイルシート] です。こういう設定って使ったことあります? 自分でスタイルシートを用意してもあらゆる Web ページに対応したスタイルシートを用意するのはほぼ不可能です。原理的にはユーザが見たいように見た目を代えることができますが、ほんとうにうまく色々なページを見ることができるのだろうかと思いませんか? あるサイトではこう見たいけれど、別なサイトでは同じ指定のものは別な仕方で見たいというときに相当苦労しそうです。

それで CSS シグネチャなんです。例えばサイト「CacheUpIt」の背景色がどうしても気に入らないけれど、他のサイトの背景色にまで影響を及ぼしたくなければ


			body#CacheUpIt { background-color: white; }

という指定をユーザのスタイルシートに入れておけばよいのです。もし #CacheUpIt がなかったら全てのサイトに適用されてしまいます。

つまり CSS シグネチャはそのサイトのページであることを CSS で指定するためのもので、それを付けることでユーザスタイルシートで特定のサイトにのみ影響するスタイルの指定ができるようになるのです。閲覧者指向の技ですね。

ページシグネチャ

この考え方を iBlog で CSS をカスタマイズするときの制作者側の便利のために応用してみましょう。

サイト「CacheUpIt」の任意の HTML ソースを見てみてください。例えばトップページ(BlogPage)では body 開始タグが次のようになっています。

<body id="CacheUpIt" class="blogPage">

id 属性は既に CSS シグネチャに使用されているので class 属性でページのタイプ blogPage を指定しています。このクラスがあるために BlogPage にだけ影響を及ぼし他のタイプのページには一切影響しないスタイル指定が書けるようになっています。次のような感じです。


		body.blogPage #Header { BlogPage のヘッダー部にだけ指定したいスタイル }

ところで、一つの開始タグに複数のクラスを割り当てられるってご存知でしたか? 実はできるんです。サイト「CacheUpIt」の body 開始タグのすぐ下に id="Header" とある div 開始タグがありますよね。その次の行にある img 要素のクラス指定を見てください。

class="banner banner88x31"

スペースで区切って banner と banner88x31 という二つのクラスを指定しています。これを応用すると、


			<body id="CacheUpIt" class="entryPage fileSharingEntryPage">

というように、entryPage というクラスを指定し、更に fileSharingEntryPage というクラスも指定できます。FileSharingEntryPage.txt から作られるページはエントリなのですから、エントリのページ全体に指定したいスタイルであればクラス entryPage を使い、その中でも FireSharingEntry にだけ指定したいスタイルであれば fileSharingEntryPage というクラスを使えばよいのです。

このページタイプ毎にクラスを body 要素に割り当てることを私は心の中でページシグネチャと呼んでいます。

カテゴリシグネチャ

この考え方を更に押し進めてみます。

サイト「CacheUpIt」でも使用していませんが、特定のカテゴリの CategoryPage と EntryPage にのみ影響させるスタイルを書くときのための準備です。

CategoryPage.txt の body 開始タグ: body 開始タグの class 属性を次のように付けます。
class="categoryPage <$CategoryUUID$>"
EntryPage.txt の body 開始タグ: body 開始タグの class 属性を次のように付けます。
class="entryPage normalEntryPage <$EntryCategoryUUID$>"
FileSharingEntryPage.txt の body 開始タグ: body 開始タグの class 属性を次のように付けます。
class="entryPage fileSharingEntryPage <$EntryCategoryUUID$>"
MusicEntryPage.txt の body 開始タグ: body 開始タグの class 属性を次のように付けます。
class="entryPage musicEntryPage <$EntryCategoryUUID$>"

カテゴリの ID は C1649297960 というように英字で始まるのでクラス名として有効ですからそのまま入れてカテゴリの識別を CSS で行うために利用します。これを利用して


			body.C1649297960 #Header { ID が C1649297960 のカテゴリのヘッダー部にだけ指定したいスタイル }

などとしてカテゴリ固有のスタイルを割り当てることができます。例えばカテゴリ毎にヘッダー部の背景画像を変えることなどに使用できます。

このカテゴリ毎にクラスを body 要素に割り当てることを私は心の中でカテゴリシグネチャと呼んでいます。同様にエントリシグネチャも考えられますが、ここまでくると CSS ファイルで一つのページのためだけのことを書くには相当疑問です。そのエントリで表示を指定したい対象の意味をよく考え、それを一般化して CSS に入れるのが正道です。

Posted: 04:24 | Comment | Trackback

Trackback Ping URL(U)

以下、類似エントリです。

>  >

2005年09月20日 (火)