Posting Blog post with View Source
SharePoint テーマ エンジンの使用
原文の記事の投稿日: 2010 年 4 月 10 日 (土曜日)
こんにちは、Kolby です。いよいよ SharePoint 2010 のリリースが近づいてきて、私たちが手がけた製品そして 2010 に追加した新機能のことを考えると、気持ちが高ぶってきます。特に楽しみにしているのは、SharePoint チームがこのリリースに追加したテーマ機能です。先週、私は SharePoint Designer 2010 でマスター ページにテーマを使用するために CSS ファイルを設定する方法を学習し、"誰もがこのことを知る必要がある" と思いました。
テーマの可能性とは
テーマ エンジンは CSS ファイルを使用して、以下のことを実行できます (トークン名はイタリック)。
- 色の置換 (背景色や前景色など) - ReplaceColor
- フォントの置換 - ReplaceFont
- イメージの色の変更 (濃淡、ブレンド、塗りつぶしのいずれかを使用) - RecolorImage
ブラウザーの UI を使用して既成のサイト テーマを選択することも、SharePoint Server (SPS) で 12 種類の色と 2 種類のフォントから選択して新しいテーマを作成することもできます。これらの値は THMX ファイルに格納されます。これは、Microsoft Office でも使用されている標準的な方法です。Microsoft PowerPoint でテーマを作成して THMX ファイルに保存し、それを SharePoint で使用することもできます。THMX ファイルはルート サイトのテーマ ギャラリーに格納され、SPD またはブラウザー ([サイトの設定] (Site Settings) の [テーマ ギャラリー] (Themes gallery)) を使用してテーマを追加できます。12 のテーマ色がトークンで表されます。
- Dark1、Dark2
- Light1、Light2
- Accent1、Accent2、Accent3、Accent4、Accent5、Accent6
- Hyperlink
- Followed Hyperlink
テーマ エンジンはこれらの色を使用して、Lightest、Lighter、Medium、Darker、Darkest という 5 つの追加の置換を生成します。CSS ファイルで置換を参照するには、"色-置換" という形式を使用します (たとえば "Light2-Darkest")。
構文
テーマ エンジンは、CSS ファイル内のコメントを読み取ることで動作します。テーマが適用されたスタイルの場合、既定の選択を定義し、スタイルの直前にテーマ トークンを配置します。次に例を示します。background-color 要素があり、そのテーマを Light2-Darkest に設定します。CSS での定義は次のようになります。
/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;
既定のテーマでは背景色は #707070 で表示されますが、テーマを適用すると背景色は Light2-Darkest に置き換えられます。他のトークンの使用例については、この記事の最後を見るか、v4.master の既定の CSS ファイル (corev4.css) を見てください。このファイルはとても参考になります。
ファイルの設定
テーマ機能を使用するようにマスター ページを設定するには、2 つのことを行う必要があります。
- エンジンが参照する場所に CSS ファイルを配置します。
- CSS ファイルをマスター ページで正しく登録します。
場所
テーマ エンジンは、CSS ファイルが正しい場所に配置されている場合にのみ、それに基づいて実行します。ここでのカスタマイズでは、RootSite/Style Library/~language/Themable フォルダーを使用します。このフォルダーは、SharePoint Server 発行機能が有効になっている SPS サイトの場合に存在します。この構造がないルート サイトを使用している場合、必要なことは、"Style Library" という名前のフォルダーをルート サイトに作成し、その中に "Themable" という名前のフォルダーを作成することだけです。Themable フォルダーのすべての内容が、テーマ エンジンによって参照されます (サブフォルダーの内容も含みます)。このフォルダー構造を、SharePoint Designer またはブラウザーで作成しなおします。言語フォルダーは省略できますが、異なる言語用に異なる CSS ファイルを使用する場合は、このフォルダーが必要です。英語の場合、フォルダーの名前は en-us です。
イメージを特定の場所に置く必要はありませんが、RootSite/Style Library/Images フォルダーに置くことをお勧めします。
イメージの色の変更について 2 つのヒントがあります。複数の場所でレンダリングされるイメージの色を変更する場合、イメージに対して最後に実行された色の変更が、テーマを適用されるすべての場所で使用されます。たとえば、同じイメージで異なる色変更の方法 (濃淡、ブレンド、塗りつぶし) を示したかったのですが、すべて塗りつぶしで表示されました。イメージの個別のコピーを保存し、それぞれに別のテーマを適用する必要がありました (注: 最後の代替手段は、detach 属性を使用して、色を変更するときは新しいイメージを作成するようにエンジンに指示することですが、レンダリングの間にイメージの複数のコピーをダウンロードすることによるパフォーマンスの理由から、この方法は慎重に使用する必要があります。そのため、ここでは詳しく説明しません)。イメージ クラスター (複数のイメージを含む 1 つのファイル) の場合、includeRectangle パラメーターを使用してイメージの一部分の色を変更できます (この方法の例については corev4.css を参照してください)。
登録
テーマを設定した CSS ファイルをマスター ページに適用するには、CSS ファイルを単にリンクする代わりに、登録する必要があります。これにより、テーマを適用すると、マスター ページはテーマを設定された CSS ファイルを参照するようになります。次のパラメーターを、マスター ページの head タグに配置します。
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>
After パラメーターにより、テーマを設定された CSS ファイルは corev4.css の後でページに適用されるようになります。ただし、 <% $SPUrl トークンは SharePoint Foundation (SPF) では解決されないことに注意してください。SPF では、ハード コードした URL を使用して場所を指定する必要があります。残念なことに、異なる言語に対して異なる CSS ファイルを使用したい場合、このことが制約になります (~language トークンがありません)。
デモ
それでは、"テーマを適用できる" CSS ファイルを設定する必要があります。見た目のよいマスター ページを用意して、試してみます。テーマの最終形であるカラー パレットをよりよく理解してもらえるよう、すべての色置換を示す大きい表を v4.master に組み込みました。また、サンプル イメージを追加し、その色を変更してみます。次に示すのは、既定の配色を使用した場合の結果です (背景色スタイルの既定の設定として白を使用したことに注意してください)。
次に、ブラウザーに移動して新しいサイト テーマ how about Convention with Papyrus およびフォントとして Segoe Script を選択します。すると、ずっとカラフルな表が表示されます (下を参照)。ハイパーリンク テキストとイメージ ラベルにテーマを適用しました。色の変更には、Dark2-Lightest を使用しました (Dark2-Lightest のセルと、塗りつぶし方法で色を変更したロゴの色が完璧に一致していることがわかります)。
コード例
次に示すのは、フォント、フォントの色、イメージの色にテーマを適用した 2 番目のロゴ イメージの CSS の例です。
/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;
イメージの色変更の品質には本当に驚いています。正確かつ様式的に使用すれば、SharePoint のテーマ エンジンは機能と同じくらいに外観を気にするユーザーを喜ばしてくれます。
最後まで読んでいただいてありがとうございます。皆さんにとっても新しい SharePoint テーマ エンジンがわくわくさせてくれて役に立つものであることを願っています。
これはローカライズされたブログ投稿です。原文の記事は、「Working with the SharePoint Theming Engine」をご覧ください。
<!-- D;-A;-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <
Hi, Kolby here again. As we get closer to releasing SharePoint 2010, I’m getting more and more excited about our product and some of the new functionality we’ve added in 2010. I’m particularly looking forward to theming capabilities that the SharePoint team has added this release. Last week I learned how to set up a CSS file for theming a master page in SharePoint Designer 2010, and I thought, “People need to see this!” ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[What are the theming possibilities? ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[The theming engine works on CSS files, and can do the following (token name in italics): ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Replace colors (such as a background or font color) -2D; ReplaceColor ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Replace fonts – ReplaceFont ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Recolor images (using one of three methods: tint, blend, and fill)-2D; RecolorImage]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[The theming engine works with these colors and produces 5 additional permutations of each: Lightest, Lighter, Medium, Darker, and Darkest. To reference a permutation in the CSS file use the format: Color-2D;Permutation (“Light2-2D;Darkest” for example). ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Syntax ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[The theming engine works by reading comments in your CSS file. For a themed style, define a default choice, and place a theming token directly before the style. Here’s an example: I have a background-2D;color element that I want to be themed to Light2-2D;Darkest. My definition in the CSS would look like this: ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[/* [ReplaceColor(themeColor:"Light2-2D;Darkest")]5D; */ background-2D;color:#707070;]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[In the default theme, the background will appear as #707070, but when a theme is applied, the background color will be replaced with Light2-2D;Darkest. For examples of how to use the other tokens, see the end of this article or look at the default CSS file for v4.master (corev4.css), which is a great reference. ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[File Setup ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Location ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[The theming engine will run on CSS files only if they’re placed in the correct place. For our customizations we’ll use the RootSite/Style Library/~language/Themable folder. This folder will exist for SPS sites with the SharePoint Server Publishing feature activated. If you’re working in a root site without this structure, all you need is a folder named “Style Library” at the root site with a folder named “Themable” inside it. Any content within the Themable folder will be seen by the theming engine (including content within subfolders). Recreate this folder structure in SharePoint Designer or through the browser. The language folder is optional, but if you want different CSS files for different languages, then you will need it. For English, name the folder en-2D;us. ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Images do not need to be placed in a specific location, but the suggested place is a RootSite/Style Library/Images folder. ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[A couple hints about the recoloring images. If you recolor an image that is rendered in multiple locations, the last recoloring performed on the image will be used in all themed locations. For example, I wanted to show different recolor methods on the same image (tinting, blending, and filling), but they all showed up filled. I had to save individual copies of the image and theme them differently (note: a last resort alternative is to use a detach attribute to tell the engine to create a new image when recoloring it, but this method should be used sparingly due to the performance reasons of downloading the multiple image copies during rendering. For that reason I will not go into detail here). For image clusters (a single file that contains more than one image), you can recolor portions of the image using the includeRectangle parameter (look at corev4.css for an example of how to do this). ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Registration ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[The After parameter ensures that our themed CSS file is applied to the page after corev4.css. Do note, however, that the <% $SPUrl token will not resolve in SharePoint Foundation (SPF). In SPF, you will need to specify the location using a hard coded URL. Unfortunately this will be limiting if you want to use different CSS files for different languages (since you won’t have a ~language token). ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Demo ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Next, I jump into the browser and pick a new Site Theme, how about Convention with Papyrus and Segoe Script as fonts. Now I’m greeted with a much more colorful table (see below). I themed the hyperlink texts and the image labels. For the recoloring, I used Dark2-2D;Lightest (you can see the perfect color match between the Dark2-2D;Lightest cell and the logo recolored with the filling method). ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <
]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[Example Code ]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; <![CDATA[/* [ReplaceFont(themeFont: "MinorFont")]5D; */ font-2D;family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-2D;Darker")]5D; */ color:black;
/* [RecolorImage(themeColor:"Dark2-2D;Lightest",method:"Tinting")]5D; */ background:url("/Style Library/images/spdicon1.png") no-2D;repeat;]]>-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A;
-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A;
<!--DATA[This is a localized blog post. Please find the original article at
Working with the SharePoint Theming Engine]]-->-D;-A; -D;-A; -D;-A; -D;-A; -D;-A; -D;-A;-->