SharePointのモダンUIで、リストの書式設定をJSON形式で入力することにより、カスタムCSSを適用してみましょう。
今回は、このようなリンクリストを作成します。
WEBパーツで似たような形を作れますが、細かいCSSが調整できません。リストのWEBパーツとして複数のページで使用すると、一度の修正で全てのページに修正が適用されます。サイト内で共通で使いたいパーツをこのように使用すると便利です。
前提条件
- SharePoint Online
- モダンUI
- リスト
モダンUIのリストにオリジナルのCSSを適用します。ただし、CSSの適用範囲は限定的でそのリストの中のみです。カスタムCSSは各要素に直接style属性での記述となるため、WEBパーツの範囲外には適用できません。headerやナビなどに適用したい場合にはSPFxの構築を検討してください。
使用できるHTMLタグやCSSが限られている
JSON形式の書式設定を使用すると、HTMLタグの構造を自分で設定できますが、使用できるタグやCSSが限られています。
▼DOM要素
- div
- span
- a
- img
- svg
- path
- button
- p
- filepreview
CSSは項目が多いのでこちらを参照してください。
gridレイアウトなども使用できますが、親要素には干渉できず、各アイテムに対してしかstyleが設定できないため、レイアウトが限られてきます。そこも考慮して構築するようにしてください。
リストアイテムを作成
まずはサイトコンテンツページの「新規」メニューから、空白のリストを作成します。（既にあるリストを使ってもOKです）
作成したリストを確認します。空のリストなので、タイトルの欄だけ入っています。
ここに、必要な項目の列を追加していきます。列の名前は半角英字にしてください。
- Title …タイトル
- Link …リンク先
- newTabOpen …新しいタブで開く（target=”_blank”）
今回は、3つのステータスを作成しました。タイトルとリンク先は１行テキストのフィールド、新しいタブで開く判定は、はい/いいえフィールドにしています。これでリストのベースは完了しました。
アイテムを作ってみましょう。
2つアイテムを作成しました。
「ビューの追加」から、カスタムビューを作成します。
作成したビューのメニューから、「現在のビューの書式設定」を選択します。
開いたサイドメニューの「詳細モード」を選択すると、JSON形式での書式設定が表示されます。
ここを編集すると、カスタムレイアウトが適用可能です。
※再度デザインモードに切り替えると設定したデザインが白紙に戻ってしまうので注意してください。
HTMLタグのJSON
こちらがJSONデータで記述した、タグの基本構成です。
divとspanをaタグで囲う構成になっています。divは「＞」アイコン、spanにはTitleのテキストが表示されます。
JSON記述では、最後の列のカンマは不要なので注意してください。エラーが出てしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "hideSelection": "true", "hideColumnHeader": "true", "rowFormatter": { "elmType": "a", "attributes": { "href": "[$Link]", "class": "customLinkParts", "target": "=if([$newTabOpen] == true, '_blank', '_self')" }, "style": { "display": "flex", "width": "200px", "float": "left", "padding": "8px", "margin-right": "8px", "border": "#000 solid 1px", "border-radius": "3px", "text-decoration": "none", "color": "#000" }, "children": [ { "elmType": "div", "attributes": { "iconName": "ChevronRight" }, "style": { "color": "#F09609", "margin-right": "3px" } }, { "elmType": "span", "txtContent": "[$Title]" } ] } } |
細かく注釈を入れるとこうです。（注釈ありの状態で入力するとエラーになるので注意）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "hideSelection": "true", //リストの選択チェックボックスを非表示 "hideColumnHeader": "true", //列ヘッダーを非表示 "rowFormatter": { "elmType": "a", //aタグを追加 "attributes": { "href": "[$Link]", //href属性に$Linkの値を挿入 "class": "customLinkParts", //aタグに任意のclassを追加 "target": "=if([$newTabOpen] == true, '_blank', '_self')" //targetの設定 }, "style": { //aタグのCSS "display": "flex", "width": "200px", "float": "left", "padding": "8px", "margin-right": "8px", "border": "#000 solid 1px", "border-radius": "3px", "text-decoration": "none", "color": "#000" //最後の行はカンマなし }, "children": [ //子要素 { "elmType": "div", //divタグを追加 "attributes": { "iconName": "ChevronRight" //Fabric Icons「＞」を追加 }, "style": { //divタグのCSS "color": "#F09609", "margin-right": "3px" //カンマなし } }, { "elmType": "span", //spanタグを追加 "txtContent": "[$Title]" //$Titleの値をテキストとして挿入 } ] } } |
rowFormatterの5行目から要素の記述が始まります。
elmTypeで要素の種類を指定します。
|
6 |
"elmType": "a", |
attributesでタグに付与する属性を設定しています。
[$Link]はリストの列で入力した値が入ります。
|
7 8 9 10 11 |
"attributes": { "href": "[$Link]", "class": "customLinkParts", "target": "=if([$newTabOpen] == true, '_blank', '_self')" }, |
[$newTabOpen]のはい/いいえフィールドの分岐はこのようにします。
$newTabOpenがはいの場合⇒_blank、いいえの場合⇒_selfになるという記述です。
|
10 |
"target": "=if([$newTabOpen] == true, '_blank', '_self')" |
このJSONコードを入力し、保存ボタンを押すと、リストの表示が更新されます。リストの画面ではfloatがうまく動作しない場合があるので、一度次のステップに進んでから微調整した方が効率が良いかもしれません。
限られた範囲内ではありますが、ここからタグの構造やstyleを調整すると、さらに表現の幅が広がります。また、独自のclassを付与しているので、SPFxで作成したカスタムCSSからstyleを追加することもできます。
作成したリストをページに挿入する
編集したリストをページに挿入しましょう。
ページを編集モードにし、リストのWEBパーツを挿入します。
作成したリストを接続し、表示する項目を先程作成したビューにします。
このスクショでは「カスタムビュー」になっています。
また、オプションの「コマンドバーを表示しない」「すべて表示ボタンを非表示にする」機能をオンにします。
見出しはデフォルトの機能では削除できません。適用を押すと、表示が変わります。
編集を保存し、公開すると正しく表示されています。
