🎇
Notion×Superで使えるCSSやscriptまとめ
こんにちは。Notion大好き人間、まちるだです。
先日Notion×Super使ってWebサイトを公開する流れの記事を書いたのですが、その後複数のCSSやscriptをペタペタ貼ることで、見やすさを改善したり、機能を追加することができるようになりました。自分用のメモが誰かの役に立てるといいなと思い、コードを貼っておきます。
改めて私の知識レベルと前提
- Notionは普段から主にToDoリストで愛用中
- HTMLとCSSはProgateやったので、なんとなくわかる
- 普段はコーポレート系のお仕事の人
- superデビューは2021年になってから
- わからないことはGoogleで調べた上でそれでもわかんないことはTwitterで聞いて善意で答えてくれた人に頼るスタイル
Google Analytics
JavaScript
buymeacoffee
JavaScript
noteのサポートのように、お布施をもらえる仕組み。こんな感じで、サイトに貼れます。
アイコンをアイスクリームにしたり、サポートの金額を何ドル単位にするか、などは自由に設定できます。海外のサービスですが、アイスをサポートしてもらえるという思想が好きで導入しました。この記事いいな、と思ったら、皆様からのアイスクリーム、お待ちしてます🍦
チャネルトーク
JavaScript
お問い合わせなどに適してると思います。botもある程度作ることが出来ます。ECサイトやサービスサイトにも向いてるはずです。チャネルトークは無料で始めることができます。
ヘッダーを消す
JavaScript
←Before
→After
noteの様に見やすくする
JavaScript
アイコンを非表示にする
JavaScript
アイコンをクリックするとリンク飛ぶように
JavaScript
要はこんな感じにしたいってことです。
Twitterでのシェアボタン
JavaScript
わかんないって、言ったらまさたけ先生が教えてくれました。一旦ここまで。随時更新予定です。
- 2021/3/15公開