SharePoint 2013 サイトの見栄えを少しだけ良くする12のテクニック(2/2)

前回からの続きです。SharePoint 2013(含 SharePoint Online)の社内サイトを「少しだけ」見栄えよくする為のノウハウ、後半6つをご紹介します。

SharePoint はグループウェアであると同時に CMS でもあり、きちんとカスタマイズすれば美麗なサイトもつくれます。でも社内向けサイトでは、なかなか、そこまで時間もお金もかけられないんですよね。そこで、あくまで標準の機能/設定で少しの「工夫」で見栄えを改善するコツです。

なお、このエントリは Office 365 Advent Calendar の一環として投稿しています。

7.予定表はそのまま配置しない

チームの各種予定を管理する「予定表アプリ(リスト)」。これをそのままアプリパーツとしサイトに配置すると、カレンダー形式になります。しかし、このカレンダーは Outlook 互換形式=全画面での表示が前提になっているフシがあり、スペースの限られたサイト上ではあまり見やすくない。にも関わらず、かなりのスペースを(ある意味無駄に)占拠します。

20131220image01

前述(前回)の通り、アプリパーツの基本的な位置づけは「情報の抽出」です。新着や重要性の高い情報に絞って抜き出します。その意味では、このカレンダー形式はイマイチです。

そこで、Webパーツの設定から[ビューの選択|現在のイベント]に変更します。これは現在以降の予定だけを一覧表示するビューです。

20131220image02

しかし、このままでは情報が多すぎるため、更に[現在のビューの編集]から表示項目と件数を絞ります。その他の設定も適宜行い…こんな感じになりました。

20131220image03

少し削りすぎたかな?(笑)

もちろん、カレンダー形式のままが有益である場合もあります。ようは、その情報の目的(使われ方)に即して最適な GUI を選択しょう、ということですね。

8.ライブラリは「フォルダなし」で新着表示

同じ理由で、ライブラリの「ポン」配置はイマイチです。確かにドラッグ&ドロップでのアップロードなども出来ますが、やはり使いにくい。それなら前出の「注目リンク」でアイコン化して、ワンクリックでライブラリ本体が開くようにした方が、便利です。

それよりも新着表示にするのがオススメ。アプリパーツのビューを編集し、[フォルダー]セクションで[フォルダーなしですべてのアイテムを表示する]を指定します。

20131220image04

ソート順も「更新日時の降順」に指定しておくとよいでしょう。表示件数も適当に指定しておきます。

20131220image05

これで、ライブラリ内のファイルを更新日時が新しい順、つまり新着順に表示されるようになりました。フォルダーが存在してもすべて無視される、という点がポイントです。

9.ガントチャートは消せる

SharePont 2013 では、タスクリストを「ポン」と配置するとガントチャートが表示されるようになりました。折角の新機能ではあるのですが、なにせスペースを喰いいます。領域が限られたサイトぺージでは不要なことの方が多いです。

20131220image06

このガントチャートは、ビューの設定で消すことが出来ます。[スタイル]セクションの[ビューの上にタイムラインを表示する]チェックを外します。併せてその他の設定も適宜。

20131220image07

10.Webパーツ/アプリパーツに枠をつける

モダンUI(フラットレイアウト)を採用した SharePoint 2013 は、ある意味とてもイマドキなのですが、画面がメリハリに乏しく、パッと見てどこからどこまでが一つのWebパーツ(情報領域)なのか分かりにくい、という弱点があります。

そこで、Webパーツには原則「枠」をつけるのがオススメです。Webパーツを編集して、[外観]セクションの[枠の種類]で[タイトルと枠線]を選択します。

20131220image09

するとこんな感じになります。まあ、好みの問題ではあるのですが、こちらの方が分かりやすいんじゃないでしょうか?

20131220image10

11.CSSでちょっと工夫(1.枠を見やすく)

さらに好みの問題なのですが…上の「枠」、実際に設定してみると微妙にイケテません(笑)コンテンツ領域に、ここだけピタリと枠が表示されるので、窮屈でアンバランスな印象があります(よね?)。

しかし、こうしたとき、少しの手間で修正できるのが SharePiont の利点でもあります。このページの何処でもよいので、[メディアおよびコンテンツ]の[スクリプトエディター]Webパーツを配置して[Webパーツの編集]します。

20131220image11

Webパーツ上に[スニペットを編集]というリンクが表示されるので、これをクリック。表示されるダイアログに以下の文言を記述して保存します。

<style>
table.ms-listviewtable {width:100%;}
table.ms-listviewtable {padding:3px;}
</style>

20131220image12

こうなりました。実に微妙ではあるのですが、外周の余白が広がり、他のとバランスがよくなっている、筈(笑)

20131220image13

なお、この「スクリプトエディター」は、編集時以外には画面に表示されません。また、ここに記述した「文言」は「CSS」と呼ばれる、Webサイトの見た目をコントロールするための仕組みです。それほど難しくありませんので、興味ある方は、調べてみてください。参考書籍 も沢山あります。

12.CSSでちょっと工夫(2.網掛け)

表形式の一覧は、やはり一行とびで網掛けしてくれた方が見やすいです。従来の SharePoint では、ビュー設定の[スタイル]で[網掛け]を指定することで網掛けにできました。

しかし、SharePoint 2013 では、この設定はあまりお勧めできません。GUI が SharePoint 2010 形式に戻ってしまうからです。例えば[…]メニューが表示されなくなります。機能的にはあまり問題ないのですが、ユーザーが混乱するかも。

そこで、ここでも CSS を使って網掛けしてしまいましょう。上で配置した「スクリプトエディター」に追記して、以下のようにします。

<style>
table.ms-listviewtable {width:100%;}
table.ms-listviewtable {padding:3px;}
.ms-alternating {background-color:#F1F1F1;}
</style>

20131220image14

こんな感じでどうでしょう?

番外編

折角ここまでしたのなら、もう一声行きましょう。ヘッダー行が少し寂しいですよね?あと、日本語環境の SharePoint 2013 は、Webパーツのタイトル文字がすこし大きすぎる気がします。そこで…

<style>
table.ms-listviewtable {width:100%;}
table.ms-listviewtable {padding:3px;}
.ms-alternating {background-color:#F1F1F1;}
table.ms-listviewtable TH {background-color:#0072C6; color:#FFFFFF}
table.ms-listviewtable TH .ms-vh2 a{color:#FFFFFF !important;}
.ms-vh2-nofilter, .ms-vh2-nofilter-notextalign, .ms-vh2-nofilter-perm, .ms-vh a, .ms-vh2, .ms-vh2 a {color: #ffffff;}
.ms-webpart-titleText{font-size:1.2em;}
#ms-microfeeddiv h2#ms-titlebardiv{display:none;}
</style>

こんな感じでどうでしょう?

20131220image15

以上、二回にわけて、SharePoint 2013 サイトデザインの小技(?)をお届けしました。もちろん、SharePoint Online でも使えます。実のところ、このエントリの内容こそ、先月上梓させて頂いたチームサイト解説本に載せたかったのですが、ページ数の制約もあり、断念せざるを得ませんでした。このブログで補足、ということにさせて頂ければと思います。

もし「こんな設定も見栄えする」「自分はこれがおすすめ!」というテクニックがありましたら、ぜひ教えて頂けると嬉しいです。


Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
FB : 中村 和彦
blog: Be・Better!
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-2014/9