カスタマイズなしでSitecoreの管理画面の色を変更する

「ローカル環境だと思ってアイテムを編集したら実は本番環境だった😱」みたいな経験、ありませんか？私はあります。何度かやらかしました。
本番環境にアクセスしていることが視覚的に分かれば、こんな事故は起きないはずです。
ということで、この記事では環境ごとにSitecoreの管理画面の色を変更する方法を紹介します。Sitecoreのカスタマイズは不要です。

こんな感じの画面になります。一目瞭然ですね。

変更方法

お察しの方もいらっしゃるかもしれませんが、Chromeの拡張機能であるStylusを使用します。Stylusを使用すると、特定のURLで任意のCSSを適用することができます。
まずはChromeにこの拡張機能をインストールしましょう。Firefox, Operaでも使用することができます。

• Stylus - Chrome ウェブストア

インストールしたらStylusの管理画面を開き、左側のメニューから「新スタイルを作成」をクリックします。

スタイルの編集画面が表示されるので、まずは適当な名前をつけて保存してください。

次に左側のメニューの「インポート」をクリックします。テキストエリアが表示されるので、以下のCSSをコピペして「スタイルを上書き」を選択してください。

@-moz-document url-prefix("http://foo.prod.sc"), domain("bar.prod.sc") {
.sc-globalHeader, .scRibbon .chunk, .scRibbonToolbarStrip {
    background-color: #3765bf;
}

.scRibbon {
    background-color: #1c3e7d;
}

.scRibbon .chunk, .scRibbonToolbarStrip,
.scRibbonNavigatorButtonsActive,
.scRibbonToolbar .scRibbonToolbarStrip {
    background-color: #6b94e1;
}

.sc-applicationContent-main {
    background-color: #c3ddff;
}
}

@-moz-document url-prefix("http://foo.prod.sc/sitecore/login"), domain("bar.prod.identityserver") {
body, .login-outer {
    background: none;
    background-color: #6998ff;
}

.login-page [for='Username']:before, #loginLbl:before {
    content: "【本番環境】 ";
}

.login-page [for='Password']:before, #passLabel:before {
    content: "【本番環境】 ";
}
}

以下のように2つのCSSが読み込まれます。上が管理画面のスタイル、下がログイン画面のスタイルです。

それぞれのスタイルの下部に「適用先」とあるので、上のスタイルに管理画面のURL（ドメイン）を指定して、下にスタイルにログイン画面のURL（ドメイン）を指定してください。

最後に保存すればおしまいです。実際にSitecoreにアクセスしてみてください。

Sitecoreのイメージカラーの補色っぽい色を設定していますが、もし色が気に入らなければ適当に変えてください。

それでは、Happy Sitecoring!