注目リンクをページャを出さずに折り返して全部表示する

SharePoint2013から追加された新しいリスト、「注目リンク」。
いわゆるタイルUIで、SharePoint2013の画面デザインにもしっくりきますし、積極的に使っていきたいアプリではあると思います。

しかしリンクアイテムの数が増えてくると、デフォルトでは画面から見切れてページャが出てきてしまいます。
図1

ページャなしで折り返して全部見せたい!
そういう場合は、以下のCSSをスクリプトエディタ webパーツでページに埋め込みます。

<style>
.ms-promlink-header{
	display: none;
}
.ms-promlink-body {
   	width: 100%;
} 
.ms-tileview-tile-detailsBox{
	background-color: rgba(0,68,112,0.75);
}
</style>

上記サンプルコードでは、画像にオーバーレイするキャプションの背景色も変えてますが、この辺はお好みで。
すると、こんな感じで表示されます。
図2

いかがでしたでしょうか?参考にしていただけるとうれしいです。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中