リモート プロビジョニングと CSS を使用して SharePoint ページをカスタマイズする
カスケード スタイル シート (CSS) を使用して SharePoint のリッチ テキスト フィールドおよび Web パーツ領域をカスタマイズできます。 リッチ テキスト フィールドをカスタマイズするには、編集中のページから直接操作できます。 Web パーツ領域については、スクリプト エディター Web パーツを使用して HTML またはスクリプトを追加したり、CSS スタイル シートを関連付けたりすることができます。
この記事に関連付けられているコード サンプルについては、GitHub 上の Office 365 Developer Patterns and Practices プロジェクトに含まれている「Branding.AlternateCSSAndSiteLogo」を参照してください。
重要
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 html ページ ストラクチャーまたは追加設定なしの CSS スタイル名に依存関係を追加すべき ではない ことに注意してください。これらは通知なしで調整されることがあります。
リッチ テキスト フィールドをカスタマイズする
リッチ テキスト フィールドをカスタマイズするには、ページ エディターで CSS を使用して直接作業します。
SharePoint ページで、[編集] を選択してページ エディターを開きます。
リボンで [挿入]>[埋め込みコード] を選択します。
これで、リッチ テキスト フィールドの CSS 要素を追加または変更できるようになります。
Web パーツ領域をカスタマイズする
CSS を使用して Web パーツ領域をカスタマイズするには、スクリプト エディター Web パーツを使用します。
注:
SharePoint Online と NoScript 機能を使用している場合、スクリプト エディター Web パーツは無効になっています。
次のコード例では、カスタム CSS をアセット ライブラリにアップロードし、カスタム アクションを使用して CSS URL への参照を適用し、新しい CSS ファイルへのリンクを作成するカスタム アクションを作成します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.EventReceivers;
namespace AlternateCSSAppAutohostedWeb.Services
{
public class AppEventReceiver : IRemoteEventService
{
public SPRemoteEventResult ProcessEvent(SPRemoteEventProperties properties)
{
SPRemoteEventResult result = new SPRemoteEventResult();
try
{
using (ClientContext clientContext = TokenHelper.CreateAppEventClientContext(properties, false))
{
if (clientContext != null)
{
Web hostWebObj = clientContext.Web;
List assetLibrary = hostWebObj.Lists.GetByTitle("Site Assets");
clientContext.Load(assetLibrary, l => l.RootFolder);
// First, upload the CSS files to the Asset Library.
DirectoryInfo themeDir = new DirectoryInfo(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "CSS");
foreach (var themeFile in themeDir.EnumerateFiles())
{
FileCreationInformation newFile = new FileCreationInformation();
newFile.Content = System.IO.File.ReadAllBytes(themeFile.FullName);
newFile.Url = themeFile.Name;
newFile.Overwrite = true;
Microsoft.SharePoint.Client.File uploadAsset = assetLibrary.RootFolder.Files.Add(newFile);
clientContext.Load(uploadAsset);
break;
}
string actionName = "SampleCSSLink";
// Now, apply a reference to the CSS URL via a custom action.
// Clean up existing actions that we may have deployed.
var existingActions = hostWebObj.UserCustomActions;
clientContext.Load(existingActions);
// Run uploads and initialize the existing Actions collection.
clientContext.ExecuteQuery();
// Clean up existing actions.
foreach (var existingAction in existingActions)
{
if(existingAction.Name.Equals(actionName, StringComparison.InvariantCultureIgnoreCase))
existingAction.DeleteObject();
}
clientContext.ExecuteQuery();
// Build a custom action to write a link to your new CSS file.
UserCustomAction cssAction = hostWebObj.UserCustomActions.Add();
cssAction.Location = "ScriptLink";
cssAction.Sequence = 100;
cssAction.ScriptBlock = @"document.write('<link rel=""stylesheet"" href=""" + assetLibrary.RootFolder.ServerRelativeUrl + @"/cs-style.css"" />');";
cssAction.Name = actionName;
// Apply.
cssAction.Update();
clientContext.ExecuteQuery();
}
result.Status = SPRemoteEventServiceStatus.Continue;
return result;
}
}
catch (Exception ex)
{
result.Status = SPRemoteEventServiceStatus.CancelWithError;
result.ErrorMessage = ex.Message;
return result;
}
}
public void ProcessOneWayEvent(SPRemoteEventProperties properties)
{
// This method is not used by app events.
}
}
}