SharePoint :CSSによるデザインカスタマイズで指定するidやclassで気を付けたい点

SharePoint (今回はクラシックUI)でCSSによるデザインカスタマイズを行う際に、既存のidやclassを利用してスタイルを上書きしていくアプローチがあります。特に SharePoint Online においてはマスターページをゴリゴリとイジるよりも低リスクな方法です。

ところで、利用するidやclassにも気を付けないといけない点が色々あります。過去に以下のような記事を投稿しました。

SharePoint のページにオリジナルのCSSを適用させる方法について

この記事内の「■指定したWebパーツのみ適用させたい場合」という部分で、「#WebPartWPQ1」「#WebPartWPQ2」…に関しては数字部分がWebパーツを消したりすると入れ替わってしまうので、特定のWebパーツを指定したい場合には気を付けないといけないと書きました。
指定したWebパーツに対してデザイン変更をしても、その後でWebパーツを削除してしまったりすると、別のWebパーツに対してデザインが当たってしまう恐れがあるからです。

このWebパーツ内の数字が入っているidやclass以外にも、Webパーツ内外関係なく数字が入っているidやclass全般で、利用には注意が必要だという事を最近再確認しました。

トップリンクバーのデザインカスタマイズをした際に、その後検証作業をしていたら、外部ユーザーでアクセスした時にデザインカスタマイズが適用されていなかったんです。外部ユーザーだからなのか?アクセス権限の違いなのかの特定はしていませんが、サインインしているユーザーによってidの数字が違う事がわかりました。

▼カスタマイズをしていた時のユーザーでトップリンクバー部分のソース

zz11_TopNavigationMenu
zz12_RootAspMenu

▼外部ユーザーでトップリンクバー部分のソース

zz6_TopNavigationMenu
zz7_RootAspMenu

え~!数字が変わってる!

って事で、別のidを指定して問題は解決しました。

idやclassに数字が入っている場合は気を付けろ!と日ごろ思っているのに、ちょっと油断して利用しちゃいましたが、このように外部ユーザーか否か(もしくはアクセス権限の相違)によっても変わってしまう事がわかりました。

どちらが原因かを僕が調査しないのは、時間がない事もありますが、結局は数字の入ったidやclassを極力利用しなければ良いからです。

ただ、数字も例外があって、 SharePoint のソースを調べると良く見かける「#s4-workspace」など「s4」について。数字が入っているけど、この「4」は変更されることはないので安心して使います。

このようなお作法がたくさんあるので、いくら優秀なコーダーのいるWeb制作会社であっても、SharePoint のスキルや経験がないとカスタマイズは厳しかったりするんですよね。