[方法] スタイルをカスタマイズする
多くの場合、デザイナはコンテンツに所定のユーザー設定のスタイルを適用し、Web ページの外観を保持することを希望します。これは、スタイル シートの定義を変更し、操作後のページ コンテンツには影響を与えずに現在のページの外観を変更することによって可能になります。Microsoft Office SharePoint Server 2007 の HTML エディタは、デザイナが提供する定義済みのスタイルの一覧を使用して、カスタマイズしたスタイルをページ作成者がコンテンツに適用する機能をサポートしています。
既定では、HTML エディタでは既定のスタイルのセットが表示されますが、ページ レイアウトのデザイナは、ページ レイアウト内にスタイル シートへの参照を追加することで、既定のセットを置き換えることができます。HTML エディタは、名前に ms-rteCustom-XXXX というプレフィックス (XXXX はページの作成者に固有のクラスの表示名) がある新しいカスケード スタイル シート (CSS) クラスを検出すると、既定のセットの代わりに、ユーザー設定のスタイルの新しいセットを表示します。
HTML エディタは特定のタグに固有のクラスを検出し、指定されたコンテンツが選択されている場合のみ、それらのクラスをユーザーに表示します。ドロップダウン メニューには常に、特定のタグ用に定義されていないスタイルが表示されます。たとえば、ページ レイアウトのデザイナは、以下のようなユーザー設定のスタイルを、ページ レイアウトに含まれる CSS ファイルを使用してページの作成者に提供できます。ページの作成者はレイアウトから作成されたページを編集しているときに、HTML エディタのツール バーの [選択] ボタンを使用してページ上のリストを強調表示し、[スタイル] ボタンをクリックしてそこに表示されるリストのスタイルを選択して、選択済みのリストにそのスタイルを適用することができます。
Ol.ms-rteCustom-RomanNumberList {
font-family:Times New Roman; font-size:10pt; color:#000000;
text-indent:0; text-align:left; list- style-type:upper-roman;
margin-left:30; margin-right:10; padding-left:10px; margin-top:1;
text-transform:capitalize
ページの異なるセクションには異なるユーザー設定のスタイルを表示できるように、発行用 HTML フィールド コントロールごとに一意の CSS クラス名のプレフィックスを指定できます。
RichHTMLField コントロールが指定されているページ レイアウトでは、PrefixStyleSheet プロパティを無効にできます。たとえば、次のように指定するとします。
<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>
HTML エディタは、関連付けられている CSS 構文で、PageContentStyleCustom というプレフィックスを持つ CSS クラスを探します。このプレフィックスを含むユーザー設定のスタイルが見つかった場合、そのスタイルは現在の選択内容に従って、[スタイル] ドロップダウン リストに表示されます。
概要リンク、目次、およびコンテンツ クエリ Web パーツのスタイルをカスタマイズする
概要リンク フィールド コントロールとコンテンツ クエリ Web パーツは、作成されたリンクをページ上に表示します。これらのリンクは、Web サイトで使用できるスタイルのセットに基づくことができます。
目次の Web パーツとコンテンツ クエリ Web パーツには、それぞれ、データに基づくナビゲーション ビューと、サイト コンテンツに対するクエリが表示されます。これらの Web パーツではアイテムとグループ ヘッダーのスタイルも設定できるため、Web パーツは使用可能なスタイルのセットを使用してレンダリングを行います。
Microsoft Office SharePoint Server 2007 は XSL スタイル シートを使用して、これらの Web パーツを表示します。スタイルをカスタマイズして拡張し、Web サイトの色やブランド設定に一致させることができます。
次の表に、XSL スタイル シートのファイルと、それらに対応する Web パーツのマッピングを示します。
XSL スタイル シート |
用途 |
対応する Web パーツ |
|---|---|---|
ContentQueryMain.xsl |
"Application" XSL スタイル シート |
コンテンツ クエリ |
Header.xsl |
コンテンツ クエリと概要リンクのグループ ヘッダー、および目次のタイトル ヘッダー |
コンテンツ クエリ、概要リンク、目次 |
ItemStyle.xsl |
コンテンツ クエリと概要リンクのアイテムのスタイル |
コンテンツ クエリ、概要リンク |
LevelStyle.xsl |
目次のレベルのスタイル (サイトとそのページを含む) |
目次 |
SummaryLinkMain.xsl |
概要リンクの "Application" XSL |
概要リンク |
TableOfContentsMain.xsl |
目次の "Application" XSL |
目次 |
手順
概要リンクのスタイルを見つけて変更するには
Web サイトのホーム ページに移動し、[すべてのサイト コンテンツの表示] をクリックします。
[スタイル ライブラリ] をクリックします。
[XSL スタイル シート]をクリックします。3 種類の Web パーツすべてに対してスタイル ライブラリで使用できる XSL ファイルの一覧が表示されます。
例を確認するため、概要リンク Web パーツとコンテンツ クエリ Web パーツのアイテムの表示を制御する ItemStyle.xsl を開き、変更を加えます。次に、ファイルの構造とコンテンツを検討します。
XSL テンプレートは単に、いくつかの変数 (@ImageURL、@LinkURL、@Description など) がある HTML です。
これらの変数を追加または削除すると、概要リンクのデータを表示または非表示にできます。
周囲の HTML によってこれらの変数がどのように表示されるかを変更することもできます。
各 XSL テンプレートは、作成者が選択できるスタイルの 1 つにマッピングされます。
コード サンプルの最初のセクションには、Office SharePoint Server 2007 が呼び出し、データを渡して、変更されたバージョンのデータを取得する対象の XSL テンプレートが含まれています。
セクションには、関数の結果によってレンダリングされた HTML が含まれています。
<xsl:template name="Default" match="*" mode="itemstyle"> // This section includes a set of functions, or xsl templates, which MOSS 2007 calls, passes data into, and gets modified versions of the data from. The product does this primarily to improve security. <xsl:variable name="SafeLinkUrl"> <xsl:call-template name="OuterTemplate.GetSafeLink"> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="SafeImageUrl"> <xsl:call-template name="OuterTemplate.GetSafeStaticUrl"> <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="DisplayTitle"> <xsl:call-template name="OuterTemplate.GetTitle"> <xsl:with-param name="Title" select="@Title"/> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="LinkTarget"> <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if> </xsl:variable> // Includes the rendered HTML with the results of the functions. <div id="linkitem" class="item"> <xsl:if test="string-length($SafeImageUrl) != 0"> <div class="image-area-left"> <a href="{$SafeLinkUrl}" target="{$LinkTarget}"> <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /> </a> </div> </xsl:if> <div class="link-item"> <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/> <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}"> <xsl:value-of select="$DisplayTitle"/> </a> <div class="description"> <xsl:value-of select="@Description" /> </div> </div> </div> </xsl:template>
新しいスタイルを作成するには
前述の手順の 1. ～ 4. を繰り返し、ItemStyle.xsl ファイルに移動します。
ItemStyle.xsl ファイルを開き、次のコードを追加します。
<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle"> </xsl:template>ItemStyle.xsl ファイルで、必要に応じて開始タグと終了タグの間にテンプレート名、変数、パラメータの情報、およびその他の詳細を追加します。
Web パーツで変数を適切に表示するため、HTML と適切な XSL ステートメントを追加します。