2016/01/05
■WorkFlowyスタイルカスタマイズ全解説
備忘録として。
はじめに
WorkFlowyはアウトライナーであり、書いたトピックを移動することが出来ます。行を長押ししドラッグする。アプリ版はこれでいいのですが、Web版だと変なスクロールが起こる不具合があります。そのため去...
WorkFlowyのデフォルトはモノクロを基調にしたシンプルなものです。まあ、Webアプリだからそういうものだ、と諦めてませんか。実はjavascriptやStylishを使うことでデザインのカスタマイズができます。CSSを組み合わせるだけで、お好みのコーディネートが作れる。MarkFlowyにも組み込んでいるけど、すぐ忘れそうなので解説してみます。
スタイル
MarkFlowyのデフォルトは下記のようになっています。
#header{background:#000;}
ヘッダーの背景色を黒にしています。#000じゃなくてblackでもよかった。
#documentView{background:#000;}
ページの背景色を黒にしています。#000じゃなくて(以下同文)。
.bullet{background-image:none;}
ブレットのドットを消しています。
.bullet,#bulletBucket .bulletBucketBullet{background-color:darkred;border-radius:3px;}
ブレットの背景色を濃赤にしています。やや、やりすぎ。
.page{color:black;background:white;border-radius:5px;}
トピックの文字色を黒に、背景色を白にしています。
.contentTag{color:orange !important;}
タグの文字色をオレンジ色にしています。
.contentUnderline{border-bottom: 2px #00f solid;text-decoration:none;}
アンダーラインを青にしています。#00fはRGBなのでblueと同じ。
.contentBold{border-bottom:2px #f00 solid;}
ボールドに赤色の下線を付けています。#f00はredのこと。
.contentItalic{background-color:#bf9;text-style:normal;}
イタリックの背景色を緑にしています。
.project.selected >.children>div>.name .content{font-weight: bold !important;}
小見出しトピックを太字にしています。
.notes>.content{color:blue !important;}
ノートの文字色を青にしています。
.parent>.name>.content{color:darkred;}
パン屑リストの文字色を赤にしています。
.highlighted>.highlight{background:white;}
ズーム動作中の背景色を白にしています。
.moving>.highlight{background:gray;}
トピック移動の背景色を灰色にしています。
「!important」を入れたCSSもあるけれど、読み込み順を考えると、付けなくてもいいかも知れない。今ひとつ、スタイルの指定は分かってないよなあ。勉強しなきゃ。
まとめ
それぞれのcolorやbackgroundを書き換えると、見た目も変わります。たとえばこんな感じ。ヘッダーをダークブルーに、背景をアイボリー。そしてMarkFlowyを走らせると、カジュアルな雰囲気が出てきました。配色をカスタマイズすると、WorkFlowyと向き合う気持ちも変わります。愛着が湧くというか、可愛く思えてきて、ますます手放せなくなる。
MarkFlowy(Shiori経由でインストール)：http://tinyurl.com/zng552w