ウィジェット堂 - Notion 向けウィジェット・動くアイコン・スタートページ・マイページ

Notion・Obsidian・FlowUs などへの埋め込み

ウィジェット・動くアイコン・動く背景を Notion に追加する方法と、Obsidian、FlowUs、GitHub、自分の Web サイトでの使い方をまとめました。

使い方は 2 通りです。ウィジェットは Web ページなので「埋め込み」、動くアイコンと動く背景は画像なので「画像リンク」として使います。

ウィジェット:Web ページを埋め込む

エディター右上の「埋め込みリンクをコピー」をクリックしてから、次のように貼り付けます。

アプリ方法
Notion/embed と入力してリンクを貼り付けます。リンクを貼り付けて「埋め込み」を選んでも OK。四隅をドラッグしてサイズを調整します
FlowUs埋め込みブロックを追加してリンクを貼り付けます
Obsidianノートに iframe を書きます:<iframe src="リンク" width="100%" height="300"></iframe>。閲覧モードで表示されます
自分の Web サイト・ブログ同じように iframe で埋め込みます

動くアイコン:ページアイコンに設定

  1. エディターで「埋め込みリンクをコピー」をクリックします。動くアイコンの場合は画像のリンクがコピーされます。
  2. Notion でページアイコンをクリックし、リンクからカスタム画像を追加して貼り付けます。
  3. あとはアイコンが自動で更新されます(例:毎日日付が変わる)。

動く背景:カバー画像に設定

  1. 同じようにリンクをコピーします。
  2. Notion で「カバーを変更」→「リンク」に貼り付けて確定します。

GitHub の README や WordPress で使う

動くアイコンと動く背景は、GitHub の README や WordPress でも使えます。エディターの「埋め込みリンクをコピー」の横にある矢印から「Markdown」(GitHub README)または「<img> での使い方」を選んでコピーしてください。

表示されないときは

  • Notion で真っ白になる:貼り付けたあと「ブックマーク」ではなく「埋め込み」を選んだか確認し、ページを再読み込みしてください。
  • 会社や学校のネットワークで開けない:埋め込みページをブロックするネットワークがあります。別のネットワークでお試しください。
  • 設定を変えても反映されない:エディターの変更は自動保存されるので、Notion のページを再読み込みしてください。動くアイコン・動く背景は数分ほどキャッシュされることがあります。
  • それでも解決しない場合は、ウィジェットのリンクとスクリーンショットを添えてメールでご連絡ください(アドレスはこのページの下にあります)。

解決しませんでしたか? islaohu@gmail.com

ヘルプセンター

はじめに

ウィジェット

マイデータ

アカウントとログイン

Pro とお支払い

よくある質問