タグ: カスタマイズ

「注目リンク」リストは SharePoint 2013 から登場しましたが、それまでのリンクリストよりもデザイン性も良く、新しいタブ表示などにも対応できて、重宝されている人は多いのではと思います。

しかし、

• タイルが大きすぎる！（150px × 150px）
• 1列でしか表示できない！（カルーセルUIっぽくなるけど）

ここら辺が弱点となり、利用に躊躇されているケースもあるのではと思います。

例えば、社内ポータルのトップページに、従業員が毎日利用する社内システムへのリンクを、見栄えも良くクリックしやすいタイルのリンク集を作りたい場合など。注目リンクを使うと大きくて社内ポータルのトップページに配置すると、他の重要なコンテンツの邪魔になったり、目立ちすぎて逆に困ったり。また、9個くらいリンクを置きたいのに全部配置しきれなく、カルーセルUIのようになるけど、矢印アイコンをクリックしないと表示されないリンクが出てきて、アクセシビリティが良くないなど。

とはいえ、注目リンクをやめて、コンテンツ エディター WebパーツなどでHTMLで組むとメンテナンス性が悪い。（リンクの作成・編集・削除はリストで行いたい。）

では、CSSでライトにカスタマイズして実現しちゃえ！

※ SharePoint Online 環境でカスタマイズしています。
※ IE11／Chorome最新／Firefox最新 のみ確認しました。
※タイルは100px × 100pxにしました。
※このサイズで3列で折り返しし、複数行表示されます。

▼こんな感じ。

これはビューにCSSを当てた感じですが、もちろんページにこれを表示させたい場合は、注目リンクリストをアプリパーツとして配置した後に、ページにCSSを当てればOKですね。そこまではここでは紹介しませんので、以下の過去記事を参照ください。

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

では、特に出し惜しみするものでもないので、CSSのソースも紹介しちゃいます。基本的には大きさの調整です。面倒なので全て!importantを付けています。強いて言えば、マウスホバー時の挙動に関して若干考えたくらいです。

※念のため。ご利用の際は、自己責任でお願いします。

.ms-promlink-root, .ms-promlink-body { width:330px !important; } .ms-promlink-header { display:none; } .ms-tileview-tile-root { width:110px !important; height:110px !important; } .ms-tileview-tile-content { width:100px !important; height:100px !important; } .ms-tileview-tile-detailsBox { top:50px !important; width:100px !important; height:100px !important; } .ms-tileview-tile-content [onclick*=”STSNavigate”] .ms-tileview-tile-detailsBox { top:0 !important; } .ms-tileview-tile-content img { width:100px !important; } .ms-tileview-tile-detailsListMedium { height:100px !important; }

あとは、好みの大きさに調整してみてください。

▼背景画像にアイコンを配置し、CSSの位置を調整すれば、こんな感じもいけちゃいます。（これ、実際に注目リンクです。）

↑このくらいならCSSできる人なら30分～1時間程度でCSSのみでカスタマイズできます。

※サイト全体に適用するのではなく、ページに適用させる方法。
※クラシックUIの場合。
※発行機能が非アクティブの場合。

基本的にはCSSはCSSファイルに記述し、HTMLにはhead内にCSSファイルのリンクを記述します。もちろん SharePoint もそういう仕組みになっていますが、それは SharePoint 側が持っている既定のCSSファイルです。

CSSでオリジナルのカスタマイズを加える際に、マスターページを加工するなどすればhead内にオリジナルのCSSファイルのリンクを加える事は可能かもしれませんが、やはり極力マスターページに手を加えたくはありません。（そもそもマスターページに手を加えるとサイト全体に適用されます。）

■CSSファイルのリンクの記述を追加する方法

では気軽にCSSファイルのリンクを追加する方法は？というと、 SharePoint では昔から「コンテンツ エディター Webパーツ」を利用する方法があります。これは簡単に言えばHTMLを埋め込めるWebパーツです。今なら「スクリプト エディター Webパーツ」の方が主流なのかな。どちらにでもCSSファイルのリンクを記述すれば適用されます。

▼コンテンツ エディターWebパーツとスクリプト エディターWebパーツを挿入したところ
（もちろん実際はどちらか1つでOKです。）

▼コンテンツ エディターWebパーツのソースを記述するダイアログ

▼スクリプト エディターWebパーツのソースを記述するダイアログ

ただ、これは非常に気持ち悪い方法なんですよね。本来はhead内に記述すべき内容をbody内に記述する事になるので。

▼body内にlinkタグが入る感じになります。

しかし、気軽に適用させる方法としてはこれしかありません。そもそも SharePoint がValidなHTMLから程遠い（それでも SharePoint 2007 に比べれば遥かに良くなったけど。）ので、この際無視してください。本職のコーダーさんあたりは非常に気持ち悪いとは思いますが我慢です。

■CSSの記述方法

基本的には SharePoint が既定で持っているCSSを上書きする記述となります。なので!importantは結構使う機会があると思います。そしてHTMLはさわれないと思ってください。なので、まずは SharePoint の標準機能の範囲内でアプリ・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ファイルのリンクの配置場所

あまり気にしなくても良いのかもしれませんが…。CSSファイルのリンクを記述したコンテンツ エディター Webパーツやスクリプト エディター Webパーツは、隠しWebパーツである事からも表示上は見えないので気にしなくても良く、ただページを編集モードにした際には邪魔なので、極力ページ下部に配置したいところです。
しかし、以前この方法をとったところ、表示に重いWebパーツがあると、カスタマイズしたスタイルが当たるのにタイムラグが発生しました。つまり例えば1秒程度、標準状態のデザインになった後にカスタマイズされた状態になる感じです。これは、HTMLが上から読み込む構造上、CSSファイルのリンクの記述が読み込まれる前に、表示が重い部分があるのが原因と推測し、CSSファイルのリンクが記述されたWebパーツを極力上部に配置すると、この問題が解消されました。
つまり、HTML的には極力ソースの上部にCSSファイルのリンクを記述された方がよく、SharePoint 的には極力CSSファイルのリンクを記述したWebパーツを、コンテンツ領域の左上に配置するのが良いかと思います。ただ、通常は後ろの方にあってもタイムラグが発生するケースはあまりないので、あまり気にしなくても良いのかなと思います。

■CSSファイルの保管場所

どこでも良いっちゃ良いんですけどね。極端な話、リンクができれば良いので、 SharePoint じゃなくてもどこかのWebサーバーに置いても良いくらいです。とはいえ、まぁ SharePoint のライブラリ内に保管するのが良いとは思いますが、ここで気をつけるべきはアクセス権限です。
サイトのアクセス権限よりも権限を絞ったライブラリに保管をすれば、もしかしたら中にはライブラリには閲覧権限がないけどページには閲覧権限がある可能性もあり、この場合はそのユーザーはCSSファイルに権限がないので、結果としてカスタマイズが適用されない状態でページが表示されます。逆に管理者以外に多くのユーザーが投稿権限以上が付与されているライブラリに保管をすれば、勝手にCSSファイルを編集したり削除する事も可能になってしまうので良くないですね。このような点に気をつけたライブラリであるならどこでも良いかと思います。スタイルだからスタイルライブラリに保管しなければいけないというわけでもないと思っています。

以上です。
他にも語ることは色々あるかもしれませんが思いついた時にまた記事にします。また、あくまでも僕の自己流なので参考程度にしてください。他にもっと良い方法があればむしろ教えてください。

※オンプレのSharePoint 2013 では通用しません。現在のSharePoint Online が対象です。ご利用環境に応じて参考にしてみてください。

SharePoint のサイドリンクバーで「消したい！」と良く言われるリンクが、「サイト コンテンツ」「ごみ箱」「最近使った項目」の3点セットかと思います。

■「サイト コンテンツ」を非表示にしたい背景

SharePoint 2007 の頃から「サイト コンテンツ」ページは閲覧・投稿者にあまり表示されたくないというニーズは良くありました。サイト管理者側からすると、例えば「サイトのリソース ファイル」や「スタイル ライブラリ」や配下のサブサイト一覧などは見られたくもないからです。SharePoint 2007 は、サイドリンクバーの最上部に「すべてのサイト コンテンツの表示」と2行に渡るリンクが存在し、削除できない仕様だったんですよね。なつかしい。

解決方法としては、CSSでこのリンクを非表示にしていました。固有のclassがあったので割と楽に非表示にできました。
SharePoint 2013 からは、標準機能で削除できるようになったのでカスタマイズは不要ですね。

■「ごみ箱」を非表示にしたい背景

SharePoint 2007 の頃からサイドリンクバーの最下部に「ごみ箱」へのリンクがありました。

たしかSharePoint 2013 からはサイドリンクバーから「ごみ箱」リンクが消えました。

が！どうやらSharePoint Online では今は復活してきているようです。×ボタンがないので削除できません。

さて、SharePoint 2007 の頃からこのごみ箱へのリンクを非表示にして欲しいというニーズが良くありました。というのもSharePoint にあまり詳しくないサイトのキーマンや管理者が、「他人が捨てたモノを見られたり復元されては困る。」と言うからです。大体それらの該当者は高いアクセス権限を付与されているケースが多いので気がつかないんですが、そもそもこのごみ箱リンクは投稿権限以上でないと表示されないし、ごみ箱の中身は通常自分が捨てたアイテムしか表示されないし、権限がなければもちろん復元する事もできないわけで、しっかり説明をすればニーズはなくなりました。

■「最近使った項目」を非表示にしたい背景

これはいつからでしたっけね？SharePoint 2010 からでしたかね。一定の条件でリスト・ライブラリを作成すると勝手に出てくるリンク。消す事もできるけど、リスト・ライブラリを作成する度に復活してしまうんですよね。なのでここを非表示にして欲しいというニーズもかなり多いです。

以上の背景やそれぞれの関係者のニーズを把握した上で、非表示（削除）したい場合、標準機能で削除できない、もしくは削除できるけど復活してしまうなどの場合は、何らかのカスタマイズをする事になると思います。
ググると色々なアプローチで非表示を試みている先人達がいました。特にナビゲーションの対象ユーザーを利用するのは基本機能のみだしアイデアだなと思いましたが、残念ながら発行機能が非アクティブのサイトでは実現できません。他にも今の僕には全く理解のできない難しい方法や、JavaScriptなどで実装している方々もいましたが、僕の場合はやはりCSSで検討してみました。

CSSでカスタマイズをするキモは、適用したい箇所に固有のidかclassが存在するかどうかなのですが、残念ながらサイドリンクバーの各リンクを構成する要素には固有のidやclassはないんです。
※現在のSharePoint Onlineにはliタグに固有そうなidがありますが、仕様が良く分からないのでないものとして、別のアプローチを試みます。

なので、苦肉の策として「:nth-child()疑似クラス」などchild系擬似クラスを利用して、リンクの上から何番目とか下から何番目を非表示にするなんて方法もありますが、これではリンクの場所を変えたりするとおかしくなっちゃいますよね。
僕が目をつけたのはリンクをリストにしているliタグではなく、その下のaタグです。ここを良く見るとtitle属性に必ずリンク名が入っているんです。

CSS3から追加された属性セレクタのうち、今回利用したのは「 E[foo=”bar”] 」です。これを適用させると、「 a[title=”ごみ箱”] 」なら、titleに「ごみ箱」と指定されているaタグに適用されます。「最近使った項目」はaタグではなくspanタグなのでちょっと変わります。
例えば、「ごみ箱」「サイト コンテンツ」「最近使った項目」全てを非表示にしたい場合は、

#sideNavBox ul li a[title=”ごみ箱”], #sideNavBox ul li a[title=”サイト コンテンツ”], #sideNavBox ul li span[title=”最近使った項目”] { display:none; }

これで非表示になりました。

非表示にするだけなので、リンクの編集をすると透明のまま存在はするんですけどね。そこは仕方ないです。

で、「最近使った項目」に関してはこれでは不十分です。追加されたリスト・ライブラリのリンクはこれでは非表示にならないからです。（上のスクリーンショットでは「list005」「list004」です。）
調べると、「最近使った項目」は見出しで、その見出し配下に追加されたリスト・ライブラリがリンクになります。HTML的には「最近使った項目」のspanタグと並列でulタグがあり、その中にli > aでリンクが配置されます。

ここで更に利用したのはこれまたCSS3から追加された「間接セレクタ(E ~ F)」です。これは親要素が同じになる兄弟関係の弟に適用されるセレクタです。つまりこの条件に合致するわけです。
加えるとこんなソースになります。

#sideNavBox ul li a[title=”ごみ箱”], #sideNavBox ul li a[title=”サイト コンテンツ”], #sideNavBox ul li span[title=”最近使った項目”], #sideNavBox ul li span[title=”最近使った項目”] ~ ul { display:none; }

title属性に「最近使った項目」が入っているspanタグの後にあるulタグに適用、という事になります。

SharePoint Online で色々イジった後にSharePoint 2013 のソースを確認したら、全く違っていたので結果的にOnline のみの対応となってしまいましたが、CSSでサイドリンクバーから特定のリンクを非表示にするというより、CSSのセレクタも色々増えてきて各種ブラウザも対応されてきたので、CSSによるカスタマイズの幅が広がってきているんだなぁというところを体感してもらえたら良いかなと思います。CSSであればググればたくさん情報がありますからね。意外と色々とできます。

前回の記事では、クラシック表示のビューのスタイルを「既定」以外にすると、ビューのフィルターで複数の値でフィルターをかける事ができないという事を書きました。

SharePoint ビューのスタイルを変更すると機能落ちする

ところで「既定」スタイルのビュー、つまりリストやライブラリを作成したデフォルトのビューでは、マウスホバー時にはその行の背景色が変わるので1行を読みやすいですが、マウスホバーをしないとテキストばかりになってしまい、読みにくいです。そういう意味もあって網掛けにしたい要望は少なくはありません。

それではビューの機能落ちなく網掛けにするには？CSSでカンタンに解決します。既定スタイルのビューでは、上から偶数行のtrに「.ms-alternating」というclassがあります。ビューで「ページの編集」をし、スクリプト エディター Webパーツなどに以下を記載すれば網掛けになります。（色は好きな色で。）

<style type=”text/css”> <!– .ms-alternating { background-color: #e7e7e7; } –> </style>

▼こうなります。

ただし、実はこれも一点デメリットが。
これはSharePoint 2010 からの問題なのですが、ビューを編集するとリボンタブが「参照」以外表示されなくなるんですよね。

▼本来なら「参照」の右に「アイテム」「リスト」タブが表示されるハズが。

ビュー内のアイテムなどをクリックするとすぐ復活するのでユーザーに周知されれば大きな問題ではないのですが、これは未だに直っていない問題です。

さて、このデメリットも回避しつつ網掛けにする方法もあるにはあります。
ビューに直接CSSを記述するのではなく、CSSファイルに記述し、代替CSSでそのCSSファイルを設定する方法です。これならビューを編集せずにCSSを適用させられるので、リボンタブが消えてしまう問題は解消されます。
ただし！そうです…これにも一点デメリットが。代替CSSで設定すると影響範囲はサイト全体です。つまり他のビューや他のリスト・ライブラリも網掛けになってしまいます。

代替CSSでも適用させたいリストを特定させる方法もなくはないのですが、色々面倒なのでないと言ったほうが良いかもしれないです。

結果として、標準機能とCSSカスタマイズではデメリットのない方法は見つからないのですが、網掛けをするのに標準機能の設定では1パターンしかなかったのが、CSSにより3パターンにまで増えました。それぞれのデメリットを考慮し、別にデメリットには感じないものがあったとしたら、そのパターンで実装すれば良いと思います。

1. ビューの設定のスタイル「網掛け」を適用
   →デメリット：ビューのフィルター機能で複数の値でフィルターできない。
2. ビューのページの編集でCSSを直接記述
   →デメリット：ビューのリボンタブが表示されない。（アイテムあたりをクリックすると表示される。）
3. 代替CSSでCSSを記述したファイルを適用
   →デメリット：サイト全体で適用されてしまう。

以上です。複数の値でフィルターをかけられなくても良いのなら【1】で問題ないし、リボンタブをユーザーが利用しない、もしくは解決方法を周知させられるのなら【2】で問題ないし、サイト全体のビューが網掛けになってしまうのはむしろ大歓迎の場合は【3】で問題ないし、そもそも網掛けを諦めるというカードもありますよね。

要望が実現できないと業務に多大な影響があるかどうか？影響がないなら要望を諦める選択肢も十分あって良いと思います。

本当ならデメリットが一つもない方法を提示できればスッキリしたんですけどね。もちろんもっと他の方法でカスタマイズすれば良いのですが、CSS程度のライトカスタマイズにこだわりました。

SharePoint2007からよくあるサイト管理者からの要望に、「『サイト コンテンツ』を閲覧者や投稿者に見られたくない。」があります。

SharePoint2013ではサイドリンクバーの「サイト コンテンツ」へのリンクは削除できるようになりました。ただし、ページ右上の歯車アイコンをクリックすると、権限がフルコントロールだろうが閲覧だろうが表示されるメニュー内には依然として「サイト コンテンツ」は表示されています。

ここを非表示にするためだけに、マスターページをカスタマイズするのは嫌ですよね。僕は嫌です。そこでCSSを用いて非表示にします。SharePointをCSSでカスタマイズする際におそらく最も利用されるであろうdisplay:none;の登場です。

.ms-siteactions-normal { display:none; }

これをCSSファイルにして、対象ページにスクリプトエディターWebパーツなどを配置してCSSファイルのリンクを記述するか、対象がサイトであれば代替CSSで設定すればOKです。（発行機能が非アクティブ状態で代替CSSファイルを設定したい場合は、ググると情報が出てきます。）

これでサイト コンテンツへのリンクは非表示になったので、直接URLを叩かない限りは見られる事はなくなります。

と、ここまでは他にも紹介しているブログなどはあります。しかし、この方法には弱点があります。閲覧者や投稿者だけでなく、フルコントロール権限であっても非表示になってしまうので、サイト管理者がサイトの設定を行う導線まで奪ってしまうのです。

では、閲覧者や投稿者は非表示にし、フルコントロールは表示させる方法が、CSSと標準機能のみで実現できるでしょうか？
答えは「できます！」
ヒントは「全員非表示、フルコン復活」です。

■方法

CSSファイルを置くライブラリの権限を設定すれば可能です。

【1】まずは全員非表示
これはすでに上で紹介した方法で非表示にします。ここまでは同じです。

【2】フルコンのみ表示復活
・新規に表示復活用ライブラリを作成
・権限の継承を中止
・フルコン以外の権限設定を削除
・ライブラリに以下の内容のCSSファイルをアップ。

.ms-siteactions-normal { display:inline-block; }

【3-1】適用（対象がページの場合）
対象ページにスクリプトエディターWebパーツなどを追加し、2個のCSSファイルのリンクを記述。
※この場合、【2】でアップしたCSSファイルのリンクを必ず【1】のCSSファイルのリンクよりも下に記述してください。（!importantでもOKですが、ムダに使いたくないので。）

【3-2】適用（対象がサイトの場合）
代替CSSの設定は1ファイルのみなので@importを使い2個のCSSファイルのインポートを記述した3個目のCSSファイルを作成し、【1】の時にアップしたライブラリにアップし、代替CSSの設定で適用。
※同じく、@importの記述では記述の順番に気をつけてください。

以上です。
若干複雑ですが、マスターページをイジるよりはマシかと思います。また、この方法を使えば、歯車メニューのみならず、様々な場所で「閲覧・投稿ユーザーのみ表示させたくない」が実現できます。もちろん「閲覧のみ表示させたくない」などのバリエーションも可能ですね。

このようにSharePointを利活用する場合、基本機能ではかゆいところに手が届かない場面が多々ありますが、その際に難しい開発やカスタマイズを行いリスクが伴うよりは、このように基本機能とリスクや難易度が低い方法の組み合わせをパズルのように考える事で、実現できてしまうケースもあり、ここがまたSharePointの楽しいところでもあるのかなと思います。