SharePoint の左上の製品テキストをCSSで変更する

SharePointの画面左上にオンプレなら「SharePoint」、SharePoint Onlineなら「Office 365」というテキストが表示されていると思います。ここを変更する方法としてPowerShellを使う方法がありますが、PowerShellを使いたくない、使えないという環境だったりする場合は、CSSで変更できます。CSSでも色々なアプローチがありますが、今回はcontentプロパティを使います。代替CSSに設定したCSSファイルに記述するなり、マスターページに記述するなり、ページ内にWebパーツとして記述するなり、ニーズや環境に合った方法で適用してください。

■追加する場合

変更ではなく、今の製品テキストを残したまま追加する場合

SharePoint2013

.ms-core-brandingText:after { content:”(しぇあぽいんと)”; }

SharePoint Online

.o365cs-nav-brandingText:after { content:”(おふぃす さんろくご)”; }

■変更する場合

厳密には追加した後に、オリジナルの方に消えていただく方法です。

SharePoint2013

.ms-core-brandingText:after { content:”残業なんてしたくない!”; padding-left:10px; } .ms-core-brandingText { text-indent:-102px; }

SharePoint Online

.o365cs-nav-brandingText:after { content:”残業なんてしたくない!”; padding-left:10px; } .o365cs-nav-brandingText { text-indent:-116px; }

リンクにしたり、SPOの場合はリンクを変更したりという事はさすがにできませんが、文言を変更する程度ならお手軽かなと思います。

また、この方法を使えば左上の製品テキストだけでなく、SharePointの標準機能では変更できない文言の変更など、色々な場所で使えるのではと思います。例えばリボン内のテキストとか、ダイアログのタイトルとか。
ただし、今回の上述のソースもそうですが、個人発信のブログなので検証に費やす時間もほとんどないので、動作を保証するものではありません。ソース丸々コピペすれば使える!というよりは、考え方のヒントにしていただければと思いますので、例えばセレクタの指定がシンプルだと他に影響が出る事も考えたり、色々と工夫してみてください。

Web制作をしていた頃はcontentプロパティなんてclearfixくらいでしか見なかったのですが、SharePointを扱うようになってからは使うようになりました。