アウトライナーで遊ぼう 物書き生活と道具箱

WorkFlowyのスタイルを「matFlow.dark」に変更

WorkFlowyのメインのスタイル(※)を変更しました。新しく使い始めたのは「matFlow.dark」です。
※stylishのテーマのことです。

こんな感じになります。

screenshot

ちなみに、テーマを外すとこう。

screenshot

まったく別ツールですね。

特徴

このテーマの面白いところは、どこかのトピックにZoom inすると、

screenshot

このように見出しがヘッダーっぽくスタイルされているところです。なんかちょっとかっこいいですよね。

screenshot

あと、トピックを閉じたものと比較してもらうとわかりますが、開いているとダッシュ線のボーダーが出てきて、閉じているとそれが消えます。なかなか興味深い仕様です。

もう一つ、見出しにあたるトピックのノートは、背景色が変わります。

screenshot

そのノートがどこに従属しているのかが、視覚的にずいぶんわかりやすくなりますね。なんとなくですが、ちょっとカードをイメージしました。

カスタマイズ

ちなみに、使う上で、少しばかりスタイルに手を入れています。

一つは、Zoom inしていない状態のノートも背景色を変えるようにしたこと。少しだけ薄めの灰色になっています。ノートをあまり使わない人は気にならないでしょうが、案外「これはノートなのかどうか」というのが通常のスタイルだとわかりにくかったりするんですよね。背景色を変えておけばばっちりです。

screenshot

あと、「matFlow.dark」のノーマル状態では、ノートの改行が改行として表示されず常に詰められてしまうので、それを改行表示アリに変えておきました。

.noted > .notes > .content {
height: auto !important;
min-height: 20px !important;
overflow: visible !important;
line-height: 20px !important;
display: block !important;
-webkit-box-orient: inherit !important;
-webkit-line-clamp: inherit !important;
white-space: pre !important;
}

の、「white-space: pre !important;」がその指定です。元に戻したければ、preを「inherit」にすればOK。

さいごに

これまで私は「エディタの背景色と言えばベージュでしょ」と、黒系の背景色は使ったことがなかったんですが、なかなか良い感じです。目に優しいとかではなく、心のモードが切り替わる効果があり……そうな気がします。それは言うならば、俺は今アウトライナーを使っているんだぞ、というような気持ちのスイッチが入るといった感じです。

というわけで、しばらくこのスタイルでいくことにしました。細かいカスタマイズがあれば、また書いてみます。

▼その他リンク:
R-style » 『Stylish』でWorkflowyの見た目をカスタマイズした
WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ!

1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です