page icon

チームごとにNotionのヘッダーカラーを変えて入力ミスを防ぐ

作成日
2022/04/11
オススメ度
👍👍👍
ひと言メモ
Notionのページカラーをチーム毎に変更できる!!

こんにちは。株式会社ペライチWraptas 担当の @nabettu です。
私は普段 Wraptas という 「Notion をヘッドレス CMS にして Web サイトを制作できる NoCode サービス」 を開発・運営しています。
みなさん Notion は使っていますでしょうか。 Notion は Evernote のようなドキュメント管理にデータベース機能を追加したワークスペースサービスです。
私はサービス開発での利用に加えて、日ごろ Notion でドキュメントや ToDo などを管理しています。そこで個人でもチームでも Notion を使っている方でこんなことはないでしょうか。
ということで、今回は Chrome 拡張を利用して、 画像のようにヘッダーとサイドバーのカラーを変えて ”今どのチームで作業をしているか” をわかりやすくする方法を書いていきます。
※Chrome 拡張を利用するので、アプリ版を利用されている場合には適用できません。

下準備:チーム ID の設定

Notion のエディタ画面の URL は下記のような形式になっています。
https://www.notion.so/peraichi/59ac9ac53c0d46aea33cf3a08dd5f4e0
この peraichi の部分はチーム ID となっており、初期は設定されていないためチームの判定のために追加します。すでにされている方は不要です。
サイドバー > 設定 > 設定 から、ワークスペース名の設定をしてください。
準備が終わりましたら、カラー変更の手順に進みます。

任意のサイトに CSS を挿入できる Stylus をインストールして CSS を追加

こちらの Chrome 拡張を利用します。Firefox などでも同じ物がありますが、今回は Chrome 版で解説をします。
こちらをインストールすると Chrome の右上で同じアイコンが表示されますので、クリックし、表示されるポップアップから「管理」を押して設定画面に移行します。
そして「新スタイルを追加」をクリックします。
ここで挿入する CSS を記述します。
  1. サイドバー(notion-sidebar)とヘッダー(notion-topbar)のクラスを指定してそれぞれカラーを当てます。
チームごとのわかりやすい色に設定しましょう、またサイドバーのカラーが不要な場合には 1 行目を削除してください。
Plain Text
  1. 「次で始まる URL」を選択します。
  1. ここで、Notion の編集画面の URL からページ ID を抜いたものを記述します。
https://www.notion.so/peraichi/59ac9ac53c0d46aea33cf3a08dd5f4e0 の場合にはhttps://www.notion.so/peraichi/ だけを書きます。
  1. 上部の名前を入力して「保存」して、Notion 画面に戻ってページをリロードしてカラーが反映されたら完了です。
  1. Stylus の編集画面で「管理画面に戻る」を押して、これをチームごとに設定します。
それぞれのチームカラーで設定できましたでしょうか。
これで無事にチーム違いのミスは防ぎやすくなりましたね 🥳 みなさんハッピーな Notion Life をお過ごしください。
ということで普段から Notion をお使いのみなさま、ぜひ Notion をそのまま Web サイトにできる Wraptas をお試しいただけるとうれしいです。

採用情報

そして記事を読んでいただいたみなさん NoCode サービスを作ってみる側に興味はないでしょうか。
現在ペライチではエンジニアやデザイナー、PdM を募集しています。カジュアル面談からで結構ですので、興味がありましたらよろしくお願いします! ※Wraptas ではなくペライチの採用枠となります。
▼ 選考をご希望の方はこちら(募集職種一覧)
▼ まずはカジュアル面談をご希望の方はこちら
募集中の職種についてご興味がある方は、お気軽にお申し込みください(エンジニアの場合 CTO がお会いします)