【SharePointOnline】サイドリンクバーのカスタマイズ

前提・実現したいこと

以下リンクで紹介されているのと同様に、
SharePoint Online で Oslo スタイルのリンクバー(トップリンクバーの位置にあるサイドリンクバー)を CSS でカスタマイズしたい。

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

発生している問題

CSS を使ってスタイルを適用するために必要な要素の Id や Class を特定できない。

サイドリンクバーの要素の Id や Class はどのように調べることができますか?

該当のソースコード

以下は現状トップリンクバーに適用しているコードになります。

CSS
1/*大枠*/
2#s4-titlerow{border-bottom:1px solid #eee;}
3#titleAreaBox{margin-top:-10px;}
4#titleAreaRow{}
5#siteIcon{}
6#DeltaSiteLogo{}
7#pageTitle{position:relative;top:-40px;font-size:22px;}
8#DeltaPlaceHolderPageTitleInTitleArea{}
9#DeltaTopNavigation{position:relative;top:28px;}
10
11/*リンク*/
12#DeltaTopNavigation .ms-core-listMenu-horizontalBox{}
13#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root{height:40px;line-height:40px;}
14#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static{}
15#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>.ms-core-listMenu-item{font-weight:bold;}
16#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item{padding:0 8px; color:black;}
17#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item:hover{color:#cc141c;}
18#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.selected>a.menu-item{}
19
20/*ドロップダウン*/
21#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children{}
22#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic{margin:0;padding:8px;}
23#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic{}
24#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic>a.menu-item{padding:0; color:black;}
25#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static.dynamic-children>ul.dynamic>li.dynamic>a.menu-item:hover{color:#cc141c; background:#f3f3f3;}
26
27/*検索窓*/
28#DeltaPlaceHolderSearchArea{}
29#searchInputBox #SearchBox>.ms-srch-sb-border{background:#FFF;}

試したこと

|No|トップリンクバー動作要素|⇒|サイドリンクバー推測要素|
|:--|:--:|--:|
|1|#DeltaTopNavigation|⇒|#DeltaSideNavigation|
|2|.ms-core-listMenu-horizontalBox|⇒|.ms-core-listMenu-verticalBox|

補足情報（FW/ツールのバージョンなど）

権限レベル: マスタページは編集できない。
サイト発行機能: 利用できない。

行動規範の内容に同意します

回答2件

サイドリンクバーの要素の Id や Class はどのように調べることができますか?

SharePointOnlineに詳しいわけではないのですが、
ブラウザの「開発者ツール」を使用して確認する必要があるのではないかと思います。

投稿2020/04/25 12:46

退会済みユーザー

総合スコア0

BetterEveryday

2020/04/25 13:53

Lish さま、ご回答どうもありがとうございます。たしかに。html 構造を確認するにはブラウザのソース表示ですね。不慣れな SharePoint に右往左往してしまい、 SPO で解を見つけられるように思ってしまいました。自分でも気付いて html 要素を調べて動作確認できましたので、今回はソース付きの自回答をベストアンサーにしようと思います。私のためにお時間とお気持ちをいただきまして申し訳ございません。動転しているときに客観的に advice いただけるとたいへん助かります。久しぶりの Web 開発ですので、またお知恵をお借りすることもあるかと思います。今後ともどうぞよろしくお願いいたします。

退会済みユーザー

2020/04/25 14:01

ご丁寧にご返信頂きありがとうございます。解決できて何よりです^^

行動規範の内容に同意します

自己解決

ブラウザのソース表示で構造と ID、Class 定義を拾い、以下の CSS で動作確認できました。

CSS
1<style>
2/*大枠*/
3#s4-titlerow{border-bottom:1px solid #eee;}
4#titleAreaBox{margin-top:-10px;}
5#titleAreaRow{}
6#siteIcon{}
7#DeltaSiteLogo{}
8#pageTitle{position:relative;top:-40px;font-size:22px;}
9#DeltaPlaceHolderPageTitleInTitleArea{}
10#DeltaHorizontalQuickLaunch{position:relative;top:28px;}
11
12/*リンク*/
13#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox{}
14#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root{height:40px;line-height:40px;}
15#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static{}
16#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>.ms-core-listMenu-item{font-weight:bold;}
17#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item{padding:0 8px; color:black;}
18#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>a.menu-item:hover{color:#cc141c;}
19#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.selected>a.menu-item{}
20
21/*ドロップダウン*/
22#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static{}
23#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>ul.dynamic{margin:0;padding:8px;}
24#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>ul.dynamic>li.dynamic{}
25#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>ul.dynamic>li.dynamic>a.menu-item{padding:0; color:black;}
26#DeltaHorizontalQuickLaunch .ms-core-listMenu-horizontalBox>ul.ms-core-listMenu-root>li.static>ul.dynamic>li.dynamic>a.menu-item:hover{color:#cc141c; background:#f3f3f3;}
27
28/*検索窓*/
29#DeltaPlaceHolderSearchArea{}
30#searchInputBox #SearchBox>.ms-srch-sb-border{background:#FFF;}
31
32</style>