SharePoint 2013 にアップグレードする際に発生する可能性のあるブランドの問題Branding issues that may occur when upgrading to SharePoint 2013

適用対象: yes2013 no2016 no2019 (SharePoint Online なし)APPLIES TO: yes2013 no2016 no2019 noSharePoint Online

SharePoint 2013 では、軽量、高速、かつ滑らかな新しいユーザー インターフェイスが導入されました。この UI は、新しい CSS スタイル、テーマ、およびマスター ページを使用して構築されています。この新しい使い勝手の良さを体験するには、新しい UI にアップグレードする必要があります。しかし、新しい UI をサポートするために重要な変更がいくつか加えられているため、カスタム ブランドを使用する一部のシナリオにおいては、アップグレード ストーリーがそのまま使用できない可能性があります。SharePoint 2013 introduces a new user interface that is lightweight, fast, and fluid. This UI is built by using new CSS styles, themes, and master pages. To get this new experience, you must upgrade to the new UI. But the significant changes that were made to support the new UI may break the upgrade story for some scenarios where you use custom branding.

SharePoint 2010 製品 において、以下のいずれかの方法でサイトを既にブランドしているかもしれません。In SharePoint 2010 Products, you may have branded your site in one of several different ways:

  • サイトにカスタム スタイル シートを適用して、SharePoint の既定のスタイルをオーバーライドする。Applying a custom style sheet to your site that overrides the SharePoint default styles.

  • カスタム テーマ (THMX ファイル) をサイトに適用する。Applying a custom theme (THMX file) to your site.

  • SharePoint 2013 に含まれているマスター ページをコピーして変更する。Copying and changing a master page that is included with SharePoint 2013.

  • 発行サイトの完全に新しいカスタム マスター ページを作成する。カスタム マスター ページはカスタム スタイルを使用しており、カスタム ページ レイアウトによって参照されている。Creating a completely new custom master page in a publishing site, where the custom master page uses custom styles and is referenced by custom page layouts.

サイト コレクションを SharePoint 2013 にアップグレードする際、既定の CSS スタイル、テーマ、およびマスター ページが変更されているため、この種のカスタマイズはそのままでは機能しません。カスタム ブランドを再度作成する必要があります。そのためには、SharePoint 2013 で利用可能な新しいスタイル、テーマ、またはマスター ページを使用した上で、改めて再作成したデザインを、アップグレード後のサイト コレクションに適用する必要があります。When you upgrade your site collection to SharePoint 2013, these types of customizations will not work as is because the default CSS styles, themes, and master pages have changed. Instead, you must create your custom branding again. This requires you to use the new styles, themes, or master pages available in SharePoint 2013, and then apply the newly re-created design to the upgraded site collection.

より高速かつより滑らかなユーザー インターフェイスを作成するために、また、以降のアップグレードをさらに予測可能なものとするためには、SharePoint の既定のスタイル、テーマ、マスター ページに変更を加えることが必要でした。Changes to the default SharePoint styles, themes, and master pages were necessary to create a faster and more fluid user interface, and to make subsequent upgrades more predictable.

そのため、サイト コレクションにカスタム ブランドが含まれる場合には、アップグレードする前に、SharePoint 2013 環境でカスタム ブランドをテストしたり再作成したりできる評価サイト コレクションをまず作成することをお勧めします。評価のサイト コレクションの詳細については、「サイト コレクションのアップグレード」を参照してください。For this reason, if your site collection contains custom branding, we recommend that, before you upgrade, you first create an evaluation site collection where you can test and re-create your custom branding in a SharePoint 2013 environment. For more information about an evaluation site collection, see Upgrade a site collection.

以下のセクションにおいて、SharePoint 2013 にアップグレードする際に発生する可能性のあるブランドの問題のリストを示します。The following sections list branding issues that may occur when you upgrade to SharePoint 2013.

カスタム CSSCustom CSS

カスタム ブランドを SharePoint 2010 製品 サイトに適用する最も一般的な方法は、SharePoint の既定のスタイルを上書きするスタイルを含む CSS ファイルを作成することです。The most common way to apply custom branding to a SharePoint 2010 Products site is to create a CSS file that contains styles that override the default SharePoint styles.

新しい UI をさらに高速かつ滑らかなものとするため、SharePoint 2013 では、CSS の実装方法に根本的な変更が加えられています。To make the new UI faster and more fluid, SharePoint 2013 introduced fundamental changes in how CSS is implemented:

  • CSS ファイルのサイズは小さくなっています。CSS file sizes are reduced.

  • CSS セレクターの入れ子は、制限されています。Nesting of CSS selectors is limited.

  • 可能な場合には、CSS 継承が使用されます。CSS inheritance is used whenever possible.

  • クラスは 1 つの場所でのみ定義されます。Classes are defined in only one place.

  • 相互に関連する複数のクラスは、CSS ファイルとしてまとめられます。Related classes are grouped in the CSS file.

  • インライン スタイルおよびインポート宣言は、オーバーライドできないため、使用されません。Inline styles and the !mportant declaration are not used because they cannot be overridden.

  • スタイルでは、一貫性のある構造および名前付け規則が使用されています。Styles use a consistent structure and naming convention.

SharePoint 2013 のスタイルでは、一貫性のある構造および名前付け規則が使用されています。In SharePoint 2013, styles use a consistent structure and naming convention.

名前付けの部分NAMING PART MS-MS- <FEATURE>-<FEATURE>- <NAME><NAME>
説明Explanation
これが Microsoft クラスであることを示します。Indicates this is a Microsoft class.
この項目が関連付けられている機能の名前。または、コア UI の一部として使用される場合は「core」。The name of the feature with which this item is associated, or "core" if it's used as part of the core UI.
タイトルやリンクなど、項目のわかりやすい名前A descriptive name of the item, such as title, link, and so on

SharePoint 2013 での CSS の実装方法にこのような変更が加えられているため、アップグレード時に、カスタム CSS スタイルはサイトに適用されません。この問題を解決するには、まず、評価サイト コレクションを作成した後、そのサイトをテスト環境として使用して、新しい SharePoint 2013 スタイルのうち、どれをオーバーライドする必要があるかを識別する必要があります。これらのスタイルのための CSS ファイルを作成し、アップグレード後のサイトにその CSS を適用します。Because of these changes in how SharePoint 2013 implements CSS, when you upgrade, custom CSS styles will not be applied to your site. To resolve this, you should first create an evaluation site collection and then use that site as the environment where you can identify the new SharePoint 2013 styles that you have to override. Create a CSS file for these styles, and then apply that CSS to your upgraded site.

カスタム テーマCustom theme

SharePoint 2010 製品 において、PowerPoint 2010 などの Office プログラムを使用することにより、THMX ファイルを作成することができます。その後、テーマ ファイルを SharePoint 2010 製品 にアップロードし、サイトにそのテーマを適用することができます。In SharePoint 2010 Products, you can use an Office program such as PowerPoint 2010 to create a THMX file. Then you can upload that theme file to SharePoint 2010 Products and apply the theme to your site.

SharePoint 2013 では、テーマ処理エンジンが改善され、テーマ処理がさらに高速かつ柔軟になり、将来のテーマのアップグレードがさらに容易になっています。テーマ処理モデルでは、CSS の中でコメント スタイルのマークアップが使用されており、ユーザーの選択するフォントや配色パターンなどのパラメーターに基づいて、CSS のさまざまな部分が置き換えられます.SharePoint 2013 のテーマは、XML ファイルによって定義されます。In SharePoint 2013, the theming engine was improved so that theming is faster and more flexible, and so that themes can be more easily upgraded moving forward. The theming model uses comment-style markup in the CSS and then replaces parts of the CSS based on parameters such as fonts and color schemes that users select. Themes in SharePoint 2013 are defined by XML files:

  • SPColor.xml により、カラー パレットが定義されますが、色の値を変更した場合にどの UI 要素が影響を受けるかがより明確になるような、意味のある名前がスロットに付けられています。また、テーマで、不透明度を設定できるようになりました。SPColor.xml defines the color palette, in which slots now have semantic names so that it's more clear what UI elements will be affected when you change a color value. Also, themes now support setting opacity.

  • SPFont.xml は、フォント パターンを定義し、複数言語、Web セーフ フォント、および Web フォントをサポートしています。SPFont.xml defines the font scheme and supports multiple languages, web-safe fonts, and web fonts.

しかし、THMX ファイルを SharePoint 2010 製品 から SharePoint 2013 にアップグレードするサポートはありません。カスタム テーマを SharePoint 2010 製品 サイトに適用した場合、SharePoint 2013 にアップグレードする際に、テーマ ファイルはそのまま残ります。しかし、サイトにはそのテーマが適用されず、サイトの既定のテーマに戻ります。But there is no support to upgrade a THMX file from SharePoint 2010 Products to SharePoint 2013. If you applied a custom theme to the SharePoint 2010 Products site, when you upgrade to SharePoint 2013, the theme files remain in place. But the theme is no longer applied to the site, and the site reverts to the default theme.

この問題を解決するには、まず評価サイト コレクションを作成した後、SharePoint 2013 で新しいテーマ機能を使用して、テーマを再作成します。新しいテーマの詳細については、MSDN の次の資料を参照してください。To resolve this, you should first create an evaluation site collection and then use the new theming features in SharePoint 2013 to create the theme again. For more information about the new themes, see the following articles on MSDN:

重要

カスタム ブランドを使用する場合、将来のアップグレードでもそのブランドが動作するようにするには、デザインを実装するためにテーマを使用することをお勧めします。テーマには、今後の更新が利用できるアップグレード サポートが提供される予定です。実際のシナリオでテーマが機能しない場合、あるいはブランドをさらに広範囲に実施する必要がある場合は、発行サイトをデザイン マネージャーと共に使用することをお勧めします。しかし、カスタム マスター ページとページ レイアウトの構築に手間をかけた場合、SharePoint のアップグレードを実行するたびに、その最中やその後で、毎回デザイン ファイルを再作成または更新しなければならないというのは確かに面倒です。Moving forward, if you want to use custom branding, and if you want that branding to work after future upgrades, we recommend that you use themes to implement your design. Themes will have upgrade support when future updates are available. If themes don't work for your scenario or you must have more extensive branding, we recommend that you use a publishing site together with Design Manager. But understand that if you invest in building custom master pages and page layouts, you may have to rework or update your design files during and after each SharePoint upgrade.

SharePoint 2013 付属のマスター ページをコピーして変更を加えるCopy and change a master page that ships with SharePoint 2013

SharePoint 2010 製品 において、UI に小規模なカスタマイズを加える一般的な方法は、SharePoint 2010 製品 に付属するマスター ページをコピーし変更を加えることです。たとえば、マスター ページに変更を加えることにより、ユーザーからいくつかの機能を削除したり非表示にしたりすることが考えられます。In SharePoint 2010 Products, a common way to make minor customizations to the UI is to copy and change a master page that ships with SharePoint 2010 Products. For example, you might change the master page to remove or hide capabilities from users.

SharePoint 2010 製品 サイトを SharePoint 2013 にアップグレードすると、SharePoint 2013 の既定のマスター ページを使用するようにマスター ページがリセットされます。したがって、アップグレード後、サイトにはカスタム ブランドが表示されます。SharePoint 2010 製品 で作成されたカスタム マスター ページはサイトにそのまま残りますが、新しいサイトには古いマスター ページを適用しないようにしてください。そのようにしても新しいサイトは期待通りに表示されません。When you upgrade a SharePoint 2010 Products site to SharePoint 2013, the master page is reset to use the default master page in SharePoint 2013. Therefore, after upgrade, your site will display its custom branding. The custom master page that was created in SharePoint 2010 Products still lives in the site, but you should not apply the old master page to the new site because the new site will not display as expected.

SharePoint 2013 で新しい UI をサポートするため、既定のマスター ページに変更が加えられました。そのため、SharePoint 2010 製品 で作成されたマスター ページを、SharePoint 2013 のサイトに適用することはできません。To support the new UI in SharePoint 2013, changes were made to the default master pages. For this reason, you cannot apply a master page that was created in SharePoint 2010 Products to a site in SharePoint 2013.

これを解決するには、まず、評価サイト コレクションを作成してから、SharePoint 2013 サイトでマスター ページを再び作成します。新しいマスター ページが期待通りに動作することを確認した後、マスター ページを新しいサイト コレクションに移動し、サイトに適用します。サイトが発行サイトの場合、デザイン マネージャーを使ってマスター ページをエクスポートした後、それをデザイン パッケージの一部としてインポートすることができます。あるいは、サンド ボックス ソリューションの一部として、またはファイルをマスター ページ ギャラリーにアップロードすることによって、マスター ページを移動することができます。To resolve this, you should first create an evaluation site collection, and then create the master page again in the SharePoint 2013 site. After you verify that the new master page works as expected, move the master page to the new site collection and apply it to the site. If the sites are publishing sites, you can use Design Manager to export and then import the master page as part of a design package. Otherwise, you can move the master page as part of a sandboxed solution or by uploading the file to the master page gallery.

重要

SharePoint Foundation 2013 では、発行サイトがサポートされていません。発行サイトを使用するには、SharePoint 2013 を使用する必要があります。SharePoint Foundation 2013 does not support publishing sites. You'll need SharePoint 2013 to use publishing sites.

発行サイトでのカスタム マスター ページCustom master page in a publishing site

企業の通信イントラネット サイトなど、完全にブランド化されたサイトを使用する場合は、全面的なカスタム マスター ページ、およびそのカスタム マスター ページに関連付けられたカスタム ページ レイアウトを使用する発行サイトを使用します。If you want a fully branded site such as a corporate communications intranet site, you use a publishing site that has a fully custom master page and custom page layouts that are attached to the custom master page.

SharePoint 2010 製品 サイトを SharePoint 2013 にアップグレードすると、SharePoint 2013 の既定のマスター ページを使用するようにマスター ページがリセットされます。したがって、アップグレード後、サイトにはカスタム ブランドは表示されません。SharePoint 2010 製品 で作成されたカスタム マスター ページおよびページ レイアウトはサイトにそのまま残りますが、新しいサイトには古いマスター ページを適用しないようにしてください。そのようにしても新しいサイトは期待通りに表示されません。When you upgrade a SharePoint 2010 Products site to SharePoint 2013, the master page is reset to use the default master page in SharePoint 2013. Therefore, after upgrade, your site will not display its custom branding. The custom master page and page layouts created in SharePoint 2010 Products still live in the site, but you should not apply the old master page to the new site because the new site will not display as expected.

この問題を解決するには、まず、発行サイトである評価サイト コレクションを作成してから、SharePoint 2013 サイトでマスター ページを再び作成します。新しいマスター ページが期待通りに動作することを確認した後、次の手順を実行します。To resolve this issue, you should first create an evaluation site collection that is a publishing site, and then create the master page again in the SharePoint 2013 site. After you verify that the new master page works as expected, complete the following steps:

  1. デザイン パッケージの一部として、マスター ページをエクスポートします。Export the master page as part of a design package.

  2. デザイン パッケージを新しいサイト コレクションにインポートします。Import the design package into the new site collection,

  3. 新しいマスター ページをサイトに適用します。Apply the new master page to the site.

カスタム マスター ページ上のカスタム コンテンツ プレースホルダーCustom content placeholders on a custom master page

重要

カスタム マスター ページにカスタム コンテンツ プレースホルダーが含まれる場合、およびカスタム ページ レイアウトにもこのカスタム コンテンツ プレースホルダーが含まれる場合は、アップグレード後にエラーでサイトのホーム ページがまったく表示されなくなることがあります。また、アップグレード後に「予期しないエラーが発生しました」というエラー メッセージが表示されることがあります。If your custom master page contains a custom content placeholder, and if custom page layouts also contain this custom content placeholder, an error may prevent the home page of your site from rendering at all after upgrade. Instead, after upgrade, you may see the error message: "An unexpected error has occurred."

この問題があるかどうかを確認するには、発行サイト コレクションでもある評価サイト コレクションを作成した後、マスター ページを、SharePoint 2013 に付属のマスター ページに設定します。それでもサイトが表示される場合、この問題はありません。サイトが表示されない場合、「予期しないエラー」と相関 ID が表示される場合、この問題が存在しているものと思われます。To determine whether you have this issue, you can create an evaluation site collection that is also a publishing site, and then set the master page to the master page that ships with SharePoint 2013. If the site still displays, you don't have this issue. If the site doesn't display and you get an "unexpected error" with a correlation ID, you likely have this issue.

この問題を解決するには、次の操作を行います。To resolve this issue, do the following:

  1. 発行サイト コレクションである評価サイト コレクションを作成します。Create an evaluation site collection that is a publishing site collection.

  2. SharePoint 2013 マスター ページを作成します。Create a SharePoint 2013 master page.

  3. 2013 マスター ページにカスタム コンテンツ プレースホルダーを追加します。Add the custom content placeholder to the 2013 master page.

  4. 新しいマスター ページをサイトに適用します。Apply the new master page to the site.

  5. カスタム コンテンツ プレースホルダーが含まれないページ レイアウトを作成します。Create a page layout that does not contain the custom content placeholder.

    そのページ レイアウトは、サイトに適用された新しいマスター ページに関連付けられます。The page layout will be associated with the new master page that was applied to the site.

  6. 古いページ レイアウトを使用するすべてのページを、新しいページ レイアウトを使用するように変更します。 Change all the pages that use the old page layout to use the new page layout.

    各ページをブラウザーで個別に手動編集し、リボンのオプションを使用するか、または SharePoint 用のクライアント サイド オブジェクト モデルを使用することによってページをプログラムにより更新することができます。You can manually edit each page individually in the browser and use the option on the Ribbon, or you can use the client-side object model for SharePoint to update pages programmatically.

  7. カスタムのコンテンツ プレースホルダーを含む古いページ レイアウトを削除します。Delete the old page layout that contains the custom content placeholder.

カスタム マスター ページやページ レイアウトにはカスタム コンテンツ プレースホルダーを追加しないようにすることをお勧めします。We recommend that you do not add custom content placeholders to your custom master page or page layouts.

関連項目See also

その他のリソースOther Resources

SharePoint 2013 でのサイト コレクションのアップグレードの問題のトラブルシューティングTroubleshoot site collection upgrade issues in SharePoint 2013

SharePoint 2013 にアップグレードされたサイト コレクションを確認するReview site collections upgraded to SharePoint 2013

Upgrade a site collection to SharePoint 2013Upgrade a site collection to SharePoint 2013

Run site collection health checks in SharePoint 2013Run site collection health checks in SharePoint 2013

SharePoint 2013 のデザイン マネージャーの概要Overview of Design Manager in SharePoint 2013