2006年03月22日

スタイルシート研究所: HTMLエレメント/クラス定義追加 HTML コンポーネント

 ということで、こちらの記事で紹介したアプローチ (→ スタイルシート研究所: サイトスタイル カスタマイズ) の実践編です。
まずは基本的な機能を実装した、HTMLエレメント/クラス定義追加 HTML コンポーネントのサンプルを作成しました。
最初のバージョン (0.10) は、以下のような機能を持ちます。
  • 指定した数だけ親エレメントを辿ってクラスを追加
  • 指定した数だけ最初の子エレメントを辿ってクラスを追加
  • 指定した数だけ最後の子エレメントを辿ってクラスを追加
具体的な組み込み方法です。 まずは、スタイルシート内にて、基準となる HTML エレメントのクラスに対して behavior プロパティを追加します。
behavior: url ('/siteresources/htc/addHtmlClass.htc');
利用可能なパラメータ指定は以下の通りです。
spf-custom-parent-name 基準となるHTMLエレメントの親エレメントにクラスを追加します。 spf-custom-parent-count が設定されている場合は、その数だけ階層を辿ります。
spf-custom-parent-count 親エレメントを辿る階層を指定します。 指定しない場合は 1 となります。
spf-custom-firstchild-name 基準となるHTMLエレメントの最初の子エレメントにクラスを追加します。 spf-custom-firstchild-count が設定されている場合は、その数だけ階層を辿ります。
spf-custom-firstchild-count 最初の子エレメントを辿る階層を指定します。 指定しない場合は 1 となります。
spf-custom-lastchild-name 基準となるHTMLエレメントの最後の子エレメントにクラスを追加します。 spf-custom-lastchild-count が設定されている場合は、その数だけ階層を辿ります。
spf-custom-lastchild-count 最後の子エレメントを辿る階層を指定します。 指定しない場合は 1 となります。

この HTML コンポーネントを使った具体的な例です。 と言いつつ、なかなかうまい具体例が見つからず、とりあえず、サイトとエリアのタイトル部分にワンポイント加えるというカスタマイズでお茶を濁してしまいました。
以前に作成しているスタイルシート (→ スタイルシートのカラーバリエーション) の緑バージョンをスタイルシートをベースに、設定を加えています。
実際の設定方法などは、こちらを参考にして下さい。

・スタイルシート設定例
.ms-titlearea
{
	behavior: url ('/siteresources/htc/addHtmlClass.htc');
	spf-custom-parent-name: spf-custom-titleframe;
	spf-custom-parent-count: 3;
}
.spf-custom-titleframe
{
	height: 100%;
	padding: 0px 100px 0px 20px;
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=1, 
	startColorstr=#8833ff66, endColorstr=#0033ff66);
}

.ms-titlearea
{
	vertical-align: bottom;
}
.ms-pagetitle
{
	vertical-align: top;
}

.ms-titlearealine
{
	behavior: url ('/siteresources/htc/addHtmlClass.htc');
	spf-custom-parent-name: spf-custom-titlearealine;
	spf-custom-parent-count: 3;
}
.spf-custom-titlearealine TR TD
{
	height: 0px !important;
	background-color: #66cc80;
}
・設定結果
カスタマイズ例1.png

如何でしょうか?
応用すると、いろいろなデザイン適用が出来ると思います。 次回は、HTML コンポーネントにもう少し機能を加えて、もう少し凝ったカスタマイズにチャレンジします。

・addHtmlClass.htc (0.10)
addHtmlClass-0.10.zip

posted by kunitaka at 04:18| Comment(0) | TrackBack(0) | テクニック