サイドリンクバーにwebフォントでリストマークをつける

SharePoint３分クッキングの時間がやってまいりましたー。
と、いうわけで、またしても3分でできる小ネタをご紹介します。
（SharePoint2013のオンプレ環境、ブラウザはIE11で検証しました）

サイドリンクバーのエントリに、好きなリストマークをつけたい！と思い立っても、画像を準備して表示させるのは結構面倒です。やる気が失せがちです。
そんなとき、webフォントでさくっとリストマークを表示できれば便利ですよね。

というので、定番webアイコンフォント Font Awesome を利用してリストマークをつけてみました。

できあがりはこんな感じです。

なお、Font Awesomeの基本的な使い方などは、以下をご参考に。
アイコンをWebフォントで表示！ Font Awesomeの使い方 [ホームページ作成] All About.

CSSです。

@import "//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css";

.ms-core-listMenu-verticalBox > ul > li:first-child .ms-core-listMenu-item::before {
    content: "\f015";
    font-family: FontAwesome;
    margin-right: 5px;
    width:1em;
}

.ms-core-listMenu-verticalBox ul li ul li .ms-core-listMenu-item::before {
    content: "\f101";
    font-family: FontAwesome;
    margin-right: 3px;
    width:1em;
}

こういうちょっとしたことでも、サイトの雰囲気はずいぶん変わるので、気が向いたときに試してみていただければと思います。

SharePoint2013 注目リンクを丸くしてみた

SharePoint 3分クッキング！ということで、3分でできるカスタマイズをご紹介します。

先日、注目リンクのカスタマイズについての記事をアップしましたが、その続き（？）です。

表題のとおりで、ふつうは四角い注目リンクを、CSSで丸くしてみよう！というものです。
できあがりはこんな感じ。

CSSです。

.ms-tileview-tile-content, .ms-tileview-tile-content img {
    height: 150px;
    border-radius: 50%;
}
.ms-tileview-tile-detailsListMedium {
    padding: 10px 40px;
}

いい加減なCSSなんで、キャプションの文字列が若干切れてますが、そこはご愛嬌ということで（笑）。
サイトの雰囲気をやわらかくしたいときに、いかがでしょうか？

SharePointのナビゲーションで「最近使った項目」を隠す

GWはひどい鼻風邪で引きこもっていたにもかかわらず、いまだに風邪が抜けません。ずぴー。やれやれ。

前回のポストで、ちょろっとふれたナビゲーションの「最近使った項目」。

これ、表示したくないって時も結構あるんでないかと思います。

しかしながら、2010の時みたいにCSSで隠すのはちょっと難しい（クラス名とか、IDとかついてないのですよ・・・）。
仕方ないので奥の手・JavaScriptで無理やり隠します。

$(document).ready(function() {
    $(".ms-core-listMenu-item:contains('最近使った項目')").parent().hide();
});

コード見ていただければわかりますが表面的に隠しているだけですので、気がむいたときにサイトの設定のナビゲーションから削除してあげたほうがいいと思います。

ついでに、2010から引き続きwikiページライブラリに出てきてしまう例のアレ

も、JavaScriptで隠せます。

$(".ms-core-listMenu-item:contains('更新済みのページ')").parent().hide();
$(".ms-core-listMenu-separatorLine").hide();

サイトカスタマイズの参考になれば・・・。