🙆‍♀️

Notionでアイコンリンクを表示する

2024/05/11に公開

はじめに

個人Notionに社内ポータルのように、頻出するサイトのアイコンリンクを表示させたい。

https://insite.discoveries.co.jp/support/guide/portal_admin/a5/
https://www.sg-plus.jp/blog/20230727

ブックマーク案

ブックマークを詰めて表示すればアイコンのようになるかと考えたが、文字が説明文章がやや冗長。

Mermaid案

Mermaidでアイコン画像を表示して、さらにクリックしたら別サイトにつながるように設定する。これが現状よさそう。

flowchart

  slack(<img src='https://play-lh.googleusercontent.com/mzJpTCsTW_FuR6YqOPaLHrSEVCSJuXzCljdxnCKhVZMcu6EESZBQTCHxMh8slVtnKqo'/>)
  click slack "http://www.yahoo.co.jp"
	
  kintone(<img src='data:image/jpeg;base64,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'/>)
  click kintone "http://www.yahoo.co.jp"

構文

flowchart
	
  <リンクのid>(<img src='アイコンの画像のURL'/>)
  click <リンクのid> "<遷移させたいURL>"

Discussion