既存の SharePoint サイトとページ領域のブランド化の更新Update the branding of existing SharePoint sites and page regions

既存の SharePoint サイトとサイト コレクションのブランド化を更新したり、SharePoint ページの領域をカスタマイズしたりできます。たとえば、サイトの新しいバージョンを更新する際に、そうした操作を実行できます。You can refresh the branding on your existing SharePoint sites and site collections, as well as customize regions of SharePoint pages. You might want to do this, for example, when you update to a new version of the site.

既存のサイトとサブサイトのブランド化の更新Refresh branding of existing sites and subsites

GitHub 上の Office 365 Developer Patterns and Practices プロジェクトにある Branding.Refresh サンプルには、適用されたブランド化を検証して更新するために、OfficeDevPnP.Core ライブラリを使用して既存のサイトとサブサイトの反復処理を実行する方法が示されています。The Branding.Refresh sample in the Office 365 Developer Patterns and Practices project on GitHub shows you how to use the OfficeDevPnP.Core library to iterate over existing sites and subsites to verify and update the applied branding. このサンプルには、サイトのブランド化を更新する方法が示されていますが、サイトの一覧に新しいライブラリを展開する、プロビジョニング中に展開されたカスタム アクションを更新するなど他の操作を行うために同じ概念を使用できます。The Branding.Refresh sample in the Office 365 Developer patterns and practices project on GitHub shows you how to use the OfficeDevPnP.Core library to iterate over existing sites and subsites to verify and update the applied branding. The sample shows how to update site branding, but the same concept can be used to do other things, such as deploy a new library to a list of sites, or update a custom action that was deployed during provisioning. You can use the same process to move existing sites to a newer version. 同じ処理を使用して、既存のサイトを新しいバージョンに移行できます。You can use the same process to move existing sites to a newer version.

この操作には、次の 2 つの手順が関係しています。The operation involves two steps:

  • 更新するサイトを取得する。Get the sites you want to update.

  • サイト ブランド化を更新する。Update the site branding.

更新するサイトを取得するGet the sites you want to update.

最初に、更新するサイトとサブサイトのリストを取得します。このサンプルには検索機能を使用してそれを実行する方法が示されていますが、サイト ディレクトリから直接読み込んだり、管理者がリストを指定可能な管理 UI を備えたりする他の選択肢もあります。次の例では、検索機能を使用してリストを生成する方法を示します。First, get a list of sites and subsites that you want to update. The sample shows how to do this by using the search functionality, but other options include reading from a site directory, or providing a management UI where administrators can specify the list. The following example shows you how to use search functionality to generate the list.

// Get a list of sites. Search is one way to get this list, an alternative can be a site directory.
List<SiteEntity> sites = cc.Web.SiteSearchScopedByUrl("https://bertonline.sharepoint.com");

// Generic settings (apply changes on all webs or just root web).
bool applyChangesToAllWebs = true;

// Optionally further refine the list of returned site collections.
var filteredSites = from p in sites
                    where p.Url.Contains("13003")
                    select p;

List<SiteEntity> sitesAndSubSites = new List<SiteEntity>();
if (applyChangesToAllWebs)
{
  // You want to update all sites, so the list of sites is extended to all subsites.
  foreach (SiteEntity site in filteredSites)
  {
    sitesAndSubSites.Add(new SiteEntity() { Url = site.Url, 
                                            Title = site.Title, 
                                            Template = site.Template });
    GetSubSites(cc, site.Url, ref sitesAndSubSites);
  }
  sites = sitesAndSubSites;
}

GetSubSites の呼び出しは再帰的なので、サブサイト ツリーをフェッチします。The call to GetSubSites is recursive so it fetches the subsite tree. After the tree has been fetched, verify that the number returned is correct before you continue. ツリーをフェッチしたら、続行する前に返される値が正しいことを確認してください。The call to GetSubSites is recursive so it fetches the subsite tree. After the tree has been fetched, verify that the number returned is correct before you continue.

ブランド化を更新するStep two: Update the branding

処理するサイトを選択した後、OfficeDevPnP.Core メソッドを使用してサイトを操作できます。このサンプルでは、サイトのブランド化の方法が示されていますが、同じ方法であらゆる種類の変更を処理できます。After you select a site for processing, you can use OfficeDevPnP.Core methods to manipulate the site. The sample shows how to do this for site branding, but you can process any type of change in the same way.

このサンプルでは、Web プロパティ バッグを使用して、現在の設定についての情報を格納するパターンが使用されています。このコードは最初に Web プロパティ バッグ値を読み取り、次にそれぞれの値に適切なアクションを実行します。The sample uses a pattern that leverages the web property bag to store information about the current settings. The code first reads the web property bag values and then takes an action that is appropriate for each value.

// Verify that you have a property bag entry.
string themeName = cc.Web.GetPropertyBagValueString(BRANDING_THEME, "");

if (!String.IsNullOrEmpty(themeName))
{
  // If no theme property bag entry, assume no theme has been applied.
  if (themeName.Equals(currentThemeName, StringComparison.InvariantCultureIgnoreCase))
  {
    // The applied theme matches to the theme you want to update.
    int? brandingVersion = cc.Web.GetPropertyBagValueInt(BRANDING_VERSION, 0);
    if (brandingVersion < currentBrandingVersion)
    {
      DeployTheme(cc, currentThemeName);
      // Set the web propertybag entries
      cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
      cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
    }
  }
  else
  {
    if (forceBranding)
    {
      DeployTheme(cc, currentThemeName);
      // Set the web propertybag entries.
      cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
      cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
    }
  }
}


次にテーマを更新するコードは簡単で、OfficeDevPnP.Core メソッドに基づいています。The code that then updates the theme is straightforward and is based on OfficeDevPnP.Core methods.

string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));
string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));

if (IsThisASubSite(cc.Url))
{
  // Retrieve the context of the root site of the site collection.
  using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
  {
    ccParent.Credentials = cc.Credentials;
    cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
    cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
  }
}
else
{
  cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
  cc.Web.SetThemeToWeb(themeName);
}

SharePoint ページ領域のカスタマイズCustomize regions of a SharePoint page

SharePoint ページの領域をカスタマイズすることが目的の場合、対象ページの領域と関連付けられているファイル上でリモート プロビジョニングとカスタムのカスケード スタイル シート (CSS) を組み合わせて使用できます。その場合、SharePoint ページのさまざまな領域とどの SharePoint ファイルが関連付けられているかを最初に把握しておく必要があります。When your objective is to customize regions of a SharePoint page, you can use a combination of remote provisioning and custom cascading style sheets (CSS) on files associated with regions of the page. Initially, then, you must be aware of which SharePoint files are associated with the various regions of a SharePoint page.

表 1. SharePoint ページ領域と関連ファイルTable 1. SharePoint page regions and associated files

ページ領域Page region 関連ファイルAssociated files 詳細情報More information
リボンRibbon 任意の既定のマスター ページ。 対応する CSS:Any of the default master pages. Corresponding CSS:
  • メイン本文 - 本文: #s4-workspaceMain body - body: #s4-workspace

  • スイート バー - 左: #suiteBarLeftSuite bar - Left: #suiteBarLeft

  • スイート バー - 右: #suiteBarRightSuite bar - Right: #suiteBarRight

  • リボン コンテナー: #globalNavBoxRibbon container: #globalNavBox

[コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。Can be hidden via the Focus on Content button.
スイート ナビゲーションSuite navigation 任意の既定のマスター ページ。Any of the default master pages. [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。Can be hidden via the Focus on Content button.
スイート リンクSuite links [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。Can be hidden via the Focus on Content button.
[ようこそ] メニューWelcome menu .master.master [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。Can be hidden via the Focus on Content button.
[設定] メニューまたはギアSettings menu or gear .master.master 例については、「 FTC から CAM への変換 ? SP アドインのカスタム アクションとプロパティ バッグ エントリ」をご覧ください。For an example, see FTC to CAM - Custom actions and property bag entries from SP Add-in.
ヘルプHelp .master.master
リボンのコンテキスト タブRibbon contextual tabs 任意の既定のマスター ページ。Any default master page. 例については、以下をご覧ください。For examples, see the following:
クイック アクセス ツールバーQuick access toolbar .master.master [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。Can be hidden via the Focus on Content button.
サイト ロゴSite logo .master.master

対応する CSS: .ms-sitelcon-imgCorresponding CSS: .ms-sitelcon-img

トップ ナビゲーションTop navigation ナビゲーション CSOM/JSOMNav CSOM/JSOM

.master.master

対応する CSS (編集モードではありません):Corresponding CSS (not in edit mode):
  • 新しい項目を選択したとき: .ms-core-listMenu-horizontalBox li.static > .ms-core.listMenu-selectedNew Item selected: .ms-core-listMenu-horizontalBox li.static > .ms-core.listMenu-selected

  • 新しい項目をポイントしたとき: .mscore-listMenu-horizontalBox li.static > a.ms-core-listMenu-item:hoverNew Item Hover: .mscore-listMenu-horizontalBox li.static > a.ms-core-listMenu-item:hover

  • ポップアウト矢印: .ms-core-listMenu-horizontalBox .dynamic-children.additional-backgroundFlyout Arrow: .ms-core-listMenu-horizontalBox .dynamic-children.additional-background

  • ナビゲーション項目 (上位メニュー項目に対応): .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-itemNav Item (corresponding to top-level menu items): .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item

  • ポップアウト項目: ul.dynamic .ms-core-listMenu-itemFlyout Item: ul.dynamic .ms-core-listMenu-item

  • ポップアウト コンテナー: ul.dynamicFlyout Container: ul.dynamic

  • リンク編集: .ms-navedit-editLinksText > span> .ms-metadataEdit Links: .ms-navedit-editLinksText > span> .ms-metadata

対応する CSS (編集モード):Corresponding CSS (in edit mode):
  • ナビゲーション編集モード リンク: .ms-core-listMenu-horizontalBox .ms-core-listMenuEdit > tr> .msnavedit-linkCell > .ms-core-listMenu-itemNav Edit Mode Link: .ms-core-listMenu-horizontalBox .ms-core-listMenuEdit > tr> .msnavedit-linkCell > .ms-core-listMenu-item

  • リンク追加: .ms-core-listMenu-horizontalBox a.ms-navedit-addNewLinkAdd Link: .ms-core-listMenu-horizontalBox a.ms-navedit-addNewLink

ページ タイトルPage title 対応する CSS (編集モード):Corresponding CSS (in edit mode):
  • ページ タイトルおよびリンクされているページ タイトル: .ms-core-pageTitle、.ms-core-pageTitle aPage Title and Page Title with Link: .ms-core-pageTitle, .ms-core-pageTitle a

  • 説明ボタン: #ms-pageDescriptionDivDescription button: #ms-pageDescriptionDiv

  • 説明ボックス: .js-callout-mainElementDescription box: .js-callout-mainElement

  • 説明ボックス矢印: .js-callout-beakDescription box arrow: .js-callout-beak

  • 説明テキスト: .js-callout-bodyDescription text: .js-callout-body

検索ボックスSearch box ナビゲーション CSOM/JSOMNav CSOM/JSOM

.master.master

対応する CSS:Corresponding CSS:
  • 検索ボックスの枠線: .ms-srch-sb-borderSearch Box Border: .ms-srch-sb-border

  • 検索ボックスの枠線にポイントしたとき: .ms-srch-sb-border: hoverSearch Box Border Hover: .ms-srch-sb-border: hover

  • クリックしたときの検索ボックスの枠線: .ms-srch-sb-borderFocusedSearch Box Border when clicked: .ms-srch-sb-borderFocused

  • 検索ボックスの入力テキスト ボックス: .ms-srch-sb-borderFocusedSearch Box Input Text Box: .ms-srch-sb-borderFocused

  • 検索ボックスの本文: .ms-srch-sbSearch Box Body: .ms-srch-sb

  • 検索ボックスの入力テキスト ボックス: .ms-srch-sb-searchingSearch Box Input Text Box: .ms-srch-sb-searching

  • 検索Search

左ナビゲーションLeft navigation ナビゲーション CSOM/JSOMNav CSOM/JSOM

.master.master

詳細については、次のトピックを参照してください。For more information see:
[方法] SharePoint Server でナビゲーションをカスタマイズするHow to: Customize Navigation in SharePoint Server

  • SharePoint での管理ナビゲーションManaged navigation in SharePoint

  • ツリー ビューTree view .master.master 詳細については、「組み込みのツリービュー ナビゲーターをカスタマイズする方法」を参照してください。For more information, see How to customize the built-in Treeview navigator.
    ページ コンテンツPage content ページ レイアウト/コンテンツ ページPage Layout/Content Pages
    Web パーツ領域/Web パーツWeb Part Zone/Web Parts

    CSS に対応 (Web パーツ領域と Web パーツ):Corresponding CSS (Web Part Zone and Web Part):

    • Web パーツ領域: .ms-webpart-zoneWeb Part Zone: .ms-webpart-zone

    • Web パーツ ホルダー: .ms-webpartzone-cellWeb Part Holder: .ms-webpartzone-cell

    • Web パーツ タイトル: .ms-webpart-titleTextWeb Part Title: .ms-webpart-titleText

    • リンクされている Web パーツ タイトル: .ms-webpart-titleText > aWeb Part Title with Link: .ms-webpart-titleText > a

    • Web パーツの本文: .ms-WPBodyWeb Part Body: .ms-WPBody

    詳細については、「SharePoint でページ レイアウトを作成する」を参照してくださいFor more information, see How to: Create a page layout in SharePoint.

    ページのカスタマイズ領域に関連するサンプルについては、GitHub 上の Office 365 Developer Patterns and Practices プロジェクトで、次を参照してください。For samples related to customizing regions of a page, see the following in the Office 365 Developer patterns and practices project on GitHub:

    既定の SharePoint マスター ページで必要となる「最小」コンテンツ プレースホルダーRequired "minimal" content placeholders in default SharePoint master pages

    SharePoint .master ページではコンテンツ プレースホルダーの使用が必要になります。コンテンツ プレースホルダーは、SharePoint ページがページ ライフサイクルをサポートするために必要な基本的なコンテンツと構造化要素をレンダリングします。表 2 に、それらのコンテンツ プレースホルダーをリストし、説明を記します。SharePoint .master pages require that you use content placeholders, which render the basic content and structural elements that a SharePoint page needs to support the page lifecycle. Table 2 lists and describes the content placeholders.

    表 2. SharePoint マスター ページで最小限必要とされるコンテンツ プレースホルダーTable 2. Minimum required content placeholders for a SharePoint master page

    コンテンツ プレースホルダーContent placeholder 保持するコンテンツの対象Holds content for
    PlaceHolderAdditionalPageHeadPlaceHolderAdditionalPageHead ページの セクションの追加項目。Additional items in the section of a page.
    PlaceHolderBodyAreaClassPlaceHolderBodyAreaClass ページ ヘッダーの追加スタイル。Additional styles in the page header.
    PlaceHolderBodyLeftBorderPlaceHolderBodyLeftBorder ページ本文の左罫線要素。The left border element for the body of the page.
    PlaceHolderBodyRightBorderPlaceHolderBodyRightBorder ページ本文の右罫線要素。The right border element for the body of the page.
    PlaceHolderCalendarNavigatorPlaceHolderCalendarNavigator 予定表がページに表示される際に予定表のナビゲーションのための日付の選択。A date picker for navigating in a calendar when a calendar is visible on a page.
    PlaceHolderFormDigestPlaceHolderFormDigest 「フォーム ダイジェスト」セキュリティ コントロール。The "form digest" security control.
    PlaceHolderGlobalNavigationPlaceHolderGlobalNavigation グローバル ナビゲーション階層リスト (トップ ナビゲーション)。The global navigation breadcrumb (Top Navigation).
    PlaceHolderGlobalNavigationSiteMapPlaceHolderGlobalNavigationSiteMap グローバル ナビゲーションのサイト マップ (トップ ナビゲーション)。The site map in the global navigation (Top Navigation).
    PlaceHolderHorizontalNavPlaceHolderHorizontalNav ページのトップ ナビゲーション メニュー (トップ ナビゲーション)。The top navigation menu for a page (Top Navigation).
    PlaceHolderLeftActionsPlaceHolderLeftActions 左下部ナビゲーション領域 (左ナビゲーション)。The bottom left navigation area (Left Navigation).
    PlaceHolderLeftNavBarPlaceHolderLeftNavBar 左ナビゲーション領域 (左ナビゲーション)。The left navigation area (Left Navigation).
    PlaceHolderLeftNavBarDataSourcePlaceHolderLeftNavBarDataSource 左ナビゲーション メニューのデータ ソース (左ナビゲーション)。The data source for the left navigation menu (Left Navigation).
    PlaceHolderLeftNavBarTopPlaceHolderLeftNavBarTop 左上部ナビゲーション領域 (左ナビゲーション)。The top left navigation area (Left Navigation).
    PlaceHolderMainPlaceHolderMain ページのメイン コンテンツ (ページ コンテンツ)。The main content of the page (Page Content).
    PlaceHolderMiniConsolePlaceHolderMiniConsole ページ レベルのコマンド (エンタープライズ Wiki ページにおけるページ編集、履歴、被リンクなど)。Page-level commands, such as Edit Page, History, and Incoming Links on an enterprise wiki page.
    PlaceHolderNavSpacerPlaceHolderNavSpacer 左ナビゲーション領域の幅 (左ナビゲーション)。The width of the left navigation area (Left Navigation).
    PlaceHolderPageDescriptionPlaceHolderPageDescription ページ コンテンツの説明。Description of the page contents.
    PlaceHolderPageImagePlaceHolderPageImage ページの左上隅のページ アイコン (リボン)。Page icon in the upper-left corner of the page (the Ribbon).
    PlaceHolderPageTitlePlaceHolderPageTitle ブラウザー ページのタイトル バーに表示されるページ タイトル (<title>) (ページ タイトル)。The page title (<title>) (Page Title) displayed in the title bar of the browser page.
    PlaceHolderPageTitleInTitlePlaceHolderPageTitleInTitle 階層リストの直下に表示されるページ タイトル (ページ タイトル)。The page title (Page Title) shown immediately below the breadcrumb.
    PlaceHolderQuickLaunchBottomPlaceHolderQuickLaunchBottom サイド リンク バー ナビゲーションの下部 (トップ ナビゲーション)。The bottom of the Quick Launch navigation (Top Navigation).
    PlaceHolderQuickLaunchTopPlaceHolderQuickLaunchTop サイド リンク バー ナビゲーションの上部 (トップ ナビゲーション)。The top of the Quick Launch navigation (Top Navigation).
    PlaceHolderSearchAreaPlaceHolderSearchArea 検索ボックス コントロールが表示される領域 (検索ボックス)。The area where the search box control appears (Search Box).
    PlaceHolderSiteNamePlaceHolderSiteName サイトの名前 (スイート ナビゲーション)。The name of the site (Suite Navigation).
    PlaceHolderTitleAreaClassPlaceHolderTitleAreaClass ページのタイトル領域 (スイート ナビゲーション)。The title area of the page (Suite Navigation).
    PlaceHolderTitleAreaSeparatorPlaceHolderTitleAreaSeparator タイトル領域のシャドー (スイート ナビゲーション)。Shadows in the title area (Suite Navigation).
    PlaceHolderTitleBreadCrumbPlaceHolderTitleBreadCrumb タイトル階層リンクのコンテンツ領域。The title breadcrumb content area.
    PlaceHolderTitleLeftBorderPlaceHolderTitleLeftBorder タイトル領域の左罫線 (スイート ナビゲーション)。The left border of the title area (Suite Navigation).
    PlaceHolderTitleRightMarginPlaceHolderTitleRightMargin タイトル領域の左余白 (スイート ナビゲーション)。The right margin of the title area (Suite Navigation).
    PlaceHolderTopNavBarPlaceHolderTopNavBar トップ ナビゲーション領域 (トップ ナビゲーション)。The top navigation area (Top Navigation).
    PlaceHolderUtilitiesPlaceHolderUtilities ページ下部に表示する必要のあるその他のコンテンツ (ページ コンテンツ)。Extra content that must appear at the bottom of the page (Page Content).
    SPNavigationSPNavigation ナビゲーション関連の操作が含まれます。Includes navigation-related operations.
    WSSDesignConsoleWSSDesignConsole ページが編集モードの場合のページ編集コントロール。The page editing controls when the page is in Edit mode.

    表 2 にリストされているいずれかのコンテンツ プレースホルダーを SharePoint .master ページから削除すると、SharePoint によってエラーがスローされます。コンテンツ プレースホルダーを非表示状態で追加できます。そのようにすると、エンド ユーザーからは対象コンテンツが見えなくなります。If you remove one of the content placeholders listed in Table 2 from a SharePoint .master page, SharePoint will throw an error. You can add a content placeholder with hidden visibility, which hides the content from end users.

    詳しくは、「 Windows SharePoint Services の既定のマスタ ページ」をご覧ください (この記事では、SharePoint Services 3 の機能について取り上げられていますが、内容が当てはまります)。また、「 コンテンツ プレースホルダー コントロールを操作する」もご覧ください。For more information, see Windows SharePoint Services Default Master Pages (this article describes functionality in SharePoint Services 3, but the content still applies). See also Working with content placeholder controls.

    既定の SharePoint マスター ページ (seattle.master および oslo.master など) には、SharePoint が必要とする以上に多くのコンテンツ プレースホルダーが含まれています。Default SharePoint master pages such as seattle.master and oslo.master include many more content placeholders than SharePoint requires. For example, these master pages include and controls. たとえば、これらのマスター ページには <SharePoint:Themes runat="server"> とコントロールと <SharePoint.CssRegistration runat="server"> コントロールが入っています。For example, these master pages include <SharePoint:Themes runat="server"> and <SharePoint.CssRegistration runat="server"> controls.

    Themes コントロールと CssRegistration コントロールのどちらも、ページ ライフサイクルの間に実行されます。Both the Themes and CssRegistration controls run during the page lifecycle. リモート プロビジョニング パターンを使用すると、カスタム アクションを使用することによって、カスタム CSS を登録するためのサーバー コントロールを追加できます。Both the Themes and CssRegistration controls run during the page lifecycle. By using the remote provisioning pattern, you can use a custom action to add a server control to register custom CSS.

    表示されないコンテンツ プレースホルダーも想定どおりに作動しますが、それらのプレースホルダーによって生成されるコンテンツはブラウザーが認識する HTML ソースから省略されます。Content placeholders that are not visible still work as expected, but any content they generate will be omitted from the HTML source that browsers recognize. A content placeholder with is hidden. Visible="false" に設定されているコンテンツ プレースホルダーは非表示になります。A content placeholder with Visible="false" is hidden.

    重要

    seattle.master や oslo.master など、すぐに使用できる .master ページにあるカスタム マスター ページ内に、カスタム プレースホルダーを作成しないでください。Important: Do not create custom placeholders in custom master pages that exist in out-of-the-box .master pages such as Seattle.master and Oslo.master. 致命的な例外が発生します。This will cause catastrophic exceptions.

    SharePoint Online スイート ナビゲーションのコントロールSharePoint Online Suite Navigation control

    SharePoint Online では、トップ ナビゲーションをレンダリングするスイート ナビゲーション コントロールの新しいマスター ページ マークアップが導入されました。SharePoint Online introduces new master page markup for the Suite Navigation control, which renders the top navigation. スイート ナビゲーション コントロールの既定のマークアップは、サイトがイントラネットか一般向けかによって異なります。The default markup for the Suite Navigation control differs depending on whether the site is an intranet or public-facing. スイート ナビゲーション コントロールの詳細について、またマスター ページに追加できるイントラネットと一般向けサイトの両方のコード サンプルについては、「SharePoint Online スイート ナビゲーションのコントロール」を参照してください。SharePoint Online introduces new master page markup for the Suite Navigation control, which renders the top navigation. The default markup for the Suite Navigation control differs depending on whether the site is an intranet or public-facing. To learn more about the Suite Navigation control and see code examples for both intranet and public-facing sites that you can add to your master pages, see SharePoint Online Suite Navigation control.

    CSOM による SharePoint ページ領域のカスタマイズUse CSOM to customize the regions of a SharePoint page

    通常、UserCustomAction を使用して、リンクやその他の要素を追加または削除することをお勧めします。Generally, we recommend that you use the UserCustomAction class to add or remove links and other elements. これは、CustomAction 要素を使用する SharePoint のバリアントの 1 つです。完全信頼コード モデルを使い慣れている場合、機能フレームワークの一部として認識するかもしれません。This is a variant of SharePoint using the CustomAction element, which you might recognize as part of the feature framework if you're familiar with the full trust code model. CustomAction 要素と機能フレームワーク プロビジョニング パターンは、クライアント側オブジェクト モデル (CSOM) ではサポートされていませんが、CustomAction 要素で使用できる同じロケーションの識別子を CSOM コードで使用できます。Generally, we recommend that you use the UserCustomAction class to add or remove links and other elements. This is a variant of SharePoint using the CustomAction element, which you might recognize as part of the feature framework if you're familiar with the full-trust code model. Although the CustomAction element and feature framework provisioning pattern are not specifically supported in the client-side object model (CSOM), the same location identifiers available to the CustomAction element can be used in CSOM code.

    <CustomAction
      RequiredAdmin = "Delegated | Farm | Machine"
      ControlAssembly = "Text"
      ControlClass = "Text"
      ControlSrc = "Text"
      Description = "Text"
      FeatureId = "Text"
      GroupId = "Text"
      Id = "Text"
      ImageUrl = "Text"
      Location = "Text"
      RegistrationId = "Text"
      RegistrationType = "Text"
      RequireSiteAdministrator = "TRUE" | "FALSE"
      Rights = "Text"
      RootWebOnly = "TRUE" | "FALSE"
      ScriptSrc = "Text"
      ScriptBlock = "Text"
      Sequence = "Integer"
      ShowInLists = "TRUE" | "FALSE"
      ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
      ShowInSealedContentTypes = "TRUE" | "FALSE"
      Title = "Text"
      UIVersion = "Integer">
    </CustomAction>
    

    SharePoint リボンのカスタマイズCustomize the SharePoint ribbon

    リボンをカスタマイズする場合、サーバーがレンダリングする HTML は、カスタム スタイルに割り当てるクラス名に割り当てられます。When you customize the ribbon, the HTML that the server renders is assigned to the class name that you assign to a custom style. この機能を使用するには、スタイル ライブラリに移動し、リボンに追加する各スタイルの新しい CSS ファイルを作成します。To use this feature, go to the Style Library and create a new CSS file for each style that you want to add to the ribbon. リボンの 2 つのセクションにカスタム スタイルを追加できます。You can add custom styles to two sections of the ribbon:

    • [ページ要素] セクションの場合: span.ms-rteElement-<yourowndefinedname>For the Page Elements section: span.ms-rteElement-<yourowndefinedname>. または、スタイル H1、H2、H3、H4 を使用することもできます。これらで、スタイルの適用先テキストを囲みます。For the ** Page Elements** section: . Alternatively, you can use styles H1, H2, H3, or H4, which will be wrapped around the text that the style is applied to.

    • [テキスト スタイル] セクションの場合: .ms-rteEStyle-<yourowndefinedname>For the Text Styles section: .ms-rteEStyle-<yourowndefinedname>.

    次に、CSS クラス定義で、以下の行を追加します。Then, in your CSS class definition, add the following line:

    -ms-name:"The name visual in the ribbon for your style";

    これで、カスタム .css ファイルにおけるカスタム CSS クラスの詳細を定義する作業は終わりです。Now you can finish defining the details of your custom CSS class in your custom .css file.

    Web パーツ ページにおけるスイート ナビゲーションのカスタマイズCustomize Suite Navigation on a Web Part page

    SharePoint では、UI に、ページ タイルに基づいた最新の外観が備わっています。In SharePoint, the UI has a modern look and feel that is based on page tiles. たとえば、既定の SharePoint ページにライブ タイルが既定で表示されます。For example, Live Tiles appear on the default SharePoint page by default. トップ ナビゲーションは、ユーザーが簡単にソーシャル コンテンツや OneDrive for Business を表示したり、アクセスしたりできるようにします。The top navigation makes it easy for users to see and access social content and OneDrive for Business. CSS と JavaScript の組み合わせを使用して、これらの領域の外観をカスタマイズできます。You can customize the look and feel of these areas by using a mix of CSS and JavaScript.

    Web パーツ ページを作成した後、スクリプト エディター Web パーツを使用可能な Web パーツ ゾーンに追加します。After you create a web part page, add a Script Editor web part to an available web part zone. この Web パーツを使用して、ページに JavaScript を追加できます。You can use this web part to add JavaScript to your page. JavaScript コードを、ElementId でトップ ナビゲーション バーを識別するスクリプト エディター Web パーツに追加できます。また、可視性プロパティを非表示に設定することで、それを非表示にできます。You can add JavaScript code to the Script Editor web part that identifies the top navigation bar by its ElementId, and then hide it by setting its visibility property to hidden.

    [設定] メニューまたはギアのカスタマイズCustomize the Settings menu or gear

    次のコード例に示されているように、 UserCustomAction クラスとプロパティ バッグ エントリを使用して、SharePoint サイトの設定メニューをカスタマイズできます。You can use the UserCustomAction class and property bag entries to customize the settings menu of any SharePoint site, as shown in the following code example.

    public void AddCustomActions(ClientContext clientContext)
    {
        // Add a site settings link if it doesn't already exist.
        if (!CustomActionAlreadyExists(clientContext, "Sample_CustomSiteSetting"))
        {
            // Add a site settings link.
            UserCustomAction siteSettingLink = clientContext.Web.UserCustomActions.Add();
            siteSettingLink.Group = "SiteTasks";
            siteSettingLink.Location = "Microsoft.SharePoint.SiteSettings";
            siteSettingLink.Name = "Sample_CustomSiteSetting";
            siteSettingLink.Sequence = 1000;
            siteSettingLink.Url = string.Format(DeployManager.appUrl, clientContext.Url);
            siteSettingLink.Title = "Modify Site Metadata";
            siteSettingLink.Update();
            clientContext.ExecuteQuery();
        }
    
        // Add a site actions link, if it doesn't already exist.
        if (!CustomActionAlreadyExists(clientContext, "Sample_CustomAction"))
        {
            UserCustomAction siteAction = clientContext.Web.UserCustomActions.Add();
            siteAction.Group = "SiteActions";
            siteAction.Location = "Microsoft.SharePoint.StandardMenu";
            siteAction.Name = "Sample_CustomAction";
            siteAction.Sequence = 1000;
            siteAction.Url = string.Format(DeployManager.appUrl, clientContext.Url); ;
            siteAction.Title = "Modify Site Metadata";
            siteAction.Update();
            clientContext.ExecuteQuery();
        }
    }
    

    ツリー ビューのカスタマイズCustomize the tree view

    ツリー ビューの幅を変更するには、.master ページのツリー タグ付近に <div> タグを追加し、スタイル幅属性を <div> にして CSS クラスを割り当てます。To modify the width of the tree view, add a <div> tag around the tree tag in the .master page and assign a CSS class with a style width attribute to the <div>. You can increase the width of the Quick Launch navigation by adding the following style definition to the .css file. .css ファイルに次のスタイル定義を追加することによって、サイド リンク バー ナビゲーションの幅を増やすことができます。You can increase the width of the Quick Launch navigation by adding the following style definition to the .css file.

    .ms-nav {
      width: 220 px;
    }
    

    ページ コンテンツのカスタマイズCustomize page content

    ページの内容をカスタマイズするための要件は、ページに記載されている内容によって異なります。Requirements for customizing page content depend on the content you're including in your page. As for customizing the Site Actions menu, you can use a UserCustomAction object to provision branding to Web Parts. [サイトの操作] メニューのカスタマイズに関しては、UserCustomAction オブジェクトを使用して、Web パーツにブランド化をプロビジョニングできます。Requirements for customizing page content depend on the content you're including in your page. As for customizing the Site Actions menu, you can use a UserCustomAction object to provision branding to Web Parts.

    発行サイトを作成する場合は、基本について「SharePoint でページ レイアウトを作成する」を参照してください。If you are building a publishing site, see Create a page layout in SharePoint to learn the basics. ページ レイアウトは、CSOM の ContentTypeId クラスの可用性に依存します。Page layouts depend on the availability of the ContentTypeId class in CSOM. CSOM で使用できないその他のメンバーについては、一時的な問題回避として ContentTypeId で動作する Windows Communication Foundation (WCF) サービスを使用できます。If you are building a publishing site, see How to: Create a page layout in SharePoint 2013 to learn the basics. Page layouts depend on the availability of the ContentTypeId class in CSOM. As for other members that aren't available in CSOM, you can use a Windows Communication Foundation (WCF) service to work with ContentTypeId as a temporary workaround.

    関連項目See also