カスタム テーマと CSS を SharePoint にアップグレードする
カスタム CSS、カスタム マスター ページ、SharePoint で機能するようにカスタマイズを更新する方法など、テーマのカスタマイズに関するアップグレードの問題を説明します。
テーマのカスタマイズとアップグレードした SharePoint サイトの概要
SharePoint のテーマ エクスペリエンスは再設計され、サイトのレイアウト、カラー パレット、フォント スキーム、および背景画像を変更して、サイトのカスタマイズに関するプロセスが簡易化されました。 テーマのユーザー インターフェイスは再設計され、テーマに関連する新しいファイル形式のセットが追加されました。 SharePoint 2010 で作成したカスタム テーマは SharePoint では使用できないため、カスタム テーマを再作成する必要があります。 SharePoint サイトでカスタム CSS ファイルが正常に動作するようにするには、新しいマスター ページ、カラー スロット、およびその他のテーマ設定の変更に対応するように更新する必要があります。
この記事では、新しいテーマ エクスペリエンスでカスタム SharePoint 2010 テーマ、SharePoint 2010 CSS、およびカスタム CSS を使用するときに発生する可能性がある問題について説明します。 また、SharePoint サイトで使用する場合に、カスタムの SharePoint 2010 テーマ、SharePoint 2010 CSS、カスタム CSS の変更が必要な点についても説明します。
注:
SharePoint 2010 テーマは、2010 モードで実行しているサイト コレクションで使用できます。 サイト コレクション モードの詳細については、「 SharePoint でのサイト コレクションのアップグレードの計画」または「SharePointへのアップグレードの計画」を参照してください。
テーマの詳細については、「 SharePoint のテーマの概要」を参照してください。
SharePoint でのカスタム SharePoint 2010 テーマ
SharePoint 2010 では、テーマは THMX ファイルに保存されていました。 SharePoint では、テーマに関連する新しいファイル形式のセットがあります。 カラー パレットとフォント スキームは、別の XML ファイルに保存されます (それぞれ .spcolor ファイルと .spfont ファイル)。
THMX ファイルを SharePoint 2010 から SharePoint にアップグレードすることはできません。 カスタム テーマを SharePoint 2010 サイトに適用した場合、SharePoint にアップグレードするとテーマ ファイルは残りますが、テーマはサイトに適用されなくなり、サイトは既定のテーマに戻ります。 SharePoint サイトで SharePoint 2010 テーマのカスタマイズを使用する場合、SharePoint のテーマ設定に関するガイダンスを使用して再作成する必要があります。
テーマのカスタマイズの作成の詳細については、「方法: SharePoint でカスタム テーマを展開する」および「SharePoint のカラー パレットとフォント」を参照してください。 また、SharePoint のカラー パレット ツールを使用して、SharePoint 設計を作成できます。 SharePoint カラー パレット ツールは、Microsoft ダウンロード センターからダウンロードできます。
ヒント: PowerPoint で THMX ファイルを開いて、カスタム テーマで色がどのように定義されているかを確認できます。その後、カラー パレット ツールを使用して、カラー パレット ファイル (.spcolor ファイル) として色を再作成できます。 カラー パレットは、SharePoint サイトで使用される色の組み合わせです。
プリインストールされた SharePoint テーマのいずれかを使用することもできます。 詳細については、「Office.com で発行サイトのテーマを選択する 」を参照してください。
カスタマイズしたマスター ページをアップグレードする
SharePoint 2010 サイトを SharePoint にアップグレードすると、サイトは SharePoint の既定のマスター ページを使用するように構成されます。 SharePoint 2010 サイト用のカスタム マスター ページがあった場合は、そのページがサイトに残っているため、SharePoint サイトに適用することができます。 SharePoint ユーザー インターフェイスまたは SPWeb クラスを使用して、カスタム マスター ページをアップグレードしたサイトに適用できます。 マスター ページを変更する方法の詳細については、「 [方法]: SharePoint Server 2013 のサイトにマスター ページを適用する」を参照してください。
SharePoint 2010 のカスタム マスター ページを、アップグレードされた SharePoint サイトに適用するかどうかを判断する前に、次の点について検討してください。
カスタム マスター ページがカスタム CSS ファイルに依存している場合: アップグレードしたサイトにカスタム マスター ページを適用すると、サイトは元の 2010 エクスペリエンスに戻ります。 ただし、SharePoint テーマをサイトに適用することはできません。
カスタム マスター ページとカスタム CSS ファイルを SharePoint テーマ エクスペリエンスで使用するには、新しい SharePoint カラー スロットを使用するように CSS ファイルを更新する必要があります。 テーマのユーザー インターフェイスからカスタム マスター ページにアクセスする場合、マスター ページのプレビュー ファイルも作成する必要があります。 詳細については、「 方法: SharePoint でマスター ページ プレビュー ファイルを作成する」を参照してください。
カスタム マスター ページが SharePoint 2010 CSS ファイルに依存している場合: CSS ファイルは SharePoint 2010 から SharePoint で大幅に変更されました。 多くの場合、アップグレードされたサイトへの適用が成功するには、新しいクラスを使用できるように、マスター ページを変更する必要があります。 CSS クラスの詳細については、「 SharePoint アドインの UX 設計ガイドライン」の「 SharePoint アプリでホスト Web の CSS を使用する 」セクションを参照してください。
SharePoint 2010 CSS とカスタム CSS ファイル
SharePoint 2010 CSS ファイルとカスタム CSS ファイルを変更しないと、SharePoint サイトで使用できません。 次に、SharePoint 2010 CSS とカスタム CSS ファイルに適用する SharePoint の変更点について説明します。
カラー スロット。 使用できるカラー スロットの数は SharePoint で大幅に増えました。 新しいテーマ エクスペリエンスで SharePoint 2010 CSS ファイルを使用するには、その CSS ファイルのカラー スロットを更新する必要があります。 詳細については、「SharePoint のカラー パレットとフォント」の「カラースロット マッピング」セクションを参照してください。
フォント スロット。 使用できるフォント スロットの一覧を見直し、SharePoint で使用する CSS ファイルが、正しいフォント スロットを使用していることを確認します。 詳細については、「SharePoint のカラー パレットとフォント」の「フォントスロット」セクションを参照してください。
新しい注釈。 SharePoint には、背景画像を置き換えることができる新しい注釈があります。 詳細については、「 方法: カスタム CSS ファイルを SharePoint でテーマに設定する」を参照してください。
新しいクラス。 場合によっては、SharePoint の新しいクラスを使用できるように CSS ファイルを更新する必要があります。 CSS クラス (CSS スタイルとも呼ばれます) の詳細については、「 SharePoint アドインの UX 設計ガイドライン」の「 SharePoint アプリでホスト Web の CSS を使用する 」セクションを参照してください。