前提・実現したいこと
以下リンクで紹介されているのと同様に、
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/25 13:53
退会済みユーザー
2020/04/25 14:01