『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までの文字が6つ(ないし3つ)続いているのは何かの色です。rgba()も色。あとは、それぞれの文をそのままググれば、だいたいわかると思います。

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

では、Let’s make your List!

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

Related Posts with Thumbnails
Send to Kindle

6 Comments

Other Links to this Post

  1. 「WorkFlowy専用Firefox」の余白を、アドオン「Stylish」で調整する — 2015 年 2 月 11 日 @ 11:09 PM

  2. 「WorkFlowy専用Firefox」にローカルファイルリンク機能をつけて、WorkFlowyを知的生産のコックピットに(Window&Mac) — 2015 年 2 月 13 日 @ 7:06 PM

  3. 自分のWorkFlowyを育てる。「赤坂シナモンの地下迷宮」へと続く試行錯誤の中間報告。 — 2015 年 2 月 23 日 @ 9:02 PM

  4. ウェブ上に存在するWorkFlowyに関する日本語情報を時系列で淡々と整理する(2015年1月〜3月) — 2015 年 3 月 27 日 @ 6:16 PM

  5. WorkFlowy Proの説明 — 2015 年 6 月 16 日 @ 5:28 PM

  6. WorkFlowyをプレゼン資料として使ってみたことの報告(前編:初回の課題を解消するための試行錯誤) — 2015 年 7 月 17 日 @ 6:12 PM

RSS feed for comments on this post. TrackBack URI

Leave a comment

WordPress Themes