cover image
🎇

Notion×Superで使えるCSSやscriptまとめ

こんにちは。Notion大好き人間、まちるだです。
先日Notion×Super使ってWebサイトを公開する流れの記事を書いたのですが、その後複数のCSSやscriptをペタペタ貼ることで、見やすさを改善したり、機能を追加することができるようになりました。自分用のメモが誰かの役に立てるといいなと思い、コードを貼っておきます。
 
改めて私の知識レベルと前提
  • Notionは普段から主にToDoリストで愛用中
  • HTMLとCSSはProgateやったので、なんとなくわかる
  • 普段はコーポレート系のお仕事の人
  • superデビューは2021年になってから
  • わからないことはGoogleで調べた上でそれでもわかんないことはTwitterで聞いて善意で答えてくれた人に頼るスタイル

Google Analytics

JavaScript
測定IDを取得して、G-XXXXXXXXXX部分をご自身のIDに書き換えてSuperに貼り付ければ、取得できます。このサイトなど見ながら取得してみてください。

buymeacoffee

JavaScript
notion image
noteのサポートのように、お布施をもらえる仕組み。こんな感じで、サイトに貼れます。 アイコンをアイスクリームにしたり、サポートの金額を何ドル単位にするか、などは自由に設定できます。海外のサービスですが、アイスをサポートしてもらえるという思想が好きで導入しました。この記事いいな、と思ったら、皆様からのアイスクリーム、お待ちしてます🍦
 

チャネルトーク

JavaScript
notion image
お問い合わせなどに適してると思います。botもある程度作ることが出来ます。ECサイトやサービスサイトにも向いてるはずです。チャネルトークは無料で始めることができます。
詳しいやり方は、こちらのサイトにまとまっています。

ヘッダーを消す

JavaScript
 
notion image
←Before
notion image
→After

noteの様に見やすくする

JavaScript

アイコンを非表示にする

JavaScript

アイコンをクリックするとリンク飛ぶように

JavaScript
notion image
要はこんな感じにしたいってことです。
 

Twitterでのシェアボタン 

JavaScript
わかんないって、言ったらまさたけ先生が教えてくれました。一旦ここまで。随時更新予定です。

  • 2021/3/15公開