カスタム テーマと CSS を SharePoint にアップグレードするUpgrade custom themes and CSS to SharePoint

カスタム CSS、カスタム マスター ページ、SharePoint で機能するようにカスタマイズを更新する方法など、テーマのカスタマイズに関するアップグレードの問題を説明します。Learn about upgrade issues with themes customizations, such as custom CSS and custom master pages, and how to update customizations to work in SharePoint.

テーマのカスタマイズとアップグレードした SharePoint サイトの概要Introduction to themes customizations and upgraded SharePoint sites

SharePoint のテーマ エクスペリエンスは再設計され、サイトのレイアウト、カラー パレット、フォント スキーム、および背景画像を変更して、サイトのカスタマイズに関するプロセスが簡易化されました。テーマのユーザー インターフェイスは再設計され、テーマに関連する新しいファイル形式のセットが追加されました。SharePoint 2010 で作成したカスタム テーマは SharePoint では使用できないため、カスタム テーマを再作成する必要があります。SharePoint サイトでカスタム CSS ファイルが正常に動作するようにするには、新しいマスター ページ、カラー スロット、およびその他のテーマ設定の変更に対応するように更新する必要があります。The theming experience in SharePoint was redesigned to simplify the process of customizing sites by changing the site layout, color palette, font scheme, and background image. The themes user interface was redesigned and there is a set of new file formats related to themes. Custom themes that were created in SharePoint 2010 cannot be used on SharePoint sites, you must re-create them. Custom CSS files may not work successfully on SharePoint sites until after they are updated to work with the new master pages, color slots, and other theming changes.

この記事では、新しいテーマ エクスペリエンスでカスタム SharePoint 2010 テーマ、SharePoint 2010 CSS、およびカスタム CSS を使用するときに発生する可能性がある問題について説明します。また、SharePoint サイトで使用する場合に、カスタムの SharePoint 2010 テーマ、SharePoint 2010 CSS、カスタム CSS の変更が必要な点についても説明します。This article describes the issues that may occur when you try to use custom SharePoint 2010 themes, SharePoint 2010 CSS, and custom CSS with the new theming experience. It also explains the changes you have to make to your custom SharePoint 2010 themes, SharePoint 2010 CSS, and custom CSS if you want to use them in SharePoint sites.

注意

SharePoint 2010 テーマは、2010 モードで実行しているサイト コレクションで使用できます。Note: SharePoint 2010 themes can be used on site collections that are running in 2010 mode. サイト コレクション モードの詳細については、「SharePoint でサイト コレクションのアップグレードを計画する」または「SharePoint へのアップグレードを計画する」を参照してください。For more information about site collection modes, see Plan for site collection upgrades in SharePoint or Plan for upgrade to SharePoint.

テーマの詳細については、「SharePoint のテーマの概要」を参照してください。For more information about themes, see Themes overview for SharePoint.

SharePoint でのカスタム SharePoint 2010 テーマCustom SharePoint 2010 themes in SharePoint

SharePoint 2010 では、テーマは THMX ファイルに保存されていました。SharePoint では、テーマに関連する新しいファイル形式のセットがあります。カラー パレットとフォント スキームは、別の XML ファイルに保存されます (それぞれ .spcolor ファイルと .spfont ファイル)。In SharePoint 2010, themes were stored in THMX files. In SharePoint, there is a set of new file formats related to themes. Color palettes and font schemes are stored in separate XML files (.spcolor and .spfont files, respectively).

THMX ファイルを SharePoint 2010 から SharePoint にアップグレードすることはできません。カスタム テーマを SharePoint 2010 サイトに適用した場合、SharePoint にアップグレードするとテーマ ファイルは残りますが、テーマはサイトに適用されなくなり、サイトは既定のテーマに戻ります。SharePoint サイトで SharePoint 2010 テーマのカスタマイズを使用する場合、SharePoint のテーマ設定に関するガイダンスを使用して再作成する必要があります。You cannot upgrade a THMX file from SharePoint 2010 to SharePoint. If you applied a custom theme to your SharePoint 2010 site, when you upgrade to SharePoint, the theme files remain in place, but the theme is no longer applied to the site, and the site reverts to the default theme. If you want to use your SharePoint 2010 themes customizations on SharePoint sites, you must re-create them using the SharePoint theming guidance.

テーマのカスタマイズの作成方法の詳細については、「 SharePoint でカスタム テーマを展開する方法」と「 SharePoint のカラー パレットとフォント」を参照してください。また、SharePoint のカラー パレット ツールを使用して、SharePoint 設計を作成できます。Microsoft ダウンロード センターから SharePoint カラー パレット ツールをダウンロードできます。For more information about creating themes customizations, see How to: Deploy a custom theme in SharePoint and Color palettes and fonts in SharePoint. You can also use the SharePoint color palette tool to help you create SharePoint designs. You can download the SharePoint color palette tool from the Microsoft Download Center.

ヒント: PowerPoint で THMX ファイルを開いて、カスタム テーマで色がどのように定義されているかを確認できます。その後、カラー パレット ツールを使用して、カラー パレット ファイル (.spcolor ファイル) として色を再作成できます。Tip: You can open a THMX file in PowerPoint to see how the colors are defined in the custom theme and then use the color palette tool to re-create the colors as a color palette file (an .spcolor file). カラー パレットは、SharePoint サイトで使用される色の組み合わせです。A color palette is the combination of colors that are used in a SharePoint site.

プリインストールされた SharePoint テーマのいずれかを使用することもできます。詳細については、Office.com の「 発行サイトのテーマを選択する」を参照してください。You can also decide to use one of the preinstalled SharePoint themes. For more information, see Choose a theme for your publishing site on Office.com.

カスタマイズしたマスター ページをアップグレードするUpgrading customized master pages

SharePoint 2010 サイトを SharePoint にアップグレードすると、サイトは SharePoint の既定のマスター ページを使用するように構成されます。SharePoint 2010 サイト用のカスタム マスター ページがあった場合は、そのページがサイトに残っているため、SharePoint サイトに適用することができます。SharePoint ユーザー インターフェイスまたは SPWeb クラスを使用して、カスタム マスター ページをアップグレードしたサイトに適用できます。マスター ページを変更する方法の詳細については、「 [方法]: SharePoint Server 2013 のサイトにマスター ページを適用する」を参照してください。When you upgrade a SharePoint 2010 site to SharePoint, the site is configured to use the default master page for SharePoint. If you had a custom master page for your SharePoint 2010 site, it still resides in the site and you can apply it to the SharePoint site. You can use the SharePoint user interface or the SPWeb class to apply the custom master page to the upgraded site. For more information about how to change the master page, see How to: Apply a master page to a site in SharePoint.

SharePoint 2010 のカスタム マスター ページを、アップグレードされた SharePoint サイトに適用するかどうかを判断する前に、次の点について検討してください。Consider the following before you decide whether to apply the SharePoint 2010 custom master page to the upgraded SharePoint site:

  • カスタム マスター ページがカスタム CSS ファイルに依存している場合: カスタム マスター ページをアップグレードされたサイトに適用すると、サイトは元の 2010 エクスペリエンスに戻りますが、SharePoint テーマをサイトに適用できなくなります。If the custom master page depends on custom CSS files: Applying the custom master page to the upgraded site should return the site to its original 2010 experience. But, you will be unable to apply a SharePoint theme to the site.

    カスタム マスター ページとカスタム CSS ファイルを SharePoint テーマ エクスペリエンスで使用するには、新しい SharePoint カラー スロットを使用するように CSS ファイルを更新する必要があります。テーマのユーザー インターフェイスからカスタム マスター ページにアクセスする場合、マスター ページのプレビュー ファイルも作成する必要があります。詳細については、「 SharePoint でのマスター ページ プレビュー ファイルを作成する方法」を参照してください。If you want to use the custom master page and custom CSS files together with the SharePoint theming experience, you must update the CSS files to use the new SharePoint color slots. If you want to access the custom master page from the themes user interface, you also have to create a master page preview file. For more information, see How to: Create a master page preview file in SharePoint.

  • カスタム マスター ページが SharePoint 2010 CSS ファイルに依存している場合: CSS ファイルは SharePoint 2010 から SharePoint で大幅に変更されました。多くの場合、アップグレードされたサイトへの適用が成功するには、新しいクラスを使用できるように、マスター ページを変更する必要があります。CSS クラスの詳細については、「 SharePoint アドインの UX 設計ガイドライン」の「 SharePoint アプリでホスト Web の CSS を使用する 」セクションを参照してください。If the custom master page depends on SharePoint 2010 CSS files: CSS files have changed significantly from SharePoint 2010 to SharePoint. In many cases, you will have to rework the master page so that it can work with new classes before you can successfully apply it to the upgraded site. For more information about CSS classes, see the Using the host web CSS in apps for SharePoint section in SharePoint Add-ins UX design guidelines.

SharePoint 2010 CSS とカスタム CSS ファイルSharePoint 2010 CSS and custom CSS files

SharePoint 2010 CSS ファイルとカスタム CSS ファイルを変更しないと、SharePoint サイトで使用できません。次に、SharePoint 2010 CSS とカスタム CSS ファイルに適用する SharePoint の変更点について説明します。Unmodified SharePoint 2010 CSS files and custom CSS files cannot be used on SharePoint sites. The following describes SharePoint changes that apply to SharePoint 2010 CSS and custom CSS files:

  • カラー スロット。使用できるカラー スロットの数は SharePoint で大幅に増えました。新しいテーマ エクスペリエンスで SharePoint 2010 CSS ファイルを使用するには、その CSS ファイルのカラー スロットを更新する必要があります。詳細については、「 SharePoint のカラー パレットとフォント」の「 カラー スロットのマッピング」セクションを参照してください。Color slots. The number of available color slots has increased significantly in SharePoint. You must update the color slots in SharePoint 2010 CSS files before they can be used in the new theming experience. For more information, see the Color slot mapping section in Color palettes and fonts in SharePoint.

  • フォント スロット。使用できるフォント スロットの一覧を見直し、SharePoint で使用する CSS ファイルが、正しいフォント スロットを使用していることを確認します。詳細については、「 SharePoint のカラー パレットとフォント」の フォント スロット」セクションを参照してください。Font slots. You should review the list of available font slots and verify that the CSS files you want to use in SharePoint are using the correct font slots. For more information, see the Font slots section in Color palettes and fonts in SharePoint.

  • 新しい注釈。SharePoint には、背景画像を置き換えることができる新しい注釈があります。詳細については、「 SharePoint でカスタム CSS ファイルをテーマ設定対応にする方法」を参照してください。New annotation. SharePoint has a new annotation that lets you replace the background image. For more information, see How to: Make custom CSS files themable in SharePoint.

  • 新しいクラス。場合によっては、SharePoint の新しいクラスを使用できるように CSS ファイルを更新する必要があります。CSS クラス (CSS スタイルとも呼ばれます) の詳細については、「 SharePoint アドインの UX 設計ガイドライン」の「 SharePoint アプリでホスト Web の CSS を使用する 」セクションを参照してください。New classes. You may have to update CSS files to work with the new classes in SharePoint. For more information about CSS classes (also referred to as CSS styles), see the Using the host web CSS in apps for SharePoint section in SharePoint Add-ins UX design guidelines.

関連項目See also