🎨

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

2022/04/11に公開約2,700字

こんにちは。株式会社ペライチWraptas 担当の  @nabettu です。

私は普段 Wraptas という 「Notion をヘッドレス CMS にして Web サイトを制作できる NoCode サービス」 を開発・運営しています。

https://wraptas.com/

みなさん Notion は使っていますでしょうか。 Notion は Evernote のようなドキュメント管理にデータベース機能を追加したワークスペースサービスです。

https://www.notion.so/

私はサービス開発での利用に加えて、日ごろ Notion でドキュメントや ToDo などを管理しています。そこで個人でもチームでも Notion を使っている方でこんなことはないでしょうか。

ということで、今回は Chrome 拡張を利用して、 画像のようにヘッダーとサイドバーのカラーを変えて ”今どのチームで作業をしているか” をわかりやすくする方法を書いていきます。

ヘッダーカラーを設定したNotion

※Chrome 拡張を利用するので、アプリ版を利用されている場合には適用できません。

下準備:チーム ID の設定

Notion のエディタ画面の URL は下記のような形式になっています。

https://www.notion.so/peraichi/59ac9ac53c0d46aea33cf3a08dd5f4e0

この peraichi の部分はチーム ID となっており、初期は設定されていないためチームの判定のために追加します。すでにされている方は不要です。

サイドバー > 設定 > 設定 から、ワークスペース名の設定をしてください。

Notionのワークスペース名設定

準備が終わりましたら、カラー変更の手順に進みます。

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

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

こちらの Chrome 拡張を利用します。Firefox などでも同じ物がありますが、今回は Chrome 版で解説をします。

こちらをインストールすると Chrome の右上で同じアイコンが表示されますので、クリックし、表示されるポップアップから「管理」を押して設定画面に移行します。

そして「新スタイルを追加」をクリックします。

ステップ1

ここで挿入する CSS を記述します。

ステップ2

  1. サイドバー(notion-sidebar)とヘッダー(notion-topbar)のクラスを指定してそれぞれカラーを当てます。

チームごとのわかりやすい色に設定しましょう、またサイドバーのカラーが不要な場合には 1 行目を削除してください。

.notion-sidebar,
.notion-topbar {
  background-color: #fff9d2;
}
  1. 「次で始まる URL」を選択します。
  2. ここで、Notion の編集画面の URL からページ ID を抜いたものを記述します。

https://www.notion.so/peraichi/59ac9ac53c0d46aea33cf3a08dd5f4e0
の場合には
https://www.notion.so/peraichi/
だけを書きます。

  1. 上部の名前を入力して「保存」して、Notion 画面に戻ってページをリロードしてカラーが反映されたら完了です。
  2. Stylus の編集画面で「管理画面に戻る」を押して、これをチームごとに設定します。

それぞれのチームカラーで設定できましたでしょうか。

ヘッダーカラーを設定したNotion

これで無事にチーム違いのミスは防ぎやすくなりましたね 🥳 みなさんハッピーな Notion Life をお過ごしください。

宣伝

ということで普段から Notion をお使いのみなさま、ぜひ Notion をそのまま Web サイトにできる Wraptas をお試しいただけるとうれしいです。

https://wraptas.com/

採用情報

そして記事を読んでいただいたみなさん NoCode サービスを作ってみる側に興味はないでしょうか。

現在ペライチではエンジニアやデザイナー、PdM を募集しています。カジュアル面談からで結構ですので、興味がありましたらよろしくお願いします!
※Wraptas ではなくペライチの採用枠となります。

▼ 選考をご希望の方はこちら(募集職種一覧)

https://hrmos.co/pages/peraichi/jobs?&utm_source=techblog&utm_medium=referral&utm_campaign=article-01g02114pvpsaf7ghcch7jskdq

▼ まずはカジュアル面談をご希望の方はこちら

https://hrmos.co/pages/peraichi/jobs/0000029?utm_source=techblog&utm_medium=referral&utm_campaign=article-01g02114pvpsaf7ghcch7jskdq

募集中の職種についてご興味がある方は、お気軽にお申し込みください(エンジニアの場合 CTO がお会いします)

Discussion

ログインするとコメントできます