WorkFlowyで遊ぼう 知的生産の現場

『Stylish』でWorkflowyの見た目をカスタマイズした

あ〜、なるほどね〜、ぐらいに思いました。最初は。

Chrome拡張『Stylish』でWEBアプリを自分のモノにする（mmkns）

『Stylish』はFirefoxやOperaにもある人気の拡張機能で、これを使えば「ユーザースタイルを管理するツールで、ウェブのスタイルを変更」(公式より)できます。

（中略）

Stylishの存在は以前から知ってましたが、別にデフォルトでいいじゃんと思って使ってなかったんですよね。

私も、「デフォルトのスタイルで困ってないし、別に使わなくてもいいかな」と思いましたよ。でも、Firefoxにもあることだし、とりあえず試してみようか、と思ったわけです。とりあえずMind。

で、以前からUIが使用感に与える影響について検討していたつもりでしたが、これがまあ全然わかっていなかったですね。

違うツール

簡単に言うと、こういうのが、

screenshot

こうなります。

screenshot

別物、と言って差し支えないでしょう。

もちろん、アウトライナー的機能という点でみれば同じツールです。機能原理主義者にしてみれば何も変わっていないに等しいでしょう。でも、一日に長い時間触れるツールであるならば、見た目の要素ってかなり大きいです。はい。

施した変更点

ちなみに、『Stylish』はCSSをブラウザ側で上書きするという感じなのですが、一から自分でCSSを書く必要はありません。

「このサイト用のスタイルを探す」で、誰かが書いたCSSを拝借することができます。Workflowyにもいくつかありました。

さらに、そのCSSを書き換えることもできるので、カスタマイズも容易です。

※ブラウザから直接CSSを書き換えられます。
screenshot

私は「workflowy.com – clean and bright」をベースにカスタマイズしてみました。手を加えた箇所は

  • 背景色をベージュに
  • ページの上・左マージンを詰める
  • トップの見出し項目を太字に
  • フォントを変更
  • フォントサイズを小さく

あたりです。

一応CSSもちらりと。

背景色をベージュに

.page {
background: #FFFEEC !important;
}

ページの上・左マージンを詰める

.page {
margin:0 !important;
padding:10px 150px 20px;
width:100%;
max-width:100%;
box-sizing:border-box
}

トップの見出し項目を太字に

div.project.selected > div.children > div > div.name div.content {
font-weight: bold !important;
}

フォントを変更

#documentView {
font-family: Sana, Calibri, Trebuchet, Verdana, sans-serif;
}

フォントサイズを小さく

.selected .project > .name > .content, .nameEditor > textarea {
font-size: 13px !important;
color: #191919 !important;
font-weight: normal !important;
}

さいごに

CSSの小難しいことがわからなくても、とりあえず何かスタイルをあててみて、そのコードをちょこちょこ書き換えてWorkflowyでどう表示が変わるのかを確認していくと、何と何が対応しているのかぐらいは推測がつくかと思います。

一応書いておくと、pxと書いてあるものは何かの大きさ。#191919 のように、#の次に0〜9、あるいはa~fまでの文字が６つ（ないし３つ）続いているのは何かの色です。rgba()も色。あとは、それぞれの文をそのままググれば、だいたいわかると思います。

ただ、あまりデザインに凝り出すと時間が無限回廊に吸い込まれてしまうので注意してください。

では、Let’s make your List!

→関連する記事：Workflowyでnoteを全文表示にしてみた