Notionの見た目を自分好みにカスタマイズする方法(オリジナルCSSを適用)
ブラウザの拡張機能「Tampermonkey」を利用し、Notionに独自のCSSを追加することで、見た目をカスタマイズする方法について紹介します。
作成した機能の概要
通常のNotionの画面だと、ヘッダ1・ヘッダ2・ヘッダ3の違いが分かりにくいし、もっと目立たせたりしてアレンジしたいと思うようになりました。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/6e0ba1de-dba4-4ee8-954b-12811d11d21d/d6e88683bd560a0bf250f4076f370a80.png)
そこで以下のように、自分好みに見た目をカスタマイズできるスクリプト(UserScript)を導入しました。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/7f6e0e44-ed8e-47bc-ac9c-1cddd9951b08/1f46fe969a0211e0e0d1dbeedd7f75c0.png)
導入手順
1. TamperMonkeyのインストール
まず始めに、動作させるスクリプト(UserScript)を登録するのに便利な「TamperMonkey」という機能をインストールします。
2. カスタムスクリプトの導入
Tampermonkeyのメニューから、「ダッシュボード」をクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/55ede29f-7c52-4b47-a4fd-26d1787db0df/d3b6231d3b0b381f668f465f4c7559fb.png)
「+」ボタンをクリックし、以降に記載しているサンプルコードをエディタ内にペーストし、「Ctrl+S」等のコマンドで保存します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/6b7964ab-4867-4b68-a747-a40fe0f5a878/46d7df73e05165d00745a7bfc2f99bcb.png)
サンプルコード
「@match」で指定したURLへアクセスした際にこのスクリプトが動作します。
GM_addStyle関数の引数に、適用させたいCSSのコードを追加します。
コードをもっとカスタマイズする手順は以降の「4. スクリプトのカスタマイズ」で説明しています。
3. 動作確認と有効/無効の切り替え方法
スクリプトを保存したら、「インストール済み UserScript」タブから登録内容を確認できます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/04bac978-ce34-489a-baa9-da494a7e56da/965e6528a4e3ae0e09882421bbe0cd2a.png)
スクリプトが有効の状態でNotionのサイトにアクセスし、ページを更新するとCSSが適用されます。
スクリプトが読み込まれている場合はTampermonkeyのアイコンに赤色のバッチが付きます。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/shukapin-note/87828248-e929-4fc0-ba29-b798427fd870/23a4d4fb65d2333775cc71424c8839a9.png)
4. スクリプトのカスタマイズ
サンプルコードをさらにCSSの指定可能な主なクラス名を下記の表にまとめました。
(ブログ更新時点のもの。Notionのアップデートで変更する可能性があります。)
クラス名 | CSS適用対象の要素 |
---|---|
.notion-header-block | ヘッダ1 |
.notion-sub_header-block | ヘッダ2 |
.notion-sub_sub_header-block | ヘッダ3 |
.notion-topbar | 上部のメニューバー |
.notion-sidebar | サイドメニュー |
.notion-page__title | ページタイトル |
.notion-page-content | ページ全体 |
.notion-table_of_contents-block | 目次 |
.notion-table-block | 表 |
.notion-page-view-discussion | コメント欄 |
.notion-image-block | 画像 |
.notion-bookmark-block | ブックマークリンク |
.notion-callout | Callout |
サンプルコードは色の変更だけですが、CSSでできることは何でもできます。
需要がありそうなら、今後多様なサンプルコードを作成して公開しようと思っています。