SharePoint サイトのテーマSharePoint site theming

SharePoint サイトの所有者は、サイトにカスタムのスタイルと色を適用する新しいオプションを使用できます。このオプションにより、サイト コレクション全体に渡るテーマを簡単に定義および管理できるようになります。SharePoint site owners have new options for applying custom styles and colors to sites that make it easier to define and manage themes across site collections.

これらの新機能を次に示します。These new features include:

  • カスタムのテーマを定義して、そのテーマをサイト所有者が使用できるようにする機能。The ability to define custom themes and make them available to site owners. テーマは、テーマごとの色の設定と関連メタデータを保存する JSON スキーマで定義されます。Themes are defined in a JSON schema that stores color settings and related metadata for each theme.
  • 新しいカスタム テーマの作成に使用できるオンラインのテーマ ジェネレータ ツールAn online Theme Generator tool that you can use to define new custom themes.
  • 簡単な既定のテーマのセット。このセットには、現時点で使用可能な 6 つの淡色テーマと 2 つの濃色テーマが含まれています。A simplified set of default themes, with six light themes and two dark themes presently available.
  • 更新されたカラー パレット。このパレットには 12 色の淡色と 6 色の濃色、16 個の補足テーマが含まれています。An updated color palette, with 12 light colors and 6 dark colors, as well as 16 supplementary themes.
  • サイト内のページに使用できるテーマの制御。Control over which themes are available for use on pages within your sites. たとえば、組織のブランドやアイデンティティーに基づいたカスタム テーマを作成して、そのテーマのみをサイト内で使用可能なテーマにすることができます。For example, you can define custom themes based on your organization's branding or identity, and make those the only available themes within your sites.

これらの機能は、管理者の場合は PowerShell コマンドレットから使用できます。開発者の場合は、Client Side Object Model (CSOM) または SharePoint REST API から使用できます。These capabilities are available to administrators via PowerShell cmdlets, and to developers via the SharePoint client-side object model (CSOM) or the SharePoint REST API. 個別のサイト コレクションへのカスタム テーマの適用に関する詳細については、「SharePoint サイト デザインとサイト スクリプトの概要」を参照してください。For information on applying custom themes to individual site collections see SharePoint site design and site script overview

サイトの外観をカスタマイズするためのテーマの操作に関する全般的な情報については、「SharePoint サイトの外観を変更する」を参照してください。For general information about working with themes to customize the look of your sites, see Change the look of your SharePoint site.

既定のテーマDefault themes

次に、既定で使用可能な定義済のテーマを示します。The following predefined themes are available by default:

  • 青緑Teal
  • BlueBlue
  • オレンジOrange
  • 赤色Red
  • 紫色Purple
  • 緑色Green
  • 灰色Gray
  • 濃い黄色 (反転型のテーマ)Dark Yellow (inverted theme)
  • 濃い青色 (反転型のテーマ)Dark Blue (inverted theme)

これらのテーマは読みやすさを目的としてデザインされているため、カスタム テーマを作成する際の開始点として利用できます。These themes have been designed for readability, so you might find them to be useful starting points for creating custom themes. 既定のテーマの詳細については、「SharePoint サイトのテーマ: JSON スキーマ」を参照してください。For more information about default themes, see SharePoint site theming: JSON schema.

既定のテーマに加えて、補足テーマからも選択できます。In addition to the default themes, you can select from supplementary themes. 次のカスタマイズが可能です。The following customizations are available:

  • 淡色テーマ: 金色、青緑色、濃い青色、インディゴ、プラム、明るい灰色Light themes: Gold, Teal, Dark Blue, Indigo, Plum, Warm Gray
  • 濃色テーマ: 赤色、緑色、紫色、灰色Dark themes: Red, Green, Purple, Gray

モダン テーマを選択するSelect a modern theme

SharePoint サイトに使用可能なテーマから選択するには、画面の右上にある__ギア アイコン (⚙️)__ を選択して、[外観の変更] を選択します。To select from the available themes for a SharePoint site, choose the gear icon (⚙️) in the top right corner of the screen, and then select Change the look. テーマを選択するリストが表示されます。このリストには、サイトの構成方法に応じて既定のテーマやカスタム テーマが含まれます。You'll be presented with a list of themes to choose from, which might include default themes and/or custom themes depending on how your site has been configured.

次の画像は、テーマ ピッカー ダイアログ ボックスに表示されている既定のテーマを示しています。The following image shows how the default themes are presented in the theme picker dialog box.

既定のテーマと濃色 (反転型) テーマのリストを示している画像

リスト内のテーマを選択すると、そのテーマの色の設定がすぐにページに適用されるため、選択したテーマによる外観を確認できるようになります。When you choose a theme in the list, those color settings are instantly applied to the page so that you can see what the selected theme will look like.

使用するテーマを見つけたら、[適用] を選んで選択内容を保存するか、[キャンセル] を選んで現在のテーマに戻します。After you've found a theme that you want to use, choose Apply to save your selection, or choose Cancel to revert to your current theme.

クラシック テーマを使用するWork with classic themes

クラシック テーマは、[外観の変更] にリストされたモダン テーマの下側にある [クラシックの外観の変更オプション] へのリンクをクリックすることで引き続き使用できます。You can still use the classic themes by choosing the link to Classic change the look options under the modern themes listed under Change the look. ただし、モダン SharePoint UI はクラシック UI と異なるため、モダン ページにクラシック テーマを使用するときにはいくつかの制限が適用されます。Because the modern SharePoint UI differs from the classic UI, however, some limitations apply when you use classic themes with modern pages.

クラシック テーマを選択すると、クラシック テーマの設定からモダン テーマが生成されます。これには、isInverted フラグ、背景画像、および色の設定 (ContentAccent1PageBackground、および BackgroundOverlay) が含まれます。When you select a classic theme, a modern theme is generated from the settings in the classic theme, including the isInverted flag, the background image, and the color settings for ContentAccent1, PageBackground, and BackgroundOverlay. isInvertedTrue に設定されていると、中間色 (NeutralDarkNeutralLight など) が反転されます。If isInverted is set to True, neutral colors such as NeutralDark and NeutralLight will be reversed.

最も簡単なエクスペリエンスを求める場合は、モダン ページにモダン テーマを使用するようにお勧めします。For the simplest experience, we recommend that you use modern themes with modern pages. モダン ページにクラシック テーマを使用する必要がある場合は、コンテンツが読みやすくアクセス可能であることを確認するために、慎重に自分のサイトをテストしてください。If you need to use classic themes with modern pages, test your site carefully to verify that your content is readable and accessible.

カスタム テーマの問題のトラブルシューティングTroubleshoot custom theme issues

モダン サイトのテーマのエクスペリエンスは、クラシック サイト テンプレートにもロール アウトされています。The modern site theming experience has been rolled out to classic site templates, too. クライアント側の新しいテーマ アーキテクチャは高性能ですが、サイトのテーマを変更した後、クラシック サイトにカスタマイズが正しく表示されない場合は、機能を無効にして新しいテーマ エクスペリエンスからオプトアウトすることができます。While the new client-side theming architecture is more performant, if you have customizations on classic sites that aren’t rendering properly after you change the site’s theme, you can opt the site out of the new theming experience by disabling the feature. このオプトアウトは、適切に表示されないカスタム テーマの参照がある、クラシック サイトにのみ適用されることに注意してください。Please note, this opt-out only applies to classic sites where you have custom theme references that aren't rendering properly. このサイト レベルのオプトアウトを有効にすることで、モダン テーマを無効にします。これにより、提供される高速テーマの利点も失うことになります。By enabling this site-level opt-out you will disable the modern theming - and also lose the fast theming benefits it provides.

この操作を行うには、CSOM (クライアント側オブジェクト モデル) ラッパーで Windows PowerShell スクリプトを使用する必要があります。To do this, you must use a Windows PowerShell script with a CSOM (client-side object model) wrapper. PnP PowerShell 有効化機能コマンドの利用をお勧めします:We recommend using the PnP PowerShell enable feature command:

  1. 次の最小要件を満たしていることを確認します:Verify that you meet the following minimum requirements:

    • モダンサイトのテーマを無効にしたい場合は、少なくともそのサイトのサイトコレクションの所有者であることが必要です。You are at least a site collection owner on the site where you want to disable modern site themes
    • 実行ポリシーを確認しましたYou have read about Execution Policies
  2. https://github.com/SharePoint/PnP-PowerShell/releases から最新の PnP PowerShell をダウンロードするDownload the latest PnP PowerShell from https://github.com/SharePoint/PnP-PowerShell/releases.

    注意

    PnP PowerShellは、アクティブなコミュニティを備えたオープンソースソリューションで、サポートを提供します。PnP PowerShell is an open-source solution with active community providing support for it. Microsoft からのオープン ソース ツールのサポート SLA はありません。There is no SLA for the open-source tool support from Microsoft.

  3. Connect-PnPOnline -Url <SiteUrl> -UseWebLogin を入力する (<SiteUrl> を、オプトアウトする URL に置き換えます)Enter Connect-PnPOnline -Url <SiteUrl> -UseWebLogin (replacing <SiteUrl> with the url of the site you wish to opt out of).

  4. ダイアログ ボックスが表示されたら、資格情報を入力します。Enter your credentials when prompted.

  5. サイトからオプトアウトするには、次のように機能を有効化する必要があります:To opt out of the site, you need to enable a feature:

    • Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B を入力するEnter Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B
    • 前のコマンドから何も返答がないことを確認する (機能がまだ有効になっていないことを確認するためです)Verify that nothing is returned from the previous command (this confirms the feature isn’t enabled yet)
    • Enable-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B を入力するEnter Enable-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B
    • Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B を入力するEnter Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B
  6. 次に、以下の返答があることを確認します:Verify that the following is returned:

    ClientSideThemingOptOut - 5138468e-3d76-4f72-9de4-e029f1245a7b

Windows PowerShell の詳細については、「PowerShell」を参照してください。For more information about Windows PowerShell, see PowerShell.

関連項目See also