[方法] スタイルをカスタマイズする
最終更新日: 2010年4月4日
適用対象: SharePoint Server 2010
多くの場合、デザイナーはページ コンテンツに所定のユーザー設定のスタイルを適用し、Web ページの外観を保持することを希望します。これによって、操作後のページ コンテンツには影響を与えずに、スタイル シートの定義を変更して、現在のページの外観を変更できるようになります。Microsoft SharePoint Server 2010 の 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 プロパティを無効にできます。たとえば、以下のコードを指定すると、HTML エディターは、関連付けられている CSS 構文で、PageContentStyleCustom というプレフィックスを持つ CSS を探します。
<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>
このプレフィックスを含むユーザー設定のスタイルが見つかった場合、そのスタイルは現在の選択内容に従って、[スタイル] ドロップダウン リストに表示されます。
概要リンク、目次、およびコンテンツ クエリ Web パーツのスタイルをカスタマイズする
概要リンク フィールド コントロールとコンテンツ クエリ Web パーツ (CQWP) は、作成されたリンクをページ上に表示します。これらのリンクは、Web サイトで使用できるスタイルのセットに基づくことができます。
目次の Web パーツと CWQP には、データに基づくナビゲーション ビューが表示されます。どちらの Web コンテンツも、サイト コンテンツに対するクエリが表示されます。これらの Web パーツではアイテムとグループ ヘッダーのスタイルも設定できるため、Web パーツは使用可能なスタイルのセットを使用してレンダリングを行います。
SharePoint Server 2010 は XSL スタイル シートを使用して、これらの Web パーツを表示します。スタイルをカスタマイズして拡張し、Web サイトの色やブランド設定に一致させることができます。
表 1 は、XSL スタイル シートのファイルと対応する Web パーツのマッピングを示します。
表 1. 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 ファイルの一覧を表示します。
例を確認するため、ItemStyle.xsl を開き変更します。ItemStyle.xsl は、概要リンク Web パーツと CQWP アイテムの表示を制御します。次に、ファイルの構造とコンテンツを検討します。
XSL テンプレートは単に、いくつかの変数 (@ImageURL、@LinkURL、@Description など) がある HTML です。
これらの変数を追加または削除すると、概要リンク Web パーツ データを表示または非表示にできます。
周囲の HTML によってこれらの変数がどのように表示されるかを変更することもできます。
各 XSL テンプレートは、作成者が選択できるスタイルの 1 つにマッピングされます。
コード サンプルの最初のセクションには、SharePoint Server 2010 が呼び出し、データを渡して、変更されたバージョンのデータを取得する対象の XSL テンプレートが含まれています。
このセクションには、関数の結果によってレンダリングされた HTML が含まれています。
<xsl:template name="Default" match="*" mode="itemstyle"> // This section includes a set of functions, or xsl templates, which SharePoint Server 2010 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 ステートメントを追加します。