[Notion] タイムラインビューの土日に色を付ける方法
Summary
TLDRこの動画では、ノーションのタイムラインビューに土日部分に色をつける方法が解説されています。スタイリッシュでおしゃれな見た目は魅力的ですが、休みの日が分かりづらいという問題もあります。そこで、Chrome拡張機能「Stylus」を使ってCSSを上書きし、土日を分かりやすく色分けする方法を紹介しています。この方法を使えば、プロジェクトの進捗管理がスムーズになります。また、ノーションのカスタマイズが可能になるため、自分好みのスタイルでページを整えることができます。ノーションに関する情報に特化したチャンネルで、フリーランス法人向けのサポートも提供しています。
Takeaways
- 😀 ノードのタイムラインビューに土日部分に色をつけることで、プロジェクトの進捗をより視覚的に把握できます。
- 🖌️ ノードのタイムラインビューはデフォルトでは土日がグレーで表示され、見づらいと感じる人もいるようです。
- 🛠️ Google Chromeの拡張機能であるStylusを使って、ノードのタイムラインビューのデザインをカスタマイズできます。
- 💻 手順は、まずStylusをChromeに追加し、ノードのタイムラインビューに適用するCSSを書くことです。
- 🎨 CSSを用いて、土日の色を変更し、タイムラインビューを個人の好みやニーズに合わせて調整できます。
- 🔍 スクリプトでは、具体的にどのようにCSSを書くか、そしてそれをノードに適用する方法も解説されています。
- 🔗 記事やリンクが提供されており、そこでは手入力よりもはるかに簡単にソースコードをコピー&ペーストできるとのことです。
- 🌐 スクリプトでは、他のブラウザでも同様のカスタマイズが可能であることが触れられています。
- 🔧 スタイラスの設定を調整することで、CSSの適用範囲を特定のページだけに限定したり、全ページに反映させたりもできます。
- 📚 ノードのブラウザ版とデスクトップ版の比較がされ、ブラウザ版の利便性が強調されています。
- 🗂️ ノードカレンダーなど、他の機能に対するChrome拡張機能の開発も進められているとの情報を提供されています。
Q & A
ノーションのタイムラインビューに土日を色付けする方法はありますか?
-はい、スタイラスというChrome拡張機能を使ってノーションのタイムラインビューに土日を色付けすることができます。
スタイラスとは何ですか?
-スタイラスはGoogle Chromeの拡張機能で、特定の要素にCSSを上書きしてカスタマイズできるツールです。
スタイラスをChromeに追加するにはどうすればいいですか?
-Googleで「スタイラス」と検索し、1番上に出てくるリンクをクリックしてChromeに追加するように指示に従ってください。
スタイラスを使ってノーションをカスタマイズするにはどうすればいいですか?
-スタイラスをChromeに追加した後、ノーションの右上にある拡張機能アイコンをクリックし、新しいスタイルをユーザーCSSとして新規作成します。
ノーションのタイムラインビューに色をつけるCSSコードはどのように書きますか?
-CSSコードは、ノーションのセレクタに対して背景色を設定するようなコードを記述します。具体的には、背景グラデーションを指定するコードを書きます。
スタイラスで設定したCSSはページごとに適用されますか?
-デフォルトでは特定のページにのみ適用されますが、スタイラスの設定を調整することで全ページに反映させることができます。
ノーションのタイムラインビューに色をつける方法は他にもありますか?
-この動画ではスタイラスを使った方法が紹介されていますが、他の方法も存在する可能性があります。
スタイラスを使ってのカスタマイズはノーションの他の部分にも適用できますか?
-はい、スタイラスを使ってノーション内の好きな部分を自分のスタイルにカスタマイズできます。
ノーションのブラウザ版とデスクトップ版、どちらがいいのですか?
-ブラウザ版がおすすめです。ブックマーク機能との相性が良いと同時に、Chrome拡張機能などを使ってカスタマイズもしやすいです。
ノーションに関する情報やサポートはどこで見つけることができますか?
-この動画の説明欄にリンクがございますので、そこでノーションに関する情報やサポートを受けることができます。
Outlines
🎨 ノーションタイムラインの土日色付け方法
この段落では、ノーションのタイムラインビューに土日部分に色を付ける方法が紹介されています。ノーションアンバサダーであるツブレさんが、スタイリッシュでおしゃれなタイムラインビューをさらに見やすくするためのテクニックを解説します。休日を視認しやすいように色分けすることで、プロジェクトの進捗管理をミスなく進めることができます。また、この方法は企業とのスケジュール調整にも役立つとのことです。
🖥️ Google Chrome拡張機能スタイラスを使用したカスタマイズ
第二段落では、Google Chromeの拡張機能であるスタイラスを使ってノーションのタイムラインビューをカスタマイズする方法が説明されています。スタイラスを利用してCSSを上書きし、土日部分に色をつけることができます。具体的には、スタイラスをChromeに追加し、ユーザーCSSを新規作成して特定のコードを記述する手順が紹介されています。この方法で、自分の好みに合わせてノーションをカスタマイズすることが可能となります。
🛠️ CSSの適用範囲とブラウザの選択
最後の段落では、CSSの適用範囲を特定のページだけでなく全ページに反映させる方法が説明されています。また、ノーションのブラウザ版とデスクトップアプリ版の比較が行われており、ブラウザ版の方がChrome拡張機能との相性が良いこと、カスタマイズのしやすさなどから推奨されています。最後に、質問コーナーとしてブラウザ版とデスクトップ版のどちらがいいかという問いに対して、ブラウザ版を強くお勧めする意見が述べられています。
Mindmap
Keywords
💡ノーション
💡タイムラインビュー
💡スタイリッシュ
💡休日
💡ガントチャート
💡CSS
💡スタイラス
💡カスタマイズ
💡プロジェクト
💡ガントチャートのテンプレート
Highlights
ノーションのタイムラインビューに土日部分に色をつける方法を解説
タイムラインビューはスタイリッシュでおしゃれだが、休みの日が分かりづらい
Exelのガントチャートのようにセルに色をつけることができないため、スケジュールが分かりにくくなることがある
紹介する方法は実際に企業さんと一緒にスケジュールを建てる時に重宝している
この方法をマスターすることでノーション内の好きな部分をカスタマイズできる
ノーションに関する情報に特化したチャンネルでの情報発信
フリーランス法人向けのノーションサポートの提供開始
タイムラインビューの作り方とスラッシュコマンドからの操作
レイアウトの設定でテーブルを表示して追従するようにすることができる
土日が薄いグレーになっているため見づらい見た目になる問題
Google Chrome向けの解説でスタイラスという拡張機能を使用
スタイラスを用いてCSSを上書きしてタイムラインビューの見た目を変更
CSSの適用範囲を指定して全ページに反映させる方法
スタイラスの設定でCSSを書くことでタイムラインビューの土日部分に色をつける
手入力が大変なので記事にソースコードを貼っておく予定
ブラウザ版とデスクトップ版の比較でブラウザ版を圧倒的におすすめ
Chrome拡張機能の開発を進めているとのこと
フロートストックという本の紹介と読書の提案
Transcripts
ノーションのタイムラインビューに色を
つける方法を解説します皆さんこんにちは
ノーションアンバサダーのツブレです本日
も動画を見ていただきありがとうござい
ます今日の動画ではノシのタイムライン
ビューの土日部分に色をつつける方法に
ついて解説していきますノーションの
タイムラインビュースタイリッシュで
めちゃめちゃおしゃれなんですけどパっと
見で若干休みの日が分かりづらいんですよ
ねExelのガントチャートとかだと自分
でセルに色をつつけることができたりする
んですけどノーションだとこれができない
ので少し分かりにくかったりします土日を
考慮せずにスケジュールを立ててしまって
プロジェクトが計画通り進まなかった
みたいなことは避けたいですよねでもご
安心ください今回の動画ではノーションの
タイムラインビューの土日に色をつつける
方法を解説していきますこの方法は実際に
僕のノーションページでも使っていて企業
さんと一緒にスケジュールを建てる時
なんかにも重宝しています今回紹介する
方法をマスターいただくことで土日に色を
つつけるだけではなくノーション内の好き
な部分を自分の好きなようにカスタマイズ
できるようになります是非最後までご覧
いただければと思いますこのチャンネルで
はノーションに関する情報に特化して発信
を行っていますノーションに詳しくなり
たい最新のノーション情報アップしたいと
いう方は是非チャンネル登録をお願いし
ますフリーランス法人向けのノーション
サポートを開始しましたノーションに
関するご相談や構築代行研修のご依頼受け
たっております概要欄のリンクからお
問い合わせくださいそれでは本編の方行っ
てみ
ましょうそれでは実際に画面を映しながら
解説していきたいと思いますまずノシの
タイムラインビューの作り方なんですけど
スラッシュコマンドからタイムライン
みたいに入力するとタイムラインビューを
作ることができますえ新規タイムライン
選択するとこのような画面になります右上
のメニューのところで左右の余白を縮小し
ておきましょうこのよにすると横に長い
タイムラインビューが表示されます僕が
いつもやってる設定でレイアウトのところ
からここの部分のテーブルを表示という
ところをオンにしていますそうするとこの
左側にテーブルが表示されてこれがずっと
追従するような形にできますで見てもらっ
て分かる通り土日ここの部分表示されては
いるんですけど薄いグレーになっていて
若干見づらい見た目になっています
スタイリッシュでおしゃれなんですけど見
やすさっていう意味だとちょっと土日を
見落としてスケジュールをでしまうみたい
な危険性があるかなと思っていますちなみ
に僕が公開しているガントチャートの
テンプレートだと実際にデータを入れると
こんな感じの見ためになりますこうやって
データがたくさん入ってくるとちょっと
イメージが湧いてくるかなと思いますで
今回の動画ではこのグレーになってる部分
に土曜日と日曜日が分かりやすくなるよう
に色をつけていきたいと思いますまず
GoogleChromeを使ってる方
向けの解説をしていければと思うんです
けどGoogleの検索でスタイラスと
いう風に検索してみてくださいスペルは
STYLUSにになります検索して1番上
に出てくるやつこれをクリックして
いただくとChromeの拡張機能で
スタイラスというのが出てきますこれを
GoogleChromeに追加するので
ここの部分Chromeに追加という
ボタンを押してください拡張機能を追加し
ますこのようにスタイラスがChrome
に追加されましたという風に表示されたら
成功ですここまでできたらノーションの方
に戻っていただいてこの右上のところに
拡張機能のアイコンがあるのでここ
クリックしてくださいでスタイラスの部分
ここピンのアイコンがあるのでこれ
クリックしておくと常に表示させることが
できますで表示させたスタイラスクリック
していただくと最初の状態だと該当する
スタイルはありませんっていう風に出て
くるんですけれどもえここの次のスタイル
を書くというところをクリックして
くださいでここの部分スタイルをユーザー
CSSとして新規作成というところ
クリックすると画面が変わってちょっと
エンジニア向けの難しい画面なんですけど
怖がる必要はなくてここの部分ここに行動
挿入というところに今から一緒に行動を
書いていきますそしたらここに行動挿入と
いうとにコドを書いていきます一旦手書き
で頑張ってみますねノーションタイム
ラインビューダイナ記号ノーション
セレクタノーション
コレクションアンダーバービーブロック
ダイナリー記号デブコロンファースト
チャイルド角スペースデブでかこを入れて
バックグラウンド
コロンリニアグラディエント
90デグカマ#EBF3FEスペース0%
カンマ#ebf3FE50%カマ#ffe
BE
peq5050%ハマ#ffepeq
100%で最後インポータントをつけて
おきますこれで保存ボタンをクリックして
みてくださいでノーションのページ戻って
やるとあ無事うまくいってますねタイム
ラインビューにえ土曜日と日曜日に
それぞれ色がついているのが分かるかと
思います軽くだけ解説しておくとこの
スタイラスというChrome拡張機能は
このノシの特定の要素にCSSを上書き
できるというものになりますCSSって
いうのはここの部分の見た目の文字の大き
さとか余白感とかを定義するための
プログラミング言語ですちょっと専門的な
話になっちゃうんですけどこんな感じで
先ほど書いたソースコードがChrome
上に反映されているっていうのが分かるか
と思いますで今書いたソースコードは何
やってるかって言うとノーションのタイム
ラインビュー上の土曜日と日曜日部分に
先ほど指定したここの部分が色なんです
けど色をこんな感じでつけてくださいねっ
ていう命令をしています例えばこの色
コードの部分を全部こうブラックみたいな
感じで書き換えてやると能書のタイム
ラインビュー上でここの部分が真っ黒に
変わったのが分かるかと思いますちょっと
黒だとあまりに見づらいので元のコードに
戻しておこうと思うんですがこのコードの
色をそのまま使えばこんな感じの淡い水色
と淡い赤になるようになっています先ほど
はここの部分手入力したんですけど結構
手入力大変かもしれないので概要欄に記事
貼っておこうと思うんですけどノーション
ラボっていう僕が運営しているメディアの
中でもこの内容紹介していてここの部分
ソースコードコピーしていただくとその
まま動くようになっています手入力
ちょっと大変だよという方はコピペシて
使ってみてくださいあと少し補足なんです
けど先ほどのスタイラスの設定でCSSを
書いたと思うんですけどこのCSSの適用
範囲っていうのを指定することができます
今テンプレートを表示しているこのページ
上では土日に水色と赤が付いてるんです
けれども他のページのタイムラインビュー
見てやるとこのように土日に色がついて
ない状態になっていますノーションの全
ページに先ほどのCSS適用させた方が
便利なのでちょっとスタイラスの設定を
いじってやります先ほどのスタイラスの
画面を開いてやってここの部分が次で
始まるURLっていう風になってるんです
けど特定のページでしかこのタイムビュー
の色付けが作動しないっていう風になっ
てるのでこの後半部分を消してやってM.
S
/mWBSカトチャートっていうページで
色が付いてるのとこちらの先ほど作った
空っぽのタイムラインビューこちらでも色
がついているっていうのが分かるかと思い
ますこうしておくと全ページに反映される
のでここの設定変更するようにしておき
ましょう僕は普段アーというブラウザの方
を使っているんですけどこちらの場合も
同様の設定で色をつつけることが可能です
既にこのブラウザには導入済みなんです
けれども手順は一緒でタラスと
Google検索いただいて出てきた1番
上のページをクリックしますで
Chromewebストアで出てきた
ページをここの部分もうすでに
インストール済みなのでボタンの表記が
違うんですけどChromeに導入して
くださいこのようにしたらノーション側の
ページを開いてやってちょっとこれ見た目
が違う方もいらっしゃるかもしれないん
ですけどインストールしたchrome
拡張機能はここら辺に一覧で表示されるの
でスタイラスのアイコンを見つけて
スタイラスをクリックしてやる先ほどと
同様次のスタイルを書くっていうとことろ
をクリックしてここの部分にCSSを書い
ていけば大丈夫です今回僕のアークの方に
はすでに設定されてるんですけどこの
ノーションタイムラインっていうところ
鉛筆アイコンクリックしてると先ほどと
同様のコードが書かれているっていうのが
分かるかと思いますちょっと先ほど説明し
なかったんですけどこの自分で書いた
CSSのスタイルはここの部分で名前を
つけて保存しておくことができるので
どんなコードを書いたかっていうところ
結構忘れがちだと思うのでノーション
タイムラインみたいな形で名前をつけて
保存しておくのがおすすめですこんな感じ
にしておくとここの部分のタイムラインて
いうところオンオフここで切り替えること
ができてオンにしておくと土日の色がつく
オフにすると色がつかないみたいな感じで
切り替えることできるようになりますご
自身でノーションの見た目カスタマイズし
たいという方是非このスタイラス使ってみ
てください皆様お疲れ様でした今回の動画
ではノーションのタイムラインビューで
土日に色をつつける方法について解説して
みました何かプロジェクトを進める際の
ガントチャートを作る時に便利な仕組みだ
と思うので是非皆さんも試してみて
くださいWBSガントチャートの動画は
こちらで詳しく解説していますもしよけれ
ば合わせてご覧ください今回の動画内でお
伝えしたソースコード部分はこちらの記事
の中でも紹介しています今回はCSSを
直接タイピングして打ち込んだんですけど
基地内のソースコードをコピペしてもらっ
ても大丈夫ですもしかしたら今後
ノーションの使用変更でこの動画で紹介し
てるソースコードが動かなくなる場合も
あるかと思いますその場合は記事の方は
最新のソースコードにメンテナンスして
おこうと思ってますのでうまく動かないと
いう方は記事の方チェックしていただけれ
ばと思いますこのチャンネルでは
ノーションに関する情報に特化して発信
行っていますノーションに詳しくなりたい
最新のノーション情報をキャッチアップし
たいという方は是非チャンネル登録
よろしくお願いします参考になったという
方は是非動画の高評価ボタンもお願いし
ますノーションが学べるオンライン
コミュニティノーション大学運営してい
ます分からないことはチャットツールで
いつでも質問ができるコミュニティ内の
限定勉強会に参加できる1から学べる
ノーション学習ロードマップでスキルを
磨けるアーカイブ動画学習教材が100本
以上定期的に開催している有料セミナーへ
の無料参加券などなど学習コンテンツと
特典盛沢さんとなっております概要欄に
YouTube限定のクーポン貼っておき
ますので気になる方は合わせてチェックし
てみてくださいまた法人様向けの
ノーションサポート受けたまっております
ノーションをこれから導入したい導入した
けどうまく運用できていないノーションの
研修をして欲しいという企業様概要欄の
リンクからお問わせくださいこれの質問
コーナーですコメント欄でいだいた皆さん
からのノーションに関する質問に回答して
いきます今回のご質問ノーションの
ブラウザ版とデスクトップ版ってどっちが
いいとかありますかというものですご質問
ありがとうございます結論から申し上げる
とブラウザ版の方が圧倒的におすすめです
理由は2つあるかなと思っていて1つ目が
ブラウザのブックマーク機能と相性がいい
ことですってよく使うページある程度限ら
れてるかなって思っていてノーションの中
にもお気に入り機能っていうのあるんです
けどそれってノーションのページを1回
開いてお気に入りから飛んでいくっていう
2ステップ必要になってきますなんです
けどブラウザのブックマーク機能でよく
使うページ登録しておけばブックマーク
部分から1発でそのページに飛ぶことが
できるので僕はそれを愛用して使ってい
ますでもう1つ2つ目の理由が今回紹介し
たようなChrome格調機能とかで
カスタマイズができることです
デスクトップアプリバのノーションだと
カスタマイズできないことはないんです
けどけど結構専門的な知識が必要になって
きて難しかったりしますプラザの拡張機能
使うと今回紹介したように土日に色を
つつけることができたりあとサイドバーが
こうひょこひょこ出てくる問題をロックし
たりみたいなことができたりします実は僕
も今Chrome拡張機能の開発進めてい
てノーションではなくてノーション
カレンダーの方なんですけどノーション
カレンダー上からタスクを開始することが
できたり完了することができたりみたいな
Chrome張機能作っています
ノーションカレンダーの方もデスクトップ
アプリ版じゃなくてブラウザ版で僕は使っ
ていてブラウザ版で使うことでそういった
拡張機能を入れることができるようになっ
たりしますちなみになんですけど動画内で
も紹介したっていうブラウザ僕は
めちゃめちゃ愛用していてお勧めです最近
Windows版も出たらしいのでまだ
使ったことないよという方は是非使ってみ
てくださいノーションと相性が抜群なのと
それ以外の機能もすごい充実してて非常に
使いやすいブラウザです無料で使えます
ちょっとすいません質問の趣旨とは脱線し
た内容になってしまったんですけれども
結論もう1度申し上げるとブラウザ版と
デスクトップアプリ版で言うとブラウザ版
の方が圧倒的におすすめという話でしたに
してみてくださいということで今回の動画
はここまでになります最後までご視聴
いただきありがとうございましたご質問と
あればコメント欄でいただければと思い
ますそれではまた次の動画でお会いし
ましょう潰れでした最近このフロート
ストックっていう本買ったんですけどこれ
めちゃめちゃいいですねこの作者さんの本
って大体いいんですよね具体と中小って
いう本もめちゃめちゃいいのでこの本と
合わせて読んでみてもらえるといいかなと
思います興味ある人はぜひ読んでみて
[音楽]
くださいさ
[音楽]
5.0 / 5 (0 votes)