Notionのタイムラインビューやカレンダービューの土日に色をつける方法

最終更新日 2024-09-01

チャベス

こんにちは、チャベス↗︎と言います。

今回は、以下のようにタイムラインビューやカレンダービューで土日に色をつける方法を解説します。（ブラウザ版 Notion のみ対応の方法となります。アプリ版 Notion では変更できませんので、ご留意ください）

下記の動画でも使い方を解説しています。

この記事でわかること

Notion のタイムラインビューで土日に色をつける方法
Notion のカレンダービューで土日に色をつける方法

タイムラインビュー：拡張機能の Stylus を使う

タイムラインビューで土日に色をつけるには、Chrome 拡張機能の「Stylus」を使います。

STEP1. Chrome 拡張機能「Stylus」を追加

以下 Chrome ウェブストアの「Stylus」ページを開きます。

「Chrome に追加」をクリックします。

「拡張機能を追加」をクリックします。

「Stylus」がChromeに追加されましたとポップアップが表示されたら、右上「×」ボタンをクリックし、閉じます。

STEP2. Stylus で設定

ブラウザ上部のメニューバーより「拡張機能」をクリックし、「Stylus」を選択します。

Stylusの設定画面が開きます。「管理」をクリックします。

左側メニューより「スタイルを新規作成」をクリックします。

スタイルの設定画面が開きます。左上のスタイル名を任意で入力します。（ここでは “Notion のタイムラインビューで土日に色付け”としました）

以下に記載したコードをコピーし、Stylus 設定画面右側のコード欄に貼り付けます。

▼ タイムラインビューで土日に色をつけるコード

.notion-timeline-view > .notion-selectable.notion-collection_view_page-block > div:first-child div,
.notion-timeline-view > .notion-selectable.notion-collection_view-block > div:first-child div {
  background: linear-gradient(90deg, #EBF3FE 0%, #EBF3FE 50%, #FFEBE9 50%, #FFEBE9 100%)!important;
  display: flex;
  justify-content: center;
  align-items: center;
}

「保存」をクリックします。