SharePoint Online で簡単なポータル サイトやチーム サイトを作りデザインを含め手を入れていくと、多くの場合ナビゲーションのデザインも変更したくなります。(よね?)ただ、そこまで大きな改修は行いたくないし…と言った場合、CSS を使うだけでも簡単に雰囲気を変えることができます。そろそろ今年も本格的な夏を迎えることですし、SharePoint のサイト デザインもちょっとだけ変更して気分を変えたいところです。

CSS を使ってスタイルを適用するために必要な要素の Id や Class を毎回調べるのは面倒なので、それらを CSS の形でまとめておきます。

ナビゲーションのカスタマイズに利用できる CSS

SharePoint のナビゲーションは、基本的にはリスト タグで作られているので、適用するスタイルも ul や li へのものがほとんどです。今回は seattle.master 用の簡単なサンプルを作成しながら、Id や Class を書き出してみましたので、カスタマイズを始めるときにココから始めると簡単に出来るかと思います。(確認していませんが、おそらく SharePoint 2013 や 2016 でも利用できると思います。)

/*大枠*/
#s4-titlerow{background:#F7FAFC;border-bottom:1px solid #eee;}
#titleAreaBox{margin-top:-10px;}
#titleAreaRow{}
#siteIcon{}
#DeltaSiteLogo{}
#pageTitle{position:relative;top:-40px;font-size:22px;}
#DeltaPlaceHolderPageTitleInTitleArea{}
#DeltaTopNavigation{position:relative;top:28px;}

/*リンク*/
#DeltaTopNavigation .ms-core-listMenu-horizontalBox{}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root{height:40px;line-height:40px;}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static{}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>.ms-core-listMenu-item{}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item{padding:0 8px;}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item:hover{border-bottom:2px solid #324763;}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.selected>a.menu-item{border-bottom:2px solid #5792D4;}

/*ドロップダウン*/
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children{}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic{margin:0;padding:8px;background:#F7FAFC;}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic{}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic>a.menu-item{padding:0 8px;}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic>a.menu-item:hover{padding-left:12px;}

/*検索窓*/
#DeltaPlaceHolderSearchArea{}
#searchInputBox #SearchBox>.ms-srch-sb-border{background:#FFF;}

このサンプルを以前もこのブログで紹介した、代替 CSS へ設定すると完成です。代替 CSS の設定は、GUI のほか、JavaScript でも行うことができます。

代替 CSS の設定を JavaScript で行う
http://idea.tostring.jp/?p=1818

標準のチーム サイトへ適用すると、こちらのナビゲーションが、

20160712-1

このようになります。ドロップダウンのリンクについても、クリックできる面積を大きくすることで使い易くしてみました。

20160712-2

さいごに

色味などはちょっとセンスと工夫が必要かと思いますが、ナビゲーションはユーザーの目に触れる機会も多く印象に大きく影響します。SharePoint サイトのデザインをちょっと変更して、気分を一新、暑い夏を乗り切りましょう。