SharePoint Onlineを活用していると、デザインを自分好みに変えて企業ブランドやUIを統一したくなることがありますよね。クラシックサイトであればMasterページからCSSを適用できましたが、モダンサイトでは仕組みが違い戸惑いがちです。本記事では、SharePoint Designerでの編集方法やモダンサイトで推奨されるSPFx拡張機能によるCSS注入の手順など、実践的なポイントを詳しく解説していきます。
SharePoint OnlineでカスタムCSSを適用する背景と課題
SharePoint OnlineはMicrosoft 365の一部として提供され、日々の業務に欠かせないプラットフォームとなっています。とはいえ、標準機能だけでは細部のデザインカスタマイズに不満を感じるケースも多いでしょう。特に以下のような要望がある方は、カスタムCSSの適用を検討します。
- 企業ブランドに沿った色使いやフォントに変更したい
- ユーザーインターフェイスをより見やすくしたい
- 特定のウィジェットやパーツの表示を独自デザインにしたい
しかしながら、SharePoint Onlineは「クラシックサイト」と「モダンサイト」でカスタマイズ可能な範囲が異なります。クラシックサイトであればMasterページを直接編集し、そこからCSSを参照させる方法が一般的でした。一方、モダンサイトではMasterページの利用が無効化されており、代替としてSPFx (SharePoint Framework) を用いることが推奨されています。
クラシックサイトとモダンサイトの違い
クラシックサイトとモダンサイトでは、デザインカスタマイズの方法が大きく異なります。以下の表に、主要な違いをまとめました。
| 項目 | クラシックサイト | モダンサイト |
|---|---|---|
| Masterページ | 編集・差し替えが可能 | 非推奨・既定では使わない |
| 代替CSS | サイト設定で設定可能 | 基本的に反映されない |
| デザインの拡張性 | クラシックUI限定機能が活用できる | SPFxやテーマ機能を用いる |
| カスタムスクリプト | サイトコレクション管理者が許可設定を切り替え | Modern UI上での直接注入は制限されている |
| 推奨される方法 | Masterページや代替CSS | SPFx拡張機能によるカスタマイズ |
このように、クラシックサイトであれば従来のMasterページ編集が活用可能です。一方、モダンサイトの場合、Masterページでのカスタマイズは基本的に想定されておらず、SPFx拡張機能などを使用した「スクリプト注入」や「ウェブパーツ」形式での拡張が主流になります。
SharePoint DesignerでのMasterページカスタマイズの限界
Seattle.masterのコピーとSPDによる編集
クラシックサイトでは、Seattle.masterをコピーしてカスタムMasterページを作成することが一般的でした。SharePoint Designer (SPD) 2013などを用いてMasterページを編集し、独自のCSSファイルを読み込む記述（たとえば <link rel="stylesheet" href="/Style Library/custom.css" />）を追加する方法です。
しかし、以下のような現象が起こることがあります。
- サイト設定で既定のMasterページにカスタムMasterページを指定しても、ホームページでは変更が反映されない
- SharePoint管理センターやPowerShellで「カスタムスクリプトの許可」を有効にしていないため、SPDで編集を行っても実際には適用されない
- モダンサイトの場合、Masterページの変更という概念自体が無効化されている
こうした制約により、「Masterページの編集」を前提としたカスタマイズはモダンサイトにはそぐわない場合が多くなっています。
「代替のCSS」設定の落とし穴
クラシックサイトでは、「サイトの外観」→「代替のCSS」で独自のCSSを設定できます。ところが、この機能はモダンサイトには完全対応していないため、実際には管理画面やクラシックなページだけに適用され、モダンページでは無視されるケースがほとんどです。
また、「SharePoint Server 公開インフラストラクチャ」をアクティブにできないサイトコレクション（例：モダンチームサイト、コミュニケーションサイト）では、代替CSSの設定やMasterページギャラリーの一部機能が制限されます。結果として、カスタムCSSを反映できないという混乱が生じがちです。
SPFx拡張機能によるカスタムCSS適用のメリット
モダンサイト時代の主流アプローチ
モダンサイトでカスタムCSSを反映する際には、SharePoint Framework (SPFx) の拡張機能 (Extensions) を用いる方法が事実上の標準となっています。具体的には、「Application Customizer」という仕組みを使い、サイト全体のヘッダーやフッターにスクリプトを注入して、外部にホストしたCSSファイルを読み込むやり方が推奨されています。
SPFxの拡張機能を使うメリットは次のとおりです。
- Microsoftが正式に推奨する手法であり、将来のアップデートとも互換性を保ちやすい
- Visual Studio Codeとnpmなどの開発ツールを活用でき、ソースコード管理がしやすい
- カスタマイズの単位がアプリ (sppkgファイル) という形になるため、再利用や展開が容易
頻繁なCSS更新があってもスムーズに対応可能
「カスタムCSSを差し替えるたびにSPFxソリューションを再パッケージする必要があるのか？」という疑問はよくあります。しかし、実際には以下の方法を取れば柔軟に運用できます。
- CSSファイルの実体を、SharePointライブラリ（例：Style Library）に置いておき、SPFx側ではそこへのパスを注入するだけ
- CSSの内容を変更する際は、ライブラリのファイルだけを上書きする
- 新しい要素を追加し参照パスが増減する場合や、複数のCSSをまとめて読み込む構成を変える必要がある際のみSPFxの設定を修正→再ビルド→再デプロイ
このように、「常に再パッケージが必要」というわけではなく、参照先のファイルパスを一定に保つ運用を行えば、日常的なCSSの更新はSPDやブラウザ上からの編集だけで済みます。ただし、ブラウザーキャッシュの影響で変更内容がすぐに反映されない場合があるため、適宜シークレットモードでの確認やキャッシュクリアを行いましょう。
SPFx拡張機能を使ったカスタムCSS注入の基本手順
1. 開発環境の準備
SPFxのカスタマイズを行うにはNode.js、npm、Yeoman、Gulpなどを使うため、ローカルの開発環境を整える必要があります。基本的な手順は以下のとおりです。
- Node.js (LTS推奨) をインストール
- Yeoman (
npm install -g yo) やMicrosoft公式のSharePoint Generator (npm install -g @microsoft/generator-sharepoint) をインストール - Visual Studio Codeなどのエディタを用意
2. プロジェクトの作成
以下のように、プロジェクトを作成します。コンソール（ターミナル）で作業フォルダに移動し、Yeomanコマンドを使ってプロジェクトを生成します。
yo @microsoft/sharepoint- プロジェクトの名前やフレームワーク（ReactやNo JavaScript Frameworkを選択）などを求められるため、適宜回答します。
- 「Which type of client-side component to create?」と聞かれたら「Extension」を選び、「Application Customizer」を選択します。
3. カスタムCSS注入処理の実装
生成されたプロジェクトフォルダ内に、./src/extensions/ 以下のフォルダが作られています。そこにあるApplication CustomizerのTypeScriptファイル（例：MyCustomCssApplicationCustomizer.ts）を編集し、CSSファイルを読み込むためのコードを追記します。以下はサンプル例です。
import { Log } from '@microsoft/sp-core-library';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
export interface IMyCustomCssApplicationCustomizerProperties {
cssurl: string;
}
export default class MyCustomCssApplicationCustomizer
extends BaseApplicationCustomizer<IMyCustomCssApplicationCustomizerProperties> {
public onInit(): Promise<void> {
Log.info('MyCustomCssApplicationCustomizer', 'Initialized Custom CSS Injector');
if (this.properties.cssurl) {
const head: any = document.getElementsByTagName('head')[0] || document.documentElement;
const customStyle: HTMLLinkElement = document.createElement('link');
customStyle.href = this.properties.cssurl;
customStyle.rel = 'stylesheet';
head.insertAdjacentElement('beforeend', customStyle);
}
return Promise.resolve();
}
}上記例では、拡張機能に指定された cssurl プロパティからCSSファイルのURLを取得し、<head> タグに<link>タグを注入しています。ここでのcssurlは、後述のserve.jsonや./config/package-solution.jsonなどで指定可能です。
4. ビルドとパッケージ化
プロジェクトフォルダで以下のコマンドを実行し、ビルドとパッケージを行います。
gulp bundle --ship
gulp package-solution --ship成功すると、sharepoint/solutionフォルダ配下に.sppkgファイルが生成されます。これがSharePointにデプロイするためのパッケージです。
5. App Catalogへの展開とサイトへの適用
管理者権限を持つユーザーでSharePointのApp Catalogサイトにアクセスし、生成された.sppkgファイルをアップロードします。ファイルアップロード後、「このソリューションをすべてのサイトに展開する」などのオプションが表示された場合、必要に応じて有効化を行います。
続いて、拡張機能を適用したいサイトに移動し、「サイトの内容」→「アプリ」などからインストールまたは追加できる場合があります。モダンチームサイトなどでは自動的に適用されるケースもありますが、場合によっては明示的にサイトにアプリを追加する操作が必要です。
6. カスタムCSSをSharePointライブラリに配置する
注入先のCSSファイルは、SharePoint Onlineのライブラリ（一般的には「Style Library」や「Site Assets」）に置き、URLを拡張機能のプロパティで指定します。ライブラリのURL例：
https://<テナント名>.sharepoint.com/sites/<サイト名>/Style%20Library/custom.cssこうすることで、CSSを更新する際は上記ファイルをSPDやブラウザ上の「開く/編集」で変更し、上書き保存するだけで済みます。SPFx拡張機能自体を再デプロイする必要はありません。
SPFx活用時のトラブルシューティング
1. CSSが反映されない場合
- URLの間違い：ブラウザーのF12開発者ツールのNetworkタブを確認し、404エラーになっていないかチェックしましょう。
- キャッシュの問題：変更後はCtrl+F5などで強制再読み込みを行い、シークレットウィンドウでの動作も確認すると安心です。
- アプリカタログへの配布設定ミス：.sppkgファイルを正しく展開していない場合、拡張機能が読み込まれないことがあります。
- サイトへのインストール忘れ：App Catalogにアップロードしただけでは対象サイトに適用されない場合があります。
2. SPDによるファイル編集ができない
- カスタムスクリプトの許可設定：SharePoint管理センターやPowerShellで、ターゲットサイトコレクションの「カスタムスクリプトの許可」が有効になっているか確認が必要です。
- 権限不足：サイトコレクション管理者またはフルコントロール権限がなければ編集できない場合があります。
- 新しいSharePoint Designerの非提供：SPD2013以降、新バージョンの提供が行われておらず、モダンサイト側に十分対応しきれない機能制限がある点に注意が必要です。
3. 「SharePoint Server 公開インフラストラクチャ」がアクティブにできない
モダンサイト（コミュニケーションサイトやモダンチームサイト）では「SharePoint Server 公開インフラストラクチャ」をアクティブ化できないケースがほとんどです。これはクラシック機能との互換性を提供するオプションであるため、モダンサイトでは不要とされています。どうしてもクラシックな要素を使いたい場合には、クラシックサイトテンプレートの利用を検討する必要があります。
PowerShellを用いたカスタムスクリプト有効化の例
サイト上でSPDやJavaScript、CSSのアップロードを許可するには、SharePoint管理センターからGUIで設定する方法と、PowerShellを使う方法があります。PowerShellを使う場合は、SharePoint Online Management Shellをインストールし、以下のようなコマンドを使います。
# SharePoint Online管理者としてログイン
Connect-SPOService -Url https://<テナント名>-admin.sharepoint.com
# ターゲットのサイトコレクションに対してカスタムスクリプトを有効化
Set-SPOSite -Identity https://<テナント名>.sharepoint.com/sites/<サイト名> -DenyAddAndCustomizePages 0この設定を行うことで、サイトコレクションでMasterページやStyle Libraryへの直接アップロードなどが可能になるケースがあります。
SPDを使ったCSS編集とSPFxの併用例
モダンサイトでも、サイトアセットやライブラリにあるCSSファイルであればSPDを使用して編集可能な場合があります。ただし、SPDでサイトを開いた際に「モダンページ」はそのままでは表示や編集ができないことが多く、あくまでもファイル操作を行うツールとして使うのが主な用途となるでしょう。
SPFxのアプリケーションカスタマイザーで読み込むCSSをSPDで編集し、デザインを素早く反映させるという使い方は可能です。
まとめ：モダンサイトでのカスタムCSSはSPFxが最適解
- Masterページの置き換えは非推奨：モダンサイトではMasterページによるデザインカスタマイズは原則利用できません。
- 代替のCSS設定は限定的：クラシック機能であるため、モダンページには反映されないことが多いです。
- SPFx拡張機能でCSSを注入するのが定石：Microsoftが提供する公式フレームワークであり、将来のアップデートにも対応可能。
- 更新頻度が高いならライブラリにCSSファイルを配置：再パッケージを最小限に抑え、効率的に運用できます。
以上の知識を押さえれば、SharePoint Onlineのモダンサイトでも企業や組織独自のブランドやデザインを大切にしながら運用が可能になります。慣れてしまえばSPFxによるカスタマイズは決して難しいものではありません。ぜひ本記事の内容を参考に、SharePoint Onlineをより洗練されたデザインに仕上げてみてください。
コメント