
MS開発部の永田です。
SharePointOnlineモダンUIのテーマカラー変更について、標準で用意されているテーマカラーの変更と、それだけでは足りないという方もいると思いますので、独自のカラーでカスタムする方法について記載したいと思います。
標準で用意されているテーマカラー
まずはSharePointが標準で用意しているテーマの選択方法ですが、画面右上の歯車から外観の変更を選択します。 外観の変更を選択すると、標準で用意されているテーマカラーの一覧が表示されるので、その中から変更したいテーマを選択することで簡単に外観を変更することが可能です。
例えば紫を選択すると、リンクの文字色や、ヒーローウェブパーツの色などがデフォルトの青から紫に変更されているのが分かるかと思います。
標準の選択肢の中から変更したい場合は簡単ですね。
また、このテーマに合わせて独自で開発したWebパーツの色を連動して変更したい場合は、こちらの記事を参考にしてください。
独自テーマカラーを作成
モダンUIのサイトで独自のカラーを定義するには、まず「テーマジェネレータ」サイトを利用します。
変更したい色で「Primary theme color(主題色)」「Body text color(本文テキストの色)」「Body background color(ボディの背景色)」を選択します。試しにグリーン系で選んでみました。
色を選択したら、画面下にある「PowerShell」のテキストボックスから自動生成された値をコピーしておきます。
PowerShellを実行するにあたり「SharePoint Online Management Shell」のインストールが必要なので、まだの方はこちらからインストールしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$themeName = "緑色テーマ" #追加したいテーマの名前 Connect-SPOService -Url https://<テナント名>-admin.sharepoint.com #@{}の中身はサイトでコピーした値で置き換えてください $themepallette = @{ "themePrimary" = "#00c484"; "themeLighterAlt" = "#e9fff8"; "themeLighter" = "#c7ffec"; "themeLight" = "#76ffd1"; "themeTertiary" = "#13ffb0"; "themeSecondary" = "#00d28c"; "themeDarkAlt" = "#00b176"; "themeDark" = "#007e54"; "themeDarker" = "#006c48"; "neutralLighterAlt" = "#f8f8f8"; "neutralLighter" = "#f4f4f4"; "neutralLight" = "#eaeaea"; "neutralQuaternaryAlt" = "#dadada"; "neutralQuaternary" = "#d0d0d0"; "neutralTertiaryAlt" = "#c8c8c8"; "neutralTertiary" = "#c3d9c2"; "neutralSecondary" = "#97be95"; "neutralPrimaryAlt" = "#7aac79"; "neutralPrimary" = "#75a873"; "neutralDark" = "#467045"; "black" = "#3d603b"; "white" = "#fefefe"; "primaryBackground" = "#fefefe"; "primaryText" = "#75a873"; "bodyBackground" = "#fefefe"; "bodyText" = "#75a873"; "disabledBackground" = "#f4f4f4"; "disabledText" = "#c8c8c8"; } # テーマを追加 Add-SPOTheme -Name $themeName -Palette $themepallette -IsInverted $false # テーマを上書き # Add-SPOTheme -Name $themeName -Palette $themepallette -IsInverted $false -Overwrite # テーマを削除 # Remove-SPOTheme -Name $themeName Disconnect-SPOService |
このPowerShellを実行すると、サイトに新規のテーマが追加されます。
PowerShellと聞くと拒絶反応がある方もいるかもしれませんが、これだけの操作で新規テーマの追加が可能です。
また、今回はPowerShellで実行しましたが、RESTやCSOMでも実行可能です。やり方はMSのサイトで公開されているので、こちらのサイトを参考にしてください。
いかがでしたでしょうか?
SharePointの設定、構築運用、Azureなど、弊社の業務内容にご興味のある方は、お気軽にお問い合わせください。
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)
以上、最後までご愛読いただきありがとうございました。