SharePointのモダンUIでバナーリンクを作ってみた

イントラサイトであってもプロモーションよりのサイトであればたまに見かけるバナーリンク、クラシックUIであれば概要リンクを使って簡単にできます。

クラシックUIの概要リンク
概要リンクの設定例

ではモダンUIではどうでしょう。いくつかのパーツで試してみました。

◆クイックリンク

クイックリンク

ご覧の通りどれもイマイチ。基本的に画像は正方形にトリミングされてしまうのでバナーリンクとして扱うには無理がありそうです。形を限ればタイルが一番バナーっぽいかなー。ボタンスタイルの見た目は結構好きです。

◆画像

画像パーツ

画像パーツは画像自体にリンクを挿入することができます。上画像はパーツを縦に並べて配置した状態です。バナーっぽいけど間隔広すぎます。単独の画像リンクとしては申し分なし。

◆マークダウン

マークダウン

間隔が少しだけ広いかなってのと、リンクの範囲が横幅いっぱいで空白部分もリンクになってしまうのであまり好みじゃありません。
余談ですが、一般的なマークダウンは<img>タグが使える(←この認識はあってますか?)ようですが、SharePoint Onlineにおいては使えないようで画像サイズの変更ができませんでした。画像サイズを小さくしたい場合にはセクションの領域で工夫するくらいしか手段がなさそうです。

◆リスト(ビューの書式設定)

みんな大好きビューの書式設定!やっぱりこれだね!

リンクをリストで管理

こんな感じのリストに対して

{
  "hideSelection": "true",
  "hideColumnHeader": "true",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "margin-top": "10px"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "[$Link]"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Img]"
            }
          }
        ]
      }
    ]
  }
}

なんてJSONを適用すると

ビューの書式設定を適用したリストパーツ

こうなりまーす。綺麗だね!

ただこいつにも欠点があって、リスト名と「すべて表示」リンクが非表示に出来なさそうです、ちょっと邪魔。あとはリスト画面とサイトページでマージン幅が少し変わります。(上画像はサイトページのキャプチャ)

ビューの書式設定が有能なのはわかったんですが、リストページとサイトページでスタイルが異なるのは勘弁していただきたいですね!もう!

お粗末でした。