cover image
🎇

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

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

Google Analytics

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
JavaScript
測定IDを取得して、G-XXXXXXXXXX部分をご自身のIDに書き換えてSuperに貼り付ければ、取得できます。このサイトなど見ながら取得してみてください。

buymeacoffee

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="YOURID" data-description="Support me on Buy me a coffee!" data-message="" data-color="#ff813f" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
JavaScript
notion image
noteのサポートのように、お布施をもらえる仕組み。こんな感じで、サイトに貼れます。 アイコンをアイスクリームにしたり、サポートの金額を何ドル単位にするか、などは自由に設定できます。海外のサービスですが、アイスをサポートしてもらえるという思想が好きで導入しました。この記事いいな、と思ったら、皆様からのアイスクリーム、お待ちしてます🍦
 

チャネルトーク

<script>
  (function() {
    var w = window;
    if (w.ChannelIO) {
      return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
    }
    var ch = function() {
      ch.c(arguments);
    };
    ch.q = [];
    ch.c = function(args) {
      ch.q.push(args);
    };
    w.ChannelIO = ch;
    function l() {
      if (w.ChannelIOInitialized) {
        return;
      }
      w.ChannelIOInitialized = true;
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
      s.charset = 'UTF-8';
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
    if (document.readyState === 'complete') {
      l();
    } else if (window.attachEvent) {
      window.attachEvent('onload', l);
    } else {
      window.addEventListener('DOMContentLoaded', l, false);
      window.addEventListener('load', l, false);
    }
  })();
  ChannelIO('boot', {
    "pluginKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  });
</script>
JavaScript
notion image
お問い合わせなどに適してると思います。botもある程度作ることが出来ます。ECサイトやサービスサイトにも向いてるはずです。チャネルトークは無料で始めることができます。
詳しいやり方は、こちらのサイトにまとまっています。

ヘッダーを消す

<style>
.notion-navbar {
    display: none !important;
  }
</style>
JavaScript
 
notion image
←Before
notion image
→After

noteの様に見やすくする

<style>
/* 文字の余白、行の高さ調整 */
	.notion-text {
	    line-height: 1.8;
	    margin-top: 8x !important;
	}
	.notion-text__content {
	    line-height: 1.8;
	    margin-top: 8x !important;
	}
	h1.notion-heading {
	    line-height: 1.3;
	}
	h2.notion-heading {
	    line-height: 1.5;
	}
	h3.notion-heading {
	    line-height: 1.5;
	}
/* 各要素の上下のマージンを調整 */
	h2.notion-heading {
	    margin-top: 2.5rem !important;
	}
	h3.notion-heading {
	    margin-top: 1.5rem !important;
	    margin-bottom: 0.5rem !important;
	}
	.notion-collection__header {
	    margin-top: 1.5rem !important;
	}
	.notion-bookmark {
	    margin-top: 0.5rem !important;
	    margin-bottom: 1.5rem !important;
	}
	.notion-embed {
	    margin-top: 0.5rem !important;
	    margin-bottom: 1.5rem !important;
	}
JavaScript

アイコンを非表示にする

/* ブログ一覧のアイコンを非表示 */
	.notion-property__title__icon-wrapper {
	    display: none !important;
	}
JavaScript

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

<style>
	.notion-callout {
		border-radius: 100px !important;
		position: relative !important;
		padding: 16px 24px !important;
		border: none !important;
	}
	
	.notion-callout.bg-gray-light {
		id : community-bottom!important;
	}

	.notion-callout.bg-purple-light {
		box-shadow: 0 10px 20px -10px #516Bbef !important;
		background: #6441A5 !important;
	}

	.notion-callout.bg-brown-light {
		box-shadow: 0 10px 20px -10px #516Bbef !important;
		background: #808080!important;
	}
		
	.notion-callout.bg-green-light {
		box-shadow: 0 10px 20px -10px #516Bbef !important;
		background: #84BD00 !important;
	}

	.notion-callout.bg-red-light {
		box-shadow: 0 10px 20px -10px #516Bbef  !important;
		background: #DA1725 !important;
	}
  
	.notion-callout.bg-yellow-light {
		box-shadow: 0 10px 20px -10px #f0bd66 !important;
		background: #f0bd66 !important;
	}
  
	.notion-callout.bg-blue-light {
		box-shadow: 0 10px 20px -10px #1ea1f1 !important;
		background: #1ea1f1 !important;
	}

	.notion-callout a {
		letter-spacing: -0.5px !important;
		padding: 0 0 2px 66px !important;
		align-items: center !important;
		position: absolute !important;
		font-weight: 600 !important;
		display: flex !important;
		border: none !important;
		color: #FFFFFF !important;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
	}
JavaScript
notion image
要はこんな感じにしたいってことです。
 

Twitterでのシェアボタン 

https://twitter.com/intent/tweet?text=まちるだ日記読んだよ%20https://matilda.xyz
JavaScript
わかんないって、言ったらまさたけ先生が教えてくれました。一旦ここまで。随時更新予定です。

  • 2021/3/15公開