NotionとSuper.soでカスタムHTMLを埋め込む方法

NotionとSuper.soを使ってWebサイトを作成する際、カスタムHTMLを埋め込みたいケースがあります。例えば、特別なウィジェットや外部サービスのコンテンツを表示させたい場合などです。

本記事では、NotionとSuper.soでカスタムHTMLを簡単に埋め込む方法をご紹介します。

• Notionでコードブロックを作成
• コードブロックにHTMLを記述
• Super.soでページを更新
• 注意点
• まとめ

Super.soでは2024年4月30日のアップデートにより、カスタムHTMLの埋め込み方法が簡素化されました。以下の手順に沿って設定しましょう。

How to Do Custom Embeds on the Notion or Super page | Super Help Center

This script from our community allows you to run embeds on a Super site where you want them, using the code block in Notion.

help.super.so

Notionでコードブロックを作成

Notionのページ上で「/code」と入力し、コードブロックを作成します。

コードブロックにHTMLを記述

コードブロックの1行目に「super-embed:」と入力します。その下の行からHTMLを記述していきます。

super-embed: <div> <h2>埋め込みたいHTMLのタイトル</h2> <p>ここに埋め込みたいHTMLを書きます。</p> </div>

↓実際に埋め込んだエリア↓

↑実際に埋め込んだエリア↑

LotttieFilesを埋め込んでみた

Source

Super.soでページを更新

NotionのページをSuper.soに公開している場合、ダッシュボードでページを更新すると、先ほど記述したHTMLがページ上に表示されます。コードブロック内にJavaScriptを記述していた場合も、ページの更新時に自動的に実行されます。

注意点

• スクリプトの実行に不安定な場合は、Super.soの「Code」セクションの「Head」にスクリプトを読み込むようにしてください。
• 2024年4月30日以前は、「Head」セクションに専用のスクリプトを読み込む必要がありましたが、現在は不要になりました。

まとめ

NotionとSuper.soを使ったWebサイト制作において、カスタムHTMLの埋め込みは非常に重要な機能です。最新のアップデートにより、より簡単に実装できるようになりました。本記事の手順を参考に、ぜひ様々なHTMLを埋め込んで、Webサイトを充実させてみてください。

Source