Android で Notion を CSS カスタマイズする方法 (Edge + Tampermonkey)

はじめに

Notion では公式にページの見た目を統一的にカスタマイズする機能は提供されていません。

Windows 環境では Chrome 拡張の Tampermonkey を使うことで CSS により Chrome ブラウザで動作する Notion の見た目を統一的にカスタマイズすることができます(アプリ版では非対応)。

Android 版 Chrome では拡張機能がサポートされていないため、Windows と同様の方法で見た目をカスタマイズすることができません。しかし、Microsoft Edge (通常版) + Tampermonkey を使うことで、ブラウザ上の Notion にカスタム CSS を適用し、見た目を自在に変更できます。

本記事では PC の Chrome + Tampermonkey で作成したユーザースクリプトを Android 側でも Edge で共有・適用する方法を解説します。
※ 参考にした記事では Edge Canary を使っていましたが、Notion を CSS でカスタマイズする限りにおいては 通常版 Edge でも動作・同期できることを確認しています。

動作環境

Windows 側は以下の環境で確認しました。

• OS: Windows11 25H2
• ブラウザ: Google Chrome 143.0.7499.170
• Chrome拡張: Tampermonkey 5.4.1

同様に Android 側の環境は以下のようになっています。

• OS: Android 13
• ブラウザ: Microsoft Edge 143.0.3650.88
• Chrome拡張: Tampermonkey v5.4.0

利用手順

Windows + Chrome + Tampermonkey で Notion に CSS を適用する

あらかじめ Windows 側で Chrome に Tampermonkey 拡張をインストールし、Notion に CSS を適用するためのユーザースクリプトを登録しておきます。このやり方は Notionの見た目を自分好みにカスタマイズする方法（オリジナルCSSを適用）で紹介されているやり方とユーザースクリプトをほぼそのまま使わせていただきました。手順は以下の通り:

まず Tampermonkey 拡張を Chrome Webストアからインストールします。
次にアドレスバー右端にある Tampermonkey アイコンをクリックし、「ダッシュボード」を選択します。

ダッシュボードの「+」アイコンをクリックして新規スクリプトの編集画面を表示、ユーザースクリプトを貼り付けます。

実際に使用したユーザースクリプトのソースは以下の通り:

notion-custom-css

// ==UserScript==
// @name         notion-custom-css
// @namespace    https://shukapin.com/
// @version      0.1
// @description NotionにカスタムCSSを適用させるスクリプト
// @author       Shukapin
// @match      https://www.notion.so/*
// @grant        GM_addStyle
// ==/UserScript==

'use strict';
(function() {
    // 「ヘッダ1」のスタイル
    GM_addStyle('.notion-header-block { padding: 0.25em 0.5em; color: #494949; background: transparent; border-left: solid 5px #7db4e6; }');

    // 「ヘッダ2」のスタイル
    GM_addStyle('.notion-sub_header-block { border-bottom: solid 3px #A0A0A0; }');

    // 「ヘッダ3」のスタイル
    GM_addStyle('.notion-sub_sub_header-block { color: #00CC00; }');
})();

Ctrl+S でユーザースクリプトを保存すると「インストール済み UserScript」に作成したスクリプトが表示されます。

Chrome の別タブなどで Notion のページ (https://notion.so/) を表示し、ユーザースクリプト内の CSS で指定したスタイルが Notion に適用されていることを確認します。

実際の画面サンプルは以下の通り:

Windows 側での同期設定

次にこのユーザースクリプトを Android 側と同期するための設定を行います。

Windows の Tampermonkey に登録したユーザースクリプトを Dropbox や Google Drive などのクラウドサービスを経由して Android の Tampermonkey と同期することで Windows と Android のブラウザ上の Notion で統一した見た目にすることができます。

この内容については Naohiko Watanabe さんが紹介している Android スマホで Chrome Extensions と UserJS を動かす の内容を参考にさせていただきました。

まずアドレスバー右端にある Tampermonkey アイコンをクリックし、「ダッシュボード」を選択します。

次にダッシュボードの設定タブをクリックし、全般 > 設定のモード で「上級者」を選択します。これにより「UserScript 同期」の項目が表示され有効化されます。

新たに表示されるようになった「UserScript 同期」で「UserScript 同期を有効にする」をチェックし、「種類」で任意のサービスを選択します(画像では Dropboxを選択)。ここで選択したサービスを経由して Android 側とユーザースクリプトを同期します。

「今すぐ実行」をクリックすると Tampermonkey に登録済みのユーザースクリプトが指定したクラウドサービス上にアップロードされます。Dropbox の場合は アプリ > Tampermonkey > Sync 以下に配置されるようです。なお、初回実行時にクラウドサービスへのログインが求められます。

Android 側での同期設定

Android 側ではあらかじめ Google ストアから Edge をインストールして Tampermonkey 拡張をインストールしておきます。具体的な手順については省略します。

次に Edge を起動し、右下の横三本線をクリックします

メニューが表示されるので「拡張機能」をクリック

「Tampermonkey」をクリックします。

「ダッシュボード」をクリックします。

Tampermonkey で同期をとるための手順は Windows の場合とほぼ同じです。
ダッシュボードが表示されたら、「設定」タブをクリックし、全般 > 設定のモード で「上級者」を選択します。これにより「UserScript 同期」の項目が表示され有効化されます。

「UserScript 同期」で「UserScript 同期を有効にする」をチェックし、「種類」で Windows 側と同じサービスを選択します(画像では Dropboxを選択)。

「今すぐ実行」をクリックすると指定したクラウドサービス上に同期済みのユーザースクリプトがダウンロードされます。こちらも初回のみクラウドサービスへのログインが必要となります。

画面最上部のタブで「インストール済み UserScript」に Windows 側で同期したユーザースクリプトが表示さることを確認します。なお表示されない場合は一旦 Edge を再起動すると表示されるようです。

Edge の別タブなどで Notion のページ (https://notion.so/) を表示し、ユーザースクリプト内の CSS で指定したスタイルが Notion に適用されていることを確認します。

以上で Windows の Chrome と同様の見た目で Android の Edge でも Notion のページを表示することができるようになりました。先人の知恵と努力に感謝いたします。

注意点・制限事項

• 公式でサポートされている方法ではないため、環境や CSS の設定内容によっては正常にページが表示されない場合があります。
• 将来的な Notion のアップデートにより本ページで説明している内容が動作しなくなる可能性があります。

参考文献

• しゅかぴん Notionの見た目を自分好みにカスタマイズする方法（オリジナルCSSを適用）
• Naohiko Watanabe Android スマホで Chrome Extensions と UserJS を動かす