【SharePoint】タイル風にカスタマイズしたビューを、ページに表示させる

f:id:tecchan365:20190628114620p:plain

以前、ビューの書式設定をカスタマイズして「リストアイテムをタイル風に表示させる」という記事を掲載しました。

mynote365.hatenadiary.com

こちらの書式設定を適用したリストを、Webパーツを利用してページに表示させると、以下のようにアイコンが小さくなってしまったり、文字色が異なってしまう現象が発生してしまいます。
しがっくま (@RYO0305) | Twitter さんからこの現象について教えていただきました。)

f:id:tecchan365:20190628112543p:plain

こちらの現象を回避するようなコードを作成してみました。

修正してみた書式設定のコード

以下は、修正してみたビューの書式設定のコードです。

github.com

文字色や、アイコンの大きさを変えたい場合は、画像の赤枠の場所の値を変更します。 f:id:tecchan365:20190628113952p:plain

動作確認

修正したコードを適用したリストを、ページに表示すると以下のようになります。
アイコンも大きいまま表示されていますね。

f:id:tecchan365:20190628114306g:plain

以上です。

補足:色について

SharePointで使用されている色は、以下に掲載されています。
文字色の設定するときに参考にしてみてください。

developer.microsoft.com