前の記事
Notionのマインドマップを見やすくする方法
こんにちは、チャベスと言います。
先日、Notion で マインドマップが使えるようになり、非常に嬉しかったので以下の記事で使い方を解説してみました。
ただ一点、不満ポイントがありました。
「一個目のアイテムが背景色とかぶって見づらい」。
以下のマインドマップの「アイテム１」が「メインテーマ」とつながっているように見えません。これは、アイテム１の色と、Notion のコードブロックの背景色の色が近いためです。
ということで、Chrome の拡張機能である「Stylus」を使って、マインドマップの背景色を変更して見やすくしてみました。
Stylus の使い方
Stylus は特定のページに自由に CSS を追加できるChrome 拡張機能です。Stylus の基本的な使い方については以下の note に書いているので、参考にしてみてください。
Stylus の設定方法
Stylus の設定画面で以下のコードを貼り付けて保存します。
svg[aria-roledescription="mindmap"] {
background-color: #ffffff;
}
以上で設定は完了です。
上記の設定はマインドマップにのみ適応されるので、以下のようにマインドマップ以外のグラフや図には適応されません。
ライトモードの場合。
ダークモードの場合
（2023/5/4 追記）マーメイドのデフォルトカラー変更
hkob さんがツイートでマーメイドの色の変更方法をツイートされていました。この方法を使えば、今回の記事の内容は不要です！笑
ライトモード
ダークモード
詳しい設定方法は以下のページで参照できます。
おわりに
今回は Stylus を使ってマインドマップの背景色を変更する方法を解説しました。もしやり方がわからない、別の設定をしたいなどあれば、お気軽に Twitter（@Chabesu）などでご連絡ください！
💡
初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営中。Notion コミュニティとしては国内最大規模で、会員数は現在200名以上となっております。
- 分からないことは24時間チャットツールでいつでも質問できる
- コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
- 1から学べる Notion 学習ロードマップで初心者からでも学習可能
- Notion 大学限定の学習動画が100本以上
- 定期的に開催している有料セミナーへの無料参加券
- 過去の有料記事・有料テンプレートが全て閲覧可能
コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。