⚡Notion × Superでちょっと良い感じにサイトを作るときのTips

前提

NotionをベースにSuperを用いてWebサイト構築する際のお役立ち情報を記載する。

なお検証・調査時期は2022年6月~7月くらい

そもそもSuperとは何かについては以下の記事が事例等もあってわかりやすい。

NotionとSuperを使って爆速でWebサイトを公開する(独自ドメイン化)

こんにちは、にくそです。 CloudflareのWorkerを使用して無料で独自ドメイン化する方法が金銭面では有利ですがSEO対策ができないことやサイトの読み込みに時間がかかるのであまりよろしくありません。 有料のNotionの独自ドメイン化にはいくつかサービスがありますが今回はその中でも爆速で公開できるSuper というWebサービスを使って公開してみます。 Superは1サイト毎に1400円ほどかかるので独自ドメイン化サービスにしてはかなり高額です。 読み込みが多少遅くてもいいからお金をかけたくない方は こちらの記事 を参考にCloudflareを使用して独自ドメイン化してみて下さい。 Superを使用すると がNotionで作成したページに対して行えます(結構いい) それでは早速Superを使用してNotionのサイトを独自ドメイン化していきましょう はじめにSuperの公式サイトにアクセスします Super.so この真中の Create your site をクリックします。 するとこのような美しいニューモフィズムの登録ページにアクセスさせられるのでこちらにメールアドレス、パスワード、クレジットカード情報を記入します。 するとダッシュボードにアクセスできます。 ニューモフィズムかわいい！ 早速サイトをデプロイしていきます！ 右上にある New siteをクリックします。 すると の2つの選択肢が表示されます。 Super Defaultはただ独自ドメイン化するだけ、Super StaticはSEO対策や表示速度改善をしてくれるぽいです。 払う金は同じなので Super Staticを選択します。 すると を入力する画面になります。 Site nameには管理画面に表示する名前、Custom domainには使用するドメイン、Public Notion URLにはNotionをシェアで出てきたURLをコピペします。 Continueを押すとPretty URLsというものを入力する画面が出ますがわざわざしなくてもいいと思います。 Pretty URLsに何も入力せずに Continue を押すとDNSの設定が始まります。 ここは各自設定して下さい。 最後にページの設定です。 Custom fonts お好きなフォントをどうぞ。 Site image Twitterとかにシェアした際のOGP画像です。 きれいなのを作って設定しましょう Custom favicon そのままサイトのfaviconです。 適当な絵文字でいいと思います。 Snippet njection ここに文字を入力すると左上にサイトの説明文みたいなのを表示できます。 Site description Google検索とかで表示される説明文です。 サイトのタイトルと同じワードをここにも入れるとSEO上位狙いやすいです。 下のボタン3個 基本的にデフォルトのままでいいです。 左から順にサイト内検索、サイトのプロパティーを表示するか否か、Google検索などに表示されるようにするか否か これで設定は終わりです！ 最後にSuperで作成したページとCloudflare Workerで作成したページの Lighthouse スコアを比較しようと思います！ 左が Super右が Cloudflare Workerです！！！ あぁ！！一目瞭然ですね！！ 最後まで読んでいただきありがとうございます！ 良ければZennやTwitterのフォローしていただければ嬉しいです！ ではまた！

zenn.dev

NotionとSuperを使って爆速でWebサイトを公開する(独自ドメイン化)

基礎知識

構築の基礎

まずやるのは/(home)となるページを選定し、共有リンクを発行すること。

最初のCreate a new siteのモーダルで入れるやつ。

image

ここで指定したNotion page URLのページが所謂indexページになる。

Notion page URLはNotionで「共有」から「Webで公開」した際に取得できるリンク。

Notionの右上
Notionの右上

以降このNotionのページ配下に配置したページはすべてNotion側の仕様で「Webで公開」され、Super側でも自動的に公開される。

なお登録ドメイン/ページタイトルという構造で公開されるので、導線を設置していなくてもURL直叩きで見られるようになるので注意。

サイトとして公開される範囲について

個人的に最も重要な仕様だと思ったのが、同じワークスペース内でもあくまでCreate a new siteで指定したページ配下のみが公開され、それ以外はSuperの関心事には含まれないというもの。

これはSuperというよりNotionの仕様の話ではあるが、不注意でセンシティブ情報を知らぬ間にインターネットの海に放流していたみたいなことを防ぐためには理解しておくべきことである。

具体例

以下実例で解説する。

とあるワークスペースでこのようなページ構成になっていたとする。

  • TESTとAAAAAAAという親ページが2つあり、子ページがそれぞれぶら下がっている。
Notionのサイドバー
Notionのサイドバー

ここでTESTをNotionの「共有」から「Webで公開」すると、TEST配下がすべて公開される。

このTESTのURLをSuperのNotion page URLにいれて公開すると以下のようになる。

/(home)はNotionの「TEST」
/(home)はNotionの「TEST」

ここで覚えておくべきなのはAAAAAAAはNotionの仕様で「Webで公開」されていないし、当然Superにも関与しない。

さらに親ページとして最初にNotion page URLで公開したページ配下に存在しないページは「Webで公開」してSuper側でAdd new pageで指定してもSuepr側では404になる。

image

これはドキュメントでも強調して記載されている。

Important: If you want to show pages on your site, they must be public in Notion and must be child pages of the site's home page. This prevents Notion pages you don't own from loading on your site, as well as pages in your workspace you may not want others to see.

つまり今回の例で言えば、AAAAAAA配下のBBBBBBを「Webで公開」してAdd new pageに指定しても、/(home)として最初に親として指定したTESTの配下に無いページなのでSuperでは読み込まれない。

「Webで公開」されてはいるのでNotionのURLでは公開されているが、Superでは公開されない。

削除の仕様

これは簡単かつ当たり前だが、Notion本体を消すとSuperからも消えるが、Super側で消してもNotion側は消えない。

便利なテクニック

導線を表示したくないページの隠し方

基本的にNotionの仕様で子ページを作るとその親ページに子ページへの導線ができてしまい、消せない。

これは導線としては隠しておきたいけど子ページにしたい際に不便である。

そのため以下のような手順でSuperで生成したサイトでは導線を隠すことができる。

  1. トグルリスト( >で出てくるやつ)を作る
  2. その中に隠したいページを入れる
  3. 該当トグルリストのカラーから背景色をブラウンとかにする
image
  1. Super側のCSS設定で背景色がブラウンの要素をdisplay: noneにする
.notion-toggle {
   display: none !important;
}

偉大なReference

トグルの中を2カラムにする

もともとトグルリストの中身は2カラムにすることができず、高度なテクニックを用いて実装する必要があり、構築していた2022年6月に苦しんだが、Notionのアップデートで解決した。

ちなみにこれ以前はこういうテクニックを使った。

【notionの使い方】トグルの中でブロックを横に並べる方法

今回は、Notionで トグルの中に横並びのブロックを収める方法 をシェアします。 Notion ：情報整理アプリ。アメリカではNote-takin appとして既にマジョリティ層まで浸透しています。日本でも人気が出てきましたがが、日本語版の公式サイトがイマイチ。翻訳が原文と対応していなかったり、分かりにくかったりと、日本語情報はまだまだ少ないようです。 今回やりたい「 トグルの中でブロックを横に並べる 」とは、次のようなことです。 このような横並びのブロックを･･･ 「アイテムリスト」と「カレンダー」の二つのブロックが横に並んでいます。 ↓のように、Toggle（▼）の内部に入れること！ 「アイテムリスト」と「カレンダー」を、トグル（▼）の内側に移動しました。 非表示・表示を切り替えられる 上の画面でトグルのボタン（▼）を押すと、↓のようになります。 Toggleの内部のブロックは、必要ないときに 非表示にできます。 見たいときだけパッと出せるので、ページの一覧性が上がります。スケジュールやタスク一覧にぴったり。 これを実現しようとすると、 直感的な操作ではうまくいきません 。 例えば、Toggleを作ってその下にドラッグ＆ドロップすると↓の状態になります。 二つのブロックが縦に並んでしまって、横並びにできません。無理矢理「アイテムリスト」の隣にドラッグ＆ドロップしようとしても、Toggleの外に出てしまいます。 ではどうすれば良いでしょうか。手順を説明していきます。 一言でいうと、 のです。一つずつ見ていきましょう。 トグルを作りたい場所に、「 Toggle」ではなく「 Page 」を作ります。 Pageの作り方 Pageを作りたい場所をクリックして 「/」（スラッシュ）を入力 します。 すると↓のように選択肢が開くので、 「page」をクリック します。 これで新規ページができたはずです。 ※　「/page 」と入力しても同じことができます。 現在の状態はこう↓なっています。 ※　Page名は「ここは何でもいいので入力」に変えました。 ブロックをPage内に移動する ブロック「アイテムリスト」と「カレンダー」は、まだトグルの外側にあります。 これらのブロックを、 一旦Pageの中に移動 させましょう。 ドラッグ＆ドロップで移動 二つのブロックをPageの中に移します。具体的には： 移動したいブロックを選択し、 左上のクリリンマークをドラッグして、 「Page」にドロップします。 ※　 iPad版を使っている方は、 iPadではドラッグ&ドロップができないので、「 move to 」機能を利用します。その方法はすぐ次に解説します。 すると、ブロックが現在のページから消えたように見えます。 消えたブロックは、ちゃんとPageの内側に移動しています。 「Move to」で移動してもOK iPad版アプリではドラッグ＆ドロップができないので代わりの方法をとります。 移動したいブロックを選択した状態で、左上のクリリンマークをクリックして「 Move to 」を選びます。 すると、「 どのページに移動したいか」の選択肢がポップアップするので、 先ほど作ったPageの名前を入力して、選択します 。 これで、ブロックがPageの中に移動します。 Pageをクリックして開き、 ブロックをドラッグ＆ドロップして横並びに配置 します。　※　iPad版ではドラッグ＆ドロップができないので、この操作はできません。 はい、ブロックを横並びにするのは少しトリッキーです。コツは 最初に見出しを配置 すること。 具体的に手順を説明します。 ①　h1のブロックを二つ作り、ドラッグ＆ドロップして横並びにする 見出しタグ（ｈ1，ｈ2など）のクリリンを掴む 掴んだ見出しを、別の見出しの隣にドラッグする これで、見出しが横に並びました。 次に、ブロックを横に並べた見出し直下にドラッグ＆ドロップします。 Page内が↓の状態になりました。 これで、ブロックを横に並べることができました。 では、一つ上の階層の先ほどのページに戻ります。 Pageのクリリンをクリックして、「 Turn into」＞「 Toggle list 」を選択します。 これで、Pageの中身がToggleの内側にネストされました。 ↓の状態になっていれば完成です。 これで、 Toggle（▼）をクリックすれば、横並びのブロックの表示・非表示を切り替えられる ...

sicha.blog

【notionの使い方】トグルの中でブロックを横に並べる方法