こんにちは。株式会社ペライチ の 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 を記述します。
- サイドバー(notion-sidebar)とヘッダー(notion-topbar)のクラスを指定してそれぞれカラーを当てます。
チームごとのわかりやすい色に設定しましょう、またサイドバーのカラーが不要な場合には 1 行目を削除してください。
.notion-sidebar,
.notion-topbar {
background-color: #fff9d2;
}
- 「次で始まる URL」を選択します。
- ここで、Notion の編集画面の URL からページ ID を抜いたものを記述します。
https://www.notion.so/peraichi/59ac9ac53c0d46aea33cf3a08dd5f4e0
の場合には
https://www.notion.so/peraichi/
だけを書きます。
- 上部の名前を入力して「保存」して、Notion 画面に戻ってページをリロードしてカラーが反映されたら完了です。
- Stylus の編集画面で「管理画面に戻る」を押して、これをチームごとに設定します。
それぞれのチームカラーで設定できましたでしょうか。
これで無事にチーム違いのミスは防ぎやすくなりましたね 🥳 みなさんハッピーな Notion Life をお過ごしください。
宣伝
ということで普段から Notion をお使いのみなさま、ぜひ Notion をそのまま Web サイトにできる Wraptas をお試しいただけるとうれしいです。
採用情報
そして記事を読んでいただいたみなさん NoCode サービスを作ってみる側に興味はないでしょうか。
現在ペライチではエンジニアやデザイナー、PdM を募集しています。カジュアル面談からで結構ですので、興味がありましたらよろしくお願いします！
※Wraptas ではなくペライチの採用枠となります。
▼ 選考をご希望の方はこちら（募集職種一覧）
▼ まずはカジュアル面談をご希望の方はこちら
募集中の職種についてご興味がある方は、お気軽にお申し込みください（エンジニアの場合 CTO がお会いします）
Discussion