CSS を使用して SharePoint ページをブランド化する
カスケード スタイル シート (CSS) は、SharePoint のブランド化で大きな役割を果たします。 SharePoint および SharePoint Online でサイト デザインを適切にカスタマイズするには、SharePoint で CSS がどのように使われるかを理解しておくと役立ちます。
重要
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 html ページ ストラクチャーまたは追加設定なしの CSS スタイル名に依存関係を追加すべき ではない ことに注意してください。これらは通知なしで調整されることがあります。
CSS によるブランド化の概要
SharePoint サイト コレクションを作成すると、SharePoint によってマスター ページ ギャラリー (_catalogs/masterpage) が作成され, .master, .css、画像、HTML、および JavaScript ファイルなど、ブランド化のための大部分の資産がそこに格納されます。
SharePoint は既定で、チーム サイト、発行サイト、および発行機能が有効にされたチーム サイトに seattle.master ページを使用します。 OneDrive for Business サイトには mysite15.master を使用します。 各 .master ファイルが参照する corev15.css ファイルは、あらかじめ SharePoint に付属しているさまざまな .css ファイルから作成されます。
すべての既定のマスター ページでは、スタイルを処理するときに corev15.css を使用し、CSS カスケードと CSS ファイル共有に依存して、ページの領域の特定のコントロールと要素に適用されるスタイルを解決します。 複数の CSS ファイルも組み合わせて、oslo.css ファイルをビルドします。このファイルは、oslo.master マスター ページで使用されます。
マスター ページの CSS
サーバー側オブジェクト モデルの WebControls.CssRegistration クラスに対応する <SharePoint:CssRegistration> コンテンツ プレースホルダーは、CSS ファイルを定義します。 マスター ページへの参照と同様に、SharePoint はページを処理する際に、マスター ページ内のトークンを置き換えます。 WebControls.CssLink クラスはマスター ページから登録を読み取り、生成される結果の HTML ファイルに <link> タグを挿入します。
次の例を検討してください。
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/contoso.css%>" runat="server"/>
実行時に、このコードは次のようにレンダリングされます。
<link rel="stylesheet" type="text/css" href="/sites/nopub/Style%20Library/Core%20Styles/contoso.css">
CSSLink クラスは、ページのレンダリング時にすべてのスタイル シートをレンダリングします。 corev15.css で定義されているスタイルをカスタム .css ファイルでも定義した場合、それらのスタイルが上書きされます。
corev15.css ファイル
既定では、CSS の大部分が SharePoint に適用されます。 SharePoint では、corev15.css ファイルがスタイルの主要なソースです。 このファイルは、ルート サイトやホーム ページのマスター ページ ギャラリーではなく、\TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV15.CSS にあるサーバー上の SharePoint 15 フォルダーに格納されています。
SharePoint が既定で CSS をどのように使用するかについては、Web ブラウザーで開発者ツールを使用して corev15.css ファイルを調べてください。 Internet Explorer で corev15.css を表示するには、(F12 を押してアクセスできる) Internet Explorer 開発者ツールバーを使用して、[CSS] タブを選択します。
corev15.css で定義されているスタイルは, .ms-、および .s4- というプレフィックスを使用して、それが Microsoft によって作成されたスタイルであることを示します。 また、corev15.css では、多くの子セレクターおよび子孫セレクターも使用されています。
ファイルを表示すると、/* [ReplaceFont ( themeFont:"body")] */ という形式で多数のコメントが含まれていることがわかります。 SharePoint は、構成済みの外観を適用する際にこれらのコメントを読み取ります。 これらのコメントは SharePoint に対して、コメントの直後にある CSS の属性を変更するように指示します。 構成済みの外観を適用すると、既定の色、フォント、背景画像の多くが変更される可能性があり、さらに corev15.css 内の設定が更新されることがあります。
注:
このようにして corev15.css ファイルが選択されると、保存された CSS ではなくレンダリングされた CSS が読み込まれます。 保存された CSS とレンダリングされた CSS が一致しない場合があります。 ブラウザーなどのユーザー エージェントも、ユーザーの操作に応じてレンダリングを変更することがあります。
警告
サーバーにサインインして SharePoint ルートにある主要な SharePoint CSS ファイルを編集/カスタマイズしないでください。 このような操作を行うと、サポートおよびアップグレードに悪影響が及びます。 corev15.css を直接編集することはせずに、常にコピーを作成し、名前を変更して、新しいファイルを編集してください。 corev15.css を編集すると、サーバー上のすべての Web アプリケーションにブランド化が適用されます。
SharePoint 用にカスタム スタイル シートを作成するには
corev15.css のコピーを作成し、「contosov15.css」という名前を付けます。
関連するマスターページを開き (この例では contoso.masterpage)、CssRegistration の行を次の例に示すように変更して、corev15.css ではなく contosov15.css を指すようにします。
<SharePoint:CssRegistration Name="Themable/contoso.css" runat="server" />
- CssRegistration 行の下に、次のような行を追加します。
<SharePoint:CssRegistration name="/_catalogs/masterpage/contoso/contoso.css"
runat="server">
カスタム ブランディングでの構成済みの外観
マスター ページから CSS を呼び出す場合、カスタム ブランディングの中で構成済みの外観を使用できます。 CSS ファイルは、SharePoint のファイル システム内で次のいずれかの場所に格納されています。
15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable/Style Library/Themable//Style Library/{culture}/Themable/
および /Style Library/{culture}/Themable/に/Style Library/Themable/カスタム ブランド化ファイルを配置できますが15\TEMPLATE\LAYOUTS\{LCID}\STYLES\Themable、編集できないため、その場所にカスタム ファイルを格納することはできません。
注:
既定でこれらの場所が存在しない場合は、手動で作成すると、SharePoint はそれらの場所がテーマ設定可能だと認識します。
SharePoint ページへのカスタム CSS の適用
カスタム CSS を、リッチ テキスト フィールドおよび Web パーツ領域に追加できます。 CSS をリッチ テキスト フィールドに追加するには、ページを編集モードにして、リボンから [挿入]>[埋め込みコード] を選択します。 Web パーツ領域の場合は、スクリプト エディター Web パーツを使用して HTML、スクリプト、または内部スタイル シートを追加します。 この方法を使用すると、既定の SharePoint UI で [クイック起動] を非表示にすることができます。 SharePoint Online と NoScript 機能を使用している場合、NoScript によってスクリプト エディター Web パーツが無効になります。
外部スタイル シートを使用して CSS を SharePoint サイトに適用するには、そのスタイル シートへの参照を SharePoint ページの <head> タグの内側にある <link> タグに組み込みます。
次のコード例では、カスタム CSS をアセット ライブラリにアップロードし、カスタム アクションを使用して CSS URL への参照を適用し、新しい CSS ファイルへのリンクを作成するカスタム アクションを作成する方法を示します。 このコードは、GitHub にある Branding.AlternateCSSAndSiteLogo サンプルの一部です。
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 you might 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 our 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.
}
}
}