SharePoint でカスタム テーマを展開する

  • [アーティクル]

ユーザー インターフェイスを使用するか、機能レシーバーを実装することによって、SharePoint サイトにカスタム テーマを展開する方法について説明します。

SharePoint には事前にインストールされているテーマがあります。 追加のカラー パレット、フォント パターン、およびマスター ページを作成して、カスタム テーマを作成できます。 ファイルがテーマ ギャラリーおよびマスター ページ ギャラリーにアップロードされた後、ユーザー インターフェイスまたはコードを使用してサイトにテーマを展開できます。 カラー パレットおよびフォント パターンについては、「 SharePoint のカラー パレットとフォント」を参照してください。

注:

この記事は、従来の SharePoint サイト エクスペリエンスのコンテキストにのみ適用されます。 最新の SharePoint サイトと、テーマのサポートに関する詳細情報をお探しの場合、次の記事「SharePoint サイトのテーマ」を参照してください。

テーマを展開するための中心概念の理解

表 1 に、テーマの展開に関する中心概念を理解するために役立つ記事を示します。

表 1. テーマの展開に関する中心概念

記事のタイトル 説明
SharePoint のテーマの概要 SharePoint のテーマ エクスペリエンスについて説明します。
フィーチャー イベント フィーチャーがサーバー ファームにインストールされる際に発生するイベントの受信および応答を可能にするフィーチャー イベントについて説明します。

テーマ ギャラリーおよびマスター ページ ギャラリーへのファイルのアップロード

追加のカラー パレットおよびフォント パターンを作成し、テーマ ギャラリーにアップロードすることによって、カスタム テーマを作成できます。 その後、テーマ エクスペリエンスのデザインを変更した場合、およびプログラムでテーマを適用した場合に、新しいカラー パレットおよびフォント パターンが適用されます。 同様に、選択元の追加のサイト レイアウトが必要な場合、追加のマスター ページ、および対応するプレビュー ファイルをマスター ページ ギャラリーにアップロードできます。 次の一覧では、ファイルを配置する場所について説明します。

  • マスター ページ ギャラリー マスター ページ ファイル、および対応するプレビュー ファイル (.preview files) を表示します。 マスター ページを [ 外観の変更] ウィザードで使用できるようにする場合、マスター ページ プレビュー ファイルが必要です。 また、JavaScript ファイルおよび他のデザイン アセットも、マスター ページ ギャラリーにアップロードできます。

    SharePoint ユーザー インターフェイスからマスター ページ ギャラリーにアクセスするには、[サイトの設定] で、[Web デザイナー ギャラリー] の下の [マスター ページ] を選択します。 サイト (http://{SiteName}/_catalogs/masterpage/) に直接移動することもできます。

  • テーマ ギャラリー テーマ エクスペリエンスで使用できるカラー パレットおよびフォント パターンを表示します。 SharePoint は [ 15] フォルダーを検索し、使用可能なカラー パレットおよびフォント パターンを判断します。

    SharePoint ユーザー インターフェイスからテーマ ギャラリーにアクセスするには、[サイトの設定] で、[Web デザイナー ギャラリー] の下の [テーマ] を選択します。 サイト (http://{SiteCollectionName}/_catalogs/theme/15/) に直接移動することもできます。

  • スタイル ライブラリ テーマ エクスペリエンスで使用したいカスタム CSS ファイルを表示します。 スタイル ライブラリに直接移動することもできます (次の URL に SiteCollectionName および language を置換: http://{SiteCollectionName}/Style Library/language/Themable/)。

    注:

    マスター ページ ギャラリーの Themable フォルダーではなく、スタイル ライブラリの Themable フォルダーにカスタム CSS ファイルを配置します。 スタイル ライブラリの Themable フォルダーに保存された CSS ファイルのみがテーマ設定エンジンに認識されます。

注:

マスター ページ ギャラリーおよびテーマ ギャラリーで有効なバージョン管理機能がある場合、テーマ設定エンジンで使用できるようにする前に、デザイン ファイルも発行する必要があります。

ユーザー インターフェイスを使用してテーマを展開する

構成された外観 (デザイン) とは、サイトの外観を決定するカラー パレット、フォント スパターン、背景イメージ、およびマスター ページのことです。 構成された外観リストには、デザイン ギャラリーで使用できる構成済みの外観が含まれます。 構成された外観リストにリスト アイテムを追加し、使用するマスター ページ、カラー パレット、フォント パターン、および背景イメージを指定して、デザインを作成します。

注:

マスター ページをデザイン ギャラリーで使用できるようにする場合、マスター ページ プレビュー ファイルが必要です。

構成された外観を追加するには

  1. [ 設定] アイコンを選択して、[ サイトの設定] を選択します。

  2. [ Web デザイナー ギャラリー] で [ 構成された外観] を選択します。

  3. [ 構成された外観] リストで [ 新しいアイテム] を選択します。

  4. [ タイトル] テキスト ボックスにデザインのタイトルを入力します。

  5. [ 名前] テキスト ボックスに、デザインの名前を入力します。 名前は構成された外観リストおよびデザイン ギャラリーに表示されます。

  6. [ マスター ページ URL] テキスト ボックスに、マスター ページの URL を入力します。 URL は相対 URL を使用できます。

  7. [ テーマ URL ] テキスト ボックスに、カラー パレットの URL ( *.spcolor ファイルの URL) を入力します。 URL は相対 URL を使用できます。

  8. [ イメージ URL] テキスト ボックスに、背景イメージの URL を入力します。 これは省略可能です。 URL は相対 URL を使用できます。

  9. [ フォント スキーム URL ] テキスト ボックスに、フォント スキームの URL ( *.spfont ファイルの URL) を入力します。 これは省略可能です。 URL は相対 URL を使用できます。

  10. [ 表示の順序] テキスト ボックスに、表示の順序の番号を入力します。 これはデザインがデザイン ギャラリーに表示される位置を決定します。

  11. 保存] を選択します。

    注:

    構成されたルック値に問題がある場合、構成された外観はデザイン ギャラリーに追加されず、ログ ファイルにメッセージは記録されません。 構成済みの外観を追加できない理由としては、ファイルが見つからない、いずれかのファイルに書式設定の問題がある、または SharePoint がファイルにアクセスできないなどの理由が考えられます。

デザイン ギャラリーを使用して、サイトに新しいデザインを適用できるようになりました。 詳細については、「Office.com で発行サイトのテーマを選択する 」を参照してください。

コードを使用してテーマを展開する

機能レシーバーを実装してテーマを展開できます。

機能レシーバーを使用してテーマを展開するには

  1. SPFeatureReceiver クラスから継承するフィーチャー レシーバー クラスを作成します。

  2. FeatureActivated メソッドで、カラー パレットとフォント スキームを使用する SPTheme オブジェクトを作成し、テーマをサイトに適用します。

    次のコード例では、サイトにユーザー設定のカラー パレットやフォント パターンを展開する方法を示します。

    // Get the SPColor file. Replace with the path to your SPColor file.
SPFile colorPaletteFile = Web.GetFile("path to .spcolor file");
if (null == colorPaletteFile || !colorPaletteFile.Exists)
{
    // TODO: handle the error.
    return;
}

// Get the SPFont file. Replace with the path to your SPFont file.
SPFile fontSchemeFile = Web.GetFile("path to .spfont file");
if (null == fontSchemeFile || !fontSchemeFile.Exists)
{
    // TODO: handle the error.
    return;
}

// Open an SPTheme with the two files. Replace NewTheme with the name for your theme.
// Note: If you have a background image, you can specify the following:
// SPTheme.Open("NewTheme", colorPaletteFile, fontSchemeFile, backgroundURI)
SPTheme theme = SPTheme.Open("NewTheme", colorPaletteFile, fontSchemeFile);


// Now apply your theme to the site.
// The themed CSS output files are stored in the Themed folder of the Theme Gallery of the root web
// of the site collection. To specify that the files should be stored in the _themes folder within the root
// web, pass false to the ApplyTo method.
theme.ApplyTo(Web, true);

注:

ApplyTo メソッドの shareGenerated パラメーターは、テーマファイルをサイト コレクション内のサイト間で共有できるかどうかを指定します。 In general, it is set to true for SharePoint Server and SharePoint Online sites and set to false for SharePoint Foundation sites. The shareGenerated parameter must be set to true if you intend the themed files to be shared. For more information, see ApplyTo(SPWeb, Boolean) .

ユーザーが [ 外観の変更] ウィザードにテーマを適用する場合、ウィザードは構成された外観のリストおよびデザイン ギャラリーの Current という名前のテーマも更新します。 プログラムでテーマを適用する場合、現在のテーマは手動で更新する必要があります。 次の例は、現在のテーマを更新する方法を示します。

SPList designGallery = Web.GetCatalog(SPListTemplateType.DesignCatalog);
if (null == designGallery)
{
    // TODO: Handle the error.
    return;
}

SPQuery q = new SPQuery();
q.RowLimit = 1;
q.Query = "<Where><Eq><FieldRef Name='DisplayOrder'/><Value Type='Number'>0</Value></Eq></Where>";
q.ViewFields = "<FieldRef Name='DisplayOrder'/>";
q.ViewFieldsOnly = true;

SPListItemCollection currentItems = designGallery.GetItems(q);

If (currentItems.Count == 1)
{
    // Remove the old Current item.
    currentItems[0].Delete();
}

SPListItem currentItem = designGallery.AddItem();

currentItem["Name"] = SPResource.GetString(CultureInfo.CurrentUICulture, Strings.DesignGalleryCurrentItemName);
currentItem["Title"] = SPResource.GetString(CultureInfo.CurrentUICulture, Strings.DesignGalleryCurrentItemName);

// Change this line if you want to specify a different master page.
currentItem["MasterPageUrl"] = Web.MasterUrl;

// Replace with the path to your SPColor file.
currentItem["ThemeUrl"] = "path to .spcolor file";

// Delete the following line if you do not have a background image. Otherwise, replace with the path to
// the background image.
currentItem["ImageUrl"] = "path to background image";

// Replace with the path to your SPFont file. Or, you can delete this line if you want to use
// the default font scheme of the selected master page.
currentItem["FontSchemeUrl"] = "path to .spfont file";

currentItem["DisplayOrder"] = 0;
currentItem.Update();

関連項目