SharePointモダンページのヘッダーを小さくする

こんにちは、MS開発部の 荒井 です。

みなさん、SharePointのモダンページをパッと見た時に思うことはなんでしょうか。
僕はモダンページを見る度に、「ヘッダー大きくて中身がみづらい…」と思ってしまします。

ホーム用のページはまだいいのですが…、

通常ページはページタイトル・固定フッターが追加され…、

ページタイトルに画像を設定するととんでもないことに…。

通常ページの場合、下にスクロールするにつれてページタイトルの領域が狭くなっていくのでずっとこの狭さというわけではないですが、逆に言えばスクロールしないと何も見えないんですよね…。
クラシックサイトの場合は代替CSSやマスターページを編集するなどして対応できますが、モダンページの場合それも不可能です。

ということで以前ご紹介した SharePoint Framework の出番です。
今回のように全ページで同一のことをしたい場合は、アプリケーションカスタマイザー を使うことになります。

作成方法

まずは以下の CSS ファイルを用意し、サイトにアップロードします。

次に アプリケーションカスタマイザー を作成します。
環境構築・基本的な作成方法は以下のページを参照してください。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/set-up-your-development-environment
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

スキャフォールディング完了後、src\extensions\拡張機能名 フォルダ内にある .ts ファイル内で、
SPComponentLoader をインポート、

onInit メソッドに以下の記述を追加します。

そしてこれを使用してみると…

少しすっきりしました。やはりパッと見の印象は大事ですし、大して苦労せず作成できる割には効果は大きいのではないかと思います。

もう少し頑張ってみる

折角なので更に小さくしてみましょう。
アプリケーションカスタマイザー には自作ヘッダーを使用するためのメソッドも用意されているので、これを試してみます。
ナビゲーションには画像を使い見栄えをよくしたいので、ナビゲーション用のリストを作成…、

サイトカラーを取り入れたいため Office UI Fabric を使用…、

そして完成したのがこちら。

どうでしょうか。ヘッダーは自作ヘッダーに置き換え、普段使わない ページの編集 ボタンや コメント は隠しておき、「ページメニューを表示」ボタンをクリックすることで展開できるようにしてみました。

最後に アプリケーションカスタマイザー 使用前後の比較を。

もう一目瞭然ですね。やはりページコンテンツはこれぐらい見えた方がいいかなと思います。

ヘッダーは全てのページに表示されるものですし、気になる方は是非お試しを！！