SharePointサイト(クラシックテンプレート)に独自CSSを適用する方法

対象環境

SharePoint Online(クラシックテンプレート)

背景

SharePoint Onlineで社内向けWebサイトを作成していると、細かいデザインが気になることが多いです。

文字サイズや行間に始まり、ボタンを配置したいとか、流行りのグリッドレイアウトにしたいとか、もっと自由にデザインできたらいいのにと思うシーンが色々と出てきます。

しかし残念なことに、SharePoint Onlineに用意されているGUツールでは、凝ったデザインのページを作ることができません(それどころかGUIツールで作成したページは非常に見づらいことも多いです(笑))。

そこで、独自のCSSファイルをSharePoint Onlineのページに読み込ませる方法を記載しておきます。独自CSSを適用できれば、痒い所に手が届く、細かいデザイン調整が可能となり、ひいてはそれがユーザビリティの向上に寄与することにもなります。

(社内Webページはえてしてデザインがおざなりとなってしまいがちですが、社内Webを通じたコミュニケーションにおいて見やすいデザインであることは重要なポイントであり、軽んじてはいけないと個人的に考えています)

なお、当記事は「クラシックテンプレート」で作成されたSharePointサイトを対象としています。
また、2023年10月時点では有効な方法ですが、今後Microsoft社による仕様変更により状況が変わる可能性もあることに留意してください。

概要

「スクリプトエディター」と呼ばれるWebパーツを追加し、その中に独自CSSを参照するコードを記述すればOKです。

手順

(以下、独自CSSファイルは準備済であることを前提として記載します)

1. SharePointサイト内の任意の場所にフォルダを作成し、独自CSSファイルを置いておきます。
2. 「独自CSSファイルを読み込ませたいSharePointページ」を編集モードにします。
3. 上に表示されているリボンの「挿入」タプを選択し、「Webパーツ」をクリックします。
4. 「カテゴリ」は「メディアおよびコンテンツ」、「パーツ」は「スクリプトエディター」を選択し、「追加」ボタンをクリックする。すると「スクリプトエディター」がページ内に追加されます。
5. 追加されたスクリプトエディターにマウスポインタを当てると、端のほうに小さく▼マークが表示されるのでそれをクリック、表示されたメニューの中から「Webパーツの編集」をクリックします。(▼マークは見落としてしまうくらい非常に小さいので注意して探すこと)
6. ページの編集画面がリロードされたような動きとなり、一見先ほどと何も変化がないように見えますが、スクリプトエディターを見ると「スニペットを編集」という表示が現れています。
7. 「スニペットを編集」をクリックすると、埋め込みコードを記述できるエディタが開くので、そこに独自CSSファイルを参照するコードを記述します。記述するコードは一般的なHTMLに記載するものと同等でよいです。例: <link rel=”stylesheet” type=”text/css” href=”hoge.css”>
   (なお、Sharepoint Online上に置いたCSSファイルのパスを取得する方法については、別記事『Sharepoint Online上に置いたファイルのパスを取得する方法』を参照してください)
8. うまく読み込みができていれば、7の手順でコードを記述した瞬間にCSSが適用され、編集モードの画面でもCSSが反映されたことを確認できます。
9. コードを記述したら、エディタ画面の右下の「挿入」ボタンをクリック。
10. 編集中のページの右上の「保存」をクリック。

以上

なお、当記事執筆時点で、モダンテンプレートにはスクリプトエディターを追加する機能が無いため、この方法が使えるのはクラシックテンプレートのみとなっています。