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

[アーティクル]
03/21/2023

ユーザーインターフェイスを使用するか、機能レシーバーを実装することによって、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 ファイルのみがテーマ設定エンジンに認識されます。

注:

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

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

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

注:

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

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

[ 設定] アイコンを選択して、[ サイトの設定] を選択します。
[ Web デザイナーギャラリー] で [ 構成された外観] を選択します。
[ 構成された外観] リストで [ 新しいアイテム] を選択します。
[ タイトル] テキストボックスにデザインのタイトルを入力します。
[ 名前] テキストボックスに、デザインの名前を入力します。名前は構成された外観リストおよびデザインギャラリーに表示されます。
[ マスターページ URL] テキストボックスに、マスターページの URL を入力します。 URL は相対 URL を使用できます。
[ テーマ URL ] テキストボックスに、カラーパレットの URL ( *.spcolor ファイルの URL) を入力します。 URL は相対 URL を使用できます。
[ イメージ URL] テキストボックスに、背景イメージの URL を入力します。これは省略可能です。 URL は相対 URL を使用できます。
[ フォントスキーム URL ] テキストボックスに、フォントスキームの URL ( *.spfont ファイルの URL) を入力します。これは省略可能です。 URL は相対 URL を使用できます。
[ 表示の順序] テキストボックスに、表示の順序の番号を入力します。これはデザインがデザインギャラリーに表示される位置を決定します。
保存] を選択します。

注:

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

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

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

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

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

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

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();

次の方法で共有

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

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

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

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

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

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

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

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

関連項目

その他のリソース

次の方法で共有

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

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

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

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

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

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

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

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

関連項目

その他のリソース

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

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

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