SharePoint Online のトップリンクバーのデザインを CSS で変更する

SharePoint 2013

2016.07.12

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

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

ナビゲーションのカスタマイズに利用できる 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 でも行うことができます。