SharePoint でカスタム CSS ファイルをテーマ設定対応にする
コメントスタイルのマークアップを CSS ファイルに追加してSharePoint テーマ設定エンジンで使用できるようにする方法について説明します。
注釈の概要
注釈は、CSS ファイル内のプロパティをテーマにする方法を SharePoint テーマ エンジンに伝える特別なコメント スタイルのマークアップです。 テーマがサイトに適用されると、テーマ エンジンによって CSS プロパティの値が適切なテーマ値に置き換えられます。 SharePoint では、注釈を使用して、色、フォント、または背景画像を変更できます。 イメージの色を変更することもできます。 カスタム CSS ファイルを使用している場合は、SharePoint テーマ エンジンで使用する場合は、これらの注釈を CSS ファイルに追加する必要があります。 カスタム CSS ファイルを使用するサイトにテーマを適用し、注釈を追加していない場合、CSS プロパティは変更されません。 これにより、デザインが一致しないサイトが発生する可能性があります。
この記事では、使用可能な注釈と CSS ファイルの登録方法について説明します。
カスタム テーマの詳細については、「 方法: SharePoint にカスタム テーマを展開する 」および「 方法: SharePoint でマスター ページ プレビュー ファイルを作成する」を参照してください。
カスタム CSS ファイルへの注釈の追加
注釈は、SharePoint テーマ設定エンジンに対して CSS ファイル内のプロパティのテーマ設定方法を指示します。 このセクションでは、使用可能な注釈とその使用方法について説明します。
ReplaceColor 注釈
ReplaceColor 注釈は、色の値を指定されたテーマの色で置き換えます。 これは、 color 、 background-color 、 border などの色の値を定義する CSS プロパティで使用できます。
ReplaceColor 注釈の形式は、次のとおりです。
/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */
を使用するカラー スロットの注釈名に置き換えます ColorSlot 。 使用可能なカラー スロットの一覧については、「 SharePoint のカラー パレットとフォント」の「 カラー スロットのマッピング」を参照してください。
テーマの色を暗くする場合は、オプションの themeShade パラメーターを使用します。 ShadeValue は 0.0 (変更なし) から 1.0 (最も暗い) までの数値に置き換えます。
テーマの色を明るくする場合は、オプションの themeTint パラメーターを使用します。 TintValue は 0.0 (変更なし) から 1.0 (最も明るい) までの数値に置き換えます。
テーマの色の透明度を指定する場合は、オプションの opacity パラメーターを指定します。 OpacityValue は透明度の設定を指定する数値に置き換えます。 透明度の設定は、0.0 (完全に透明) から 1.0 (完全に不透明) の範囲で指定します。
次に、CSS ファイル内での ReplaceColor 注釈の使用例を示します。
/* [ReplaceColor(themeColor:"BodyText")] */ color:#444;/* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.5")] */ background-color:#fff;/* [ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;
ReplaceFont 注釈
ReplaceFont 注釈は、指定されたテーマのフォントを使用可能なフォントのリストに追加します。 これは、 font および font-family の CSS プロパティで使用できます。
ReplaceFont 注釈の形式は、次のとおりです。
/* [ReplaceFont(themeFont:"FontSlot")] */
FontSlot は、使用するフォント スロットの名前に置き換えます。 使用可能なフォント スロットについては、「 SharePoint のカラー パレットとフォント」の「 フォント スロット」を参照してください。
次に、 ReplaceFont 注釈の例を示します。 この例では、テーマで body フォント スロットが Courier として定義されている場合に、Courier が Choose the Lookウィザードの使用可能なフォントの最初の項目として追加されます。
/* [ReplaceFont(themeFont:"body")] */ font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
ReplaceBGImage 注釈
ReplaceBGImage 注釈は、CSS ファイルの背景イメージをテーマの背景イメージに置き換えます。 これは、 background および background-image の CSS プロパティで使用できます。
次に、 ReplaceBGImage 注釈の例を示します。 ReplaceBGImage 注釈を AlphaImageLoader フィルターと組み合わせて使用すると、以前のバージョンの Internet Explorer をサポートできます。
/* [ReplaceBGImage] */
RecolorImage 注釈
RecolorImage 注釈は、指定されたイメージの色を変更します。
RecolorImage 注釈の形式は、次のとおりです。
/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */
ColorSlot をカラー スロットの注釈名に置き換えます。 使用可能なカラー スロットについては、「 SharePoint のカラー パレットとフォント」の「 カラー スロットのマッピング」を参照してください。
色の変更方法を指定する場合は、オプションの method パラメーターを使用します。
イメージの特定の領域のみの色を変更する場合は、オプションの includeRectangle パラメーターを使用します。 x-Setting、y-Setting、RegionWidth、RegionHeight を、色を変更する領域の x 座標、y 座標、幅、高さに置き換えます。
次に、CSS ファイル内での RecolorImage 注釈の使用例を示します。
/* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image:url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");/* [RecolorImage(themeColor:"BodyText",method:"Filling",includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url("/_layouts/15/images/spcommon.png?rev=23") no-repeat -161px -178px;
スタイル ライブラリ内の Themable フォルダーへの CSS ファイルのアップロード
カスタム CSS ファイルは、(マスター ページ ギャラリーの Themable フォルダーではなく) スタイル ライブラリの Themable フォルダーに配置します。 スタイル ライブラリの Themable フォルダー格納された CSS ファイルのみが、テーマ設定エンジンで認識されます。 Themable フォルダーは、公開サイトに対して自動的に作成されます。 それ以外の場合は、適切な場所に Themable フォルダーを作成できます ( SiteCollectionName/Style Library/ language/Themable/http://)。
注:
言語とカルチャをそれぞれ識別するには、 言語 フォルダーの名前を 4 桁の 形式の ll-cc にする 必要があります。 たとえば、en-us や ar-sa です。 詳細については、「Office 2013 の言語識別子と OptionState ID 値」を参照してください。
CSS ファイルはチェックインして公開する必要があります。 CSS ファイルが変更された場合は、変更内容が認識されるようにテーマを再適用する必要があります。
CSS ファイルの登録
CSS ファイルをテーマ設定エンジンで使用できるようにするには、事前に CSS ファイルをマスター ページに登録する必要があります。 これにより、サイトにテーマを適用したときに、マスター ページが CSS ファイルにダイレクトされます。 CSS ファイルを登録するには、SharePoint:CssRegistration> 要素をマスター ページの要素に追加<します。<head> SharePoint:CssRegistration> 要素の形式を<次に示します。
<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />
CSSFileLocation を CSS ファイルの場所に置き換えます。
SharePoint:CssRegistration> 要素の例を<次に示します。
<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>
注:
%$SPUrl トークンは SharePoint Foundation 2013 では使用できません。 URL を使用して CSS ファイルの場所を指定する必要があります。