(今回はクラシックUI)でCSSによるデザインカスタマイズを行う際に、既存のidやclassを利用してスタイルを上書きしていくアプローチがあります。おいてはマスターページをゴリゴリとイジるよりも低リスクな方法です。ところで、利用するidやclassにも気を付けないといけない点が色々あります。過去に以下のような記事を投稿しました。ページにオリジナルのCSSを適用させる方法についてこの記事内の「■指定したWebパーツのみ適用させたい場合」という部分で、「#WebPartWPQ1」「#WebPartWPQ2」...に関しては数字部分がWebパーツを消したりすると入れ替わってしまうので、特定のWebパーツを指定したい場合には気を付けないといけないと書きました。指定したWebパーツに対してデザイン変更をしても、その後でWebパーツを削除してしまったりすると、別のWebパーツに対してデザインが当たってしまう恐れがあるからです。このWebパーツ内の数字が入っているidやclass以外にも、Webパーツ内外関係なく数字が入っているidやclass全般で、利用には注意が必要だという事を最近再確認しました。トップリンクバーのデザインカスタマイズをした際に、その後検証作業をしていたら、外部ユーザーでアクセスした時にデザインカスタマイズが適用されていなかったんです。外部ユーザーだからなのか?アクセス権限の違いなのかの特定はしていませんが、サインインしているユーザーによってidの数字が違う事がわかりました。▼カスタマイズをしていた時のユーザーでトップリンクバー部分のソースzz11_TopNavigationMenuzz12_RootAspMenu▼外部ユーザーでトップリンクバー部分のソースzz6_TopNavigationMenuzz7_RootAspMenuえ~!数字が変わってる!って事で、別のidを指定して問題は解決しました。idやclassに数字が入っている場合は気を付けろ!と日ごろ思っているのに、ちょっと油断して利用しちゃいましたが、このように外部ユーザーか否か(もしくはアクセス権限の相違)によっても変わってしまう事がわかりました。どちらが原因かを僕が調査しないのは、時間がない事もありますが、結局は数字の入ったidやclassを極力利用しなければ良いからです。ソースを調べると良く見かける「#s4-workspace」など「s4」について。数字が入っているけど、この「4」は変更されることはないので安心して使います。スキルや経験がないとカスタマイズは厳しかったりするんですよね。Webパーツは閲覧モード時には非表示とする使い方も多いかと思います。JavaScriptやCSSを直接記述したり、各種ファイルのリンクを埋め込んだり。非表示のWebパーツでも縦幅はしっかり取られているので、デザイン・レイアウト的に邪魔な場合があるかと思います。Webパーツを最下部に配置すれば解決しますが、中には最下部には置けない場合もあるのかなぁと思います。■現象の確認テキストのレイアウトを「2段組」にして左右にWebパーツを配置してみます。▼当然ですが左右のWebパーツの高さは同じです。Webパーツを配置します。Webパーツの影響で落ちてしまいます。(段差がわかるように赤い線を引いています。Webパーツが空白でも縦幅をとるという事です。Webパーツを消してみます。Webパーツの外枠に固有のclassを振ります。ページにオリジナルのCSSを適用させる方法について※ちなみにWebパーツのソース自体のdivのclassに固有のclassを追加せずに、わざわざ外枠にdivを追加しているのは、単に僕の好みです。▼次に、以下のCSSを記述します。{display:none;}▼無事解決。左右で高さが一緒になりました。(わかりやすいように赤い線を引いています。Webパーツは表示されません。Webパーツが一度設定したら二度と編集する事がない場合は問題ないですが、あまり管理面でもよくないのかなと思います。編集したくなったらCSSを解除すれば良いのですが、解除をしたらその間はユーザーがページを表示すると高さがおかしくなるので厳密には良くないです。Webパーツが表示されたら良いです。■解決これも解決できます。編集モードの際のソースを調べると、編集モード時に固有のclassがあります。編集モード時の該当箇所のclassで、編集モード固有のクラスは、.ms-rte-layoutszone-inner-editable.ms-rtestate-writeの2つあり、editableとかwriteとか、いかにも編集っぽいワードで、どちらでも良いと思います。Webパーツは表示されます。登場しましたが、それまでのリンクリストよりもデザイン性も良く、新しいタブ表示などにも対応できて、重宝されている人は多いのではと思います。150px)1列でしか表示できない!(カルーセルUIっぽくなるけど)ここら辺が弱点となり、利用に躊躇されているケースもあるのではと思います。社内ポータルのトップページに、従業員が毎日利用する社内システムへのリンクを、見栄えも良くクリックしやすいタイルのリンク集を作りたい場合など。注目リンクを使うと大きくて社内ポータルのトップページに配置すると、他の重要なコンテンツの邪魔になったり、目立ちすぎて逆に困ったり。9個くらいリンクを置きたいのに全部配置しきれなく、カルーセルUIのようになるけど、矢印アイコンをクリックしないと表示されないリンクが出てきて、アクセシビリティが良くないなど。WebパーツなどでHTMLで組むとメンテナンス性が悪い。(リンクの作成・編集・削除はリストで行いたい。環境でカスタマイズしています。100pxにしました。※このサイズで3列で折り返しし、複数行表示されます。これはビューにCSSを当てた感じですが、もちろんページにこれを表示させたい場合は、注目リンクリストをアプリパーツとして配置した後に、ページにCSSを当てればOKですね。そこまではここでは紹介しませんので、以下の過去記事を参照ください。ページにオリジナルのCSSを適用させる方法についてでは、特に出し惜しみするものでもないので、CSSのソースも紹介しちゃいます。基本的には大きさの調整です。面倒なので全て!importantを付けています。言えば、マウスホバー時の挙動に関して若干考えたくらいです。ご利用の際は、自己責任でお願いします。!important;}あとは、好みの大きさに調整してみてください。▼背景画像にアイコンを配置し、CSSの位置を調整すれば、こんな感じもいけちゃいます。(これ、実際に注目リンクです。ページにオリジナルのCSSを適用させる方法について↑このくらいならCSSできる人なら30分~1時間程度でCSSのみでカスタマイズできます。※サイト全体に適用するのではなく、ページに適用させる方法。※クラシックUIの場合。※発行機能が非アクティブの場合。基本的にはCSSはCSSファイルに記述し、HTMLにはhead内にCSSファイルのリンクを記述します。側が持っている既定のCSSファイルです。CSSでオリジナルのカスタマイズを加える際に、マスターページを加工するなどすればhead内にオリジナルのCSSファイルのリンクを加える事は可能かもしれませんが、やはり極力マスターページに手を加えたくはありません。(そもそもマスターページに手を加えるとサイト全体に適用されます。Webパーツ」を利用する方法があります。これは簡単に言えばHTMLを埋め込めるWebパーツです。Webパーツ」の方が主流なのかな。どちらにでもCSSファイルのリンクを記述すれば適用されます。エディターWebパーツを挿入したところ(もちろん実際はどちらか1つでOKです。エディターWebパーツのソースを記述するダイアログただ、これは非常に気持ち悪い方法なんですよね。本来はhead内に記述すべき内容をbody内に記述する事になるので。▼body内にlinkタグが入る感じになります。気軽に適用させる方法としてはこれしかありません。比べれば遥かに良くなったけど。)ので、この際無視してください。本職のコーダーさんあたりは非常に気持ち悪いとは思いますが我慢です。既定で持っているCSSを上書きする記述となります。!importantは結構使う機会があると思います。HTMLはさわれないと思ってください。標準機能の範囲内でアプリ・Webパーツをページに適切に配置します。その状態で開発者ツールなどでソースを確認し、適用させたい要素・またはその周辺にユニークなidやclassがあるかどうかを調査し、そこに対して適用させるCSSを記述する感じです。そのidやclassがどこでどのくらい利用されているかを把握する事はなかなか難しく、実際に適用させて(開発者ツール上でもOKですね。)目視で確認し、試行錯誤していく感じになります。ユニークなidやclassがない場合はセレクタを駆使してなんとかなる場合もありますし、諦めるのも大事な選択肢です。無茶して適用したところで管理面で難があったりすると良くないですからね。■指定したWebパーツのみ適用させたい場合Webパーツの構造は全てほぼ一緒なので、Webパーツ内のスタイルを変更した場合は基本的にはページ内の全てのWebパーツで適用されると大げさに思って良いかと思います(厳密には違いますが)。中には指定したWebパーツのみスタイルを適用させたい場合もあると思います。調べてみるとわかりますが、ページ内でWebパーツごとにユニークなidが存在します。「WebPartWPQ6」。この数字部分(←の場合は6)に関しては、Webパーツが増えていくごとに数字が増えていきます。Webパーツごとにあるユニークなidなのですが、ただこのidの使用はあまりオススメできないんです。いうのも、Webパーツが今後増減しない確約がある場合は良いのですが、特にWebパーツを削除する事がある場合は、削除するとページ内の全てのWebパーツのidの数字がゴソッと入れ替わってしまうので、このidを利用したCSSの全て数字を変更しなければいけないからです。▼このように番号が若いパーツほど削除すると影響度が高いですではどうしたら良いか?というと、ページの作り込みで工夫が必要です。ページではWebパーツ領域内にHTMLを記述する事が可能です。それを利用して、例えばユニークなidかclassでdivを記述し、そのdiv内にWebパーツを配置します。囲んでしまえばユニークなidかclassを利用してそのWebパーツのみ適用させる事が可能となります。▼Webパーツ領域にカーソルを置き、ソースの編集を▼例えばユニークなclassをつけたdivを2個ほど置きます▼それぞれのdiv内にWebパーツを追加します(この操作もコツがいたりします。)▼再度ソースの編集を見ると、このようになります。(思い通りのソースになっていない場合はここで修正)▼ここまでできれば、指定のパーツのみにスタイルを適用させられます。(例:list001のみ枠線を付けました。)■CSSファイルのリンクの配置場所あまり気にしなくても良いのかもしれませんが...。Webパーツは、隠しWebパーツである事からも表示上は見えないので気にしなくても良く、ただページを編集モードにした際には邪魔なので、極力ページ下部に配置したいところです。以前この方法をとったところ、表示に重いWebパーツがあると、カスタマイズしたスタイルが当たるのにタイムラグが発生しました。1秒程度、標準状態のデザインになった後にカスタマイズされた状態になる感じです。これは、HTMLが上から読み込む構造上、CSSファイルのリンクの記述が読み込まれる前に、表示が重い部分があるのが原因と推測し、CSSファイルのリンクが記述されたWebパーツを極力上部に配置すると、この問題が解消されました。的には極力CSSファイルのリンクを記述したWebパーツを、コンテンツ領域の左上に配置するのが良いかと思います。通常は後ろの方にあってもタイムラグが発生するケースはあまりないので、あまり気にしなくても良いのかなと思います。■CSSファイルの保管場所どこでも良いっちゃ良いんですけどね。なくてもどこかのWebサーバーに置いても良いくらいです。ライブラリ内に保管するのが良いとは思いますが、ここで気をつけるべきはアクセス権限です。サイトのアクセス権限よりも権限を絞ったライブラリに保管をすれば、もしかしたら中にはライブラリには閲覧権限がないけどページには閲覧権限がある可能性もあり、この場合はそのユーザーはCSSファイルに権限がないので、結果としてカスタマイズが適用されない状態でページが表示されます。逆に管理者以外に多くのユーザーが投稿権限以上が付与されているライブラリに保管をすれば、勝手にCSSファイルを編集したり削除する事も可能になってしまうので良くないですね。このような点に気をつけたライブラリであるならどこでも良いかと思います。スタイルだからスタイルライブラリに保管しなければいけないというわけでもないと思っています。他にも語ることは色々あるかもしれませんが思いついた時にまた記事にします。僕の自己流なので参考程度にしてください。他にもっと良い方法があればむしろ教えてください。