2006年03月21日

スタイルシート研究所: サイトスタイル カスタマイズ

 ポータルサイトやチームサイトにて、サイトのデザインをカスタマイズする際のアプローチを研究してみる。
デザイン (見た目) をカスタマイズするには幾つかアプローチがあります。
  • FrontPage 2003
  • サイトテンプレート (aspx ページ、CAML定義)
  • スタイルシート
最初の2つは、物理的な変更を伴うカスタマイズ、最後の1つはある意味間接的なカスタマイズと言えます。
FrontPage 2003 は、見た目に沿ってカスタマイズが出来るので、最も敷居が低いかもしれません。 また、サイトテンプレートはCAMLのカスタマイズで最も敷居が高いと思われます。
それに対して、スタイルシートによる見た目のカスタマイズはほどほどの難易度ですが、基本的には物理的なページに直接紐付いていないので、簡単に移行が出来るというメリットがあります。

ということで、普段、デザインをカスタマイズする時は、ほとんどスタイルシートによるアプローチを使っています。
スタイルシートによるカスタマイズで重要なのは HTML エレメントに設定されているクラス名でしょう。

・SharePoint サイトと SharePoint Portal のカスタマイズ : 第 3 部 スタイルシート クラス リファレンス表
<http://www.microsoft.com/japan/msdn/sharepoint/general/
ODC_SPSCustomizingSharePointSites3.asp
>

通常は、予め定義されているクラス名を頼りに各種スタイルシートの設定を施します。 時には、特定の HTML エレメントに設定されている固定 ID を使ったりします。
また、クラスが定義されていない場合は、セレクタの機能を利用してある程度補うことが出来ますが、IE6 までのセレクタはサポートが不十分 (IE7 では改善されるらしい) なので、きめ細かい指定が出来ません。
これらだけでも、ちょっとした工夫でそれなりのことは出来ます。 (→ スタイルシートのカラーバリエーション)
でも、凝ったデザインを適用するためには、この辺りが重要になります。

そこで、どうするのか・・・
クラスが設定されてなければ、クラスを動的に設定すれば良い!という発想です。
IE の場合、Dynamic HTML ビヘイビアという機能を使うことで、スタイルシートへの組み込みにて、スクリプトによる Dynamic HTML による動的な HTML DOM 操作が可能です。
これを利用して、クラスが設定されていなければ追加する、又、デザインを適用するために必要な HTML エレメントが足らなければ追加してしまおうというアプローチです。

実は、このアイデアは、GroupBoard ワークスペースのサイトデザインで使っているアプローチをパクリました。

・GroupBoard ワークスペース
<http://www.microsoft.com/japan/sharepoint/groupboard/default.mspx>

posted by kunitaka at 04:30| Comment(0) | TrackBack(0) | テクニック
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/486926
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック