Stylish拡張でTodoistのラベルを強調してみた

タスク管理ツールのTodoistで表示されるラベルを強調する方法をご紹介します。
Todoistの詳細については公式サイトをご覧下さい。

To-Doリストとタスク管理。無料、簡単、オンラインとモバイル用: Todoist

はじめに

私のTodoist歴は約1年半になります。
それまでTODOリストは長続きしなかったのですが、Todoistは課金をして1年以上経過した初のサービスです。

長くなりますので、この話はまたの機会とさせていただきます。

経緯

Todoistを使った1日の管理方法

私はTodoistを使って1日のタスクを時間の流れに沿って設定します。

  • 開始~終了時間が決まっているものは、それらを記載
  • それ以外は見積もり工数を記載
  • 上記を元にタスクの順番をキメる

Todoistに設定すると以下の様になります。

見積もり工数はラベルに何通りかを登録しています。

なぜラベルの強調が必要か

ラベルって目立たなくないでしょうか?
また、ラベルが付いていることに気づかないことはないでしょうか?

例えば、以下の画像… 先ほどと何が変わったか分かりますか?

『お店の予約』というタスクに --待ち-- というラベルが付いています。
言われなければ分からないレベルだと思います。

同様にタスク一覧からタイムラインを把握しにくいという問題が起きました。
目立たないものを人間は無意識で無視するようになります。
つまり時間を気にしなくなり、タイムマネジメントができなくなります。

これらを防ぐため、何とかラベルだけを強調する方法を模索してみました。

Stylish拡張

Google Chrome拡張のStylishを使用して、今回の課題を解決します。
Stylishはサイトごとに独自のCSSを定義できる拡張です。

Stylish – ウェブサイト用カスタムテーマ

レビューは結構荒れていましたが、2017/03/16時点の拡張は個人的に満足いくものでした。
Stylishを使うと、先ほどのTodoist画面が以下の様になります。

いかがでしょう。
これなら工数や待ちラベルを意識し続けることができるのではないでしょうか。

やり方

簡単にやり方を説明します。

  1. Chrome拡張 stylishをインストール
  2. Todoistを開く
  3. Chromeナビゲーションバーの『S』マークをクリックし、『スタイルを作る』を選択
  4. 表示されるコードエディタに以下のCSSを貼り付け
  5. 名前を適当に決めて『保存』をクリック
a.label:not(.label_sep) {
    font-size: 75%;
    font-weight: bold;
    border-radius: 15px;
    padding: 1px 5px 1px 5px;
    border-style: outset;
    border-width: 1px;
    text-shadow: 5px 5px 3px rgba(0,0,0,0.2);
}

.sel_item_content div {
    float: left;
}

span.pname {
    width: 30px;
}

span.pname:hover {
    overflow: visible;
    width: auto;
}

.toggl-button {
    width: 0px;
    height: 19px;
    overflow: hidden;
}

あとはTodoistをリロードすればOKです。

補足

今回の設定では、タスクの名称が長くて2行に渡るとレイアウトが崩れます。
それを防ぐため、なるべくタスク名称が1行で済むような工夫をしています。

  • プロジェクト名は頭の半角4文字しか表示しない (hoverで全表示)
  • Togglボタン拡張をインストールしている場合、画像だけを表示する

実際の挙動は以下の様になります。

総括

Chrome拡張のStylishを使用して、Todoistのラベルを強調する方法を紹介しました。
ラベルが目立たなく悩んでいた方は是非試してみて下さい。

コメントを残す