アドオン「Stylish」による「推敲用WorkFlowy」(段差フラット&bullet非表示)
公開日:
:
WorkFlowy
目次
1.問題意識
私は、WorkFlowyを、「文章を書き上げるためのツール」として使っています。
「文章を書き上げるツール」が備えるべき機能のひとつは、「文章を推敲するための機能」です。「文章を書き上げる」ためには、「文章を推敲すること」が必要不可欠なので、「文章を推敲するための機能」が求められます。
「文章を推敲すること」は、「文章を読み返すこと」から始まります。自分がその文章を書いたことをいったん脇に置いて、はじめてその文章を読む読者であるかのように、まっさらな気持ちでその文章を丁寧に読み返すことが、「文章を推敲すること」の第一歩です。
そのため、「文章を書き上げるツール」は、「文章を読み返すための機能」を備えるとよいです。それも、書かれた文章そのものだけを手がかりにして読むための機能が望まれます。書かれた文章以外の手がかりを排除し、書かれた文章だけから、読み手がどんな意味を受け取ることができるかを、読み手の立場に立って体験するような読み方を助けてくれる機能。こんな機能は、推敲を助けてくれますので、「文章を書き上げるツール」にふさわしいと言えます。
ところで、この点から見ると、WorkFlowyは、小さくない問題を抱えています。
ひとつは、WorkFlowyのトピック階層構造です。トピック階層構造は、トピックとトピックの意味の関係を示しますので、WorkFlowyによって書かれた文章は、書かれた文章以外に、トピック階層構造という手がかりを持っています。そのため、WorkFlowyで書かれた文章を読み返しても、「書かれた文章そのものだけを手がかりに構築できた概念」なのか、「書かれた文章とトピック階層構造の両方を手がかりに構築できた概念」なのか、区別することが困難です。
また、各トピック行頭の「●」(bullet)です。この「●」があることによって、見た目は文章というよりむしろリストになります。また、カーソルが「●」の上を通ると、メニュー画面が出てきてしまい、邪魔です。
これらの問題を、何らかの方法で解消し、WorkFlowyによる「文章を読み返すこと」を促進する方法はないでしょうか。
2.解決の方向性=アドオン「Stylish」でカスタマイズ
(1) アドオン「Stylish」でできること
アドオン「Stylish」が、この問題を解決してくれます。
アドオン「Stylish」は、特定のウェブサイトのためのcssを設定することで、ウェブサイトの見た目をカスタマイズすることを可能にするものです。cssでカスタマイズできる部分なら、どのようにもカスタマイズ可能です。ページの基本構造レベルのレイアウトであっても、ページの片隅の細かい記載であっても、cssだけでカスタマイズできることなら何でも、好きなように調整・変更できます。
WorkFlowyとアドオン「Stylish」は、相性抜群です。WorkFlowyのレイアウトは、基本的に、cssで組み立てられているため、アドオン「Stylish」を使えば、WorkFlowyのレイアウトを、ページ構造のレベルから、細かい部分まで、自分の求めるままに、カスタマイズできるからです。
たとえば、WorkFlowyの下線・太字・斜体を、ハイライトにしたり、三色ボールペン方式にすることができます。
たとえば、特定のタグだけを、色やフォントを変えることができます。
たとえば、noteを全文表示にすることができます。
(2) アドオン「Stylish」で、段差をフラット&bulletを消去
さて、私がここで実現したいと考えているのは、
- WorkFlowyのトピック群が持っている階層構造を、フラットに表示すること
- トピック冒頭のbulletを消すこと
です。
これらは、WorkFlowyの機能と分かちがたく結びついてはいるものの、見た目の問題です。そして、WorkFlowyは、トピック群の階層構造の見た目も、bulletの見た目も、(HTMLのレベルではなく、)cssのレベルで、作っています。
であれば、アドオン「Stylish」でcssをいじりさえすれば、トピック群の階層構造をフラットにすることも、bulletを非表示にすることも、実現可能なはずです。
このように、「文章を推敲するための機能」をWorkFlowyに追加するための、解決の方向性は、「アドオン「Stylish」でWorkFlowyの見た目をカスタマイズする」となります。
3.さっそくやってみました
(1) 完成イメージ
さっそくやってみました。こんな感じになります。
(2) スタイルの説明
スタイルは、以下のとおりです。
.children { position: relative; margin-left: 0px; padding-left: 0px; border-left: 0px ; } .selected>.children>.project .project { margin-left: 0px; } .bullet, #bulletBucket .bulletBucketBullet { background-image: none; } .selected .project > .name > .content { line-height: 20px; } .selected > .children > .project > .children .project > .name > .content { padding-top: 20px; }
簡単に説明します。
a.段差をフラットに
.children { position: relative; margin-left: 0px; padding-left: 0px; border-left: 0px ; } .selected>.children>.project .project { margin-left: 0px; }
この2つのCSSによって、すべてのトピックの左側が揃います。
これが、
こうなります。
WorkFlowyの特徴である階層構造が見えなくなることで、一時的にアウトラインを忘れる効果があります。
参考:Escape from that outline (そのアウトラインをすてろ). February 14 2015 gofujita notes
b.bulletを非表示に
.bullet, #bulletBucket .bulletBucketBullet { background-image: none; }
このCSSによって、bulletが非表示になります。
これが、
こうなります。
bulletがないだけで、ぐっとエディタっぽくなります。(推敲のときだけでなく、文章を書くときも、bullet非表示の方がよいかもしれません。)
ただし、見えなくなるだけで、存在はしています。そのため、カーソルがbulletの位置にかかると、メニューは出てきてしまいます。
この点は、好みが分かれるかもしれません。
やりようによっては、カーソルがかかってもメニューが出ないようにもできるような気はしますが、これは残された課題、ということにします。
c.パラグラフ単位でまとめる
.selected .project > .name > .content { line-height: 20px; } .selected > .children > .project > .children .project > .name > .content { padding-top: 20px; }
WorkFlowyの行間は、階層構造を前提としているからか、行間などをそのままに段差をなくすと、若干文字が詰まった印象を受けます。
そこで、行間を空けることにしました。
また、パラグラフライティングの観点から、トピック内での行間よりも、トピック間での行間を、よりたくさん開けることにしました。
こうなります。
4.おわりに
アドオン「Stylish」で見た目を調整すれば、WorkFlowyは、ますます強力な「文章エディタ」になります。
よろしければ、皆さんも、お試しください。
(なお、「Stylish」のCSSを作るときは、Firefoxの「開発ツール」やChromeの「デベロッパーツール」を使うとよいです。画面の特定の場所を選択するだけで、その場所を変更するためのセレクタを簡単に取得できます。)
スポンサードリンク
関連記事
-
-
WorkFlowyに『「超」整理法』の時間順原則を取り入れるための、「WorkFlowy押下げトピック法」試案
1.課題:WorkFlowyに『「超」整理法』の考え方を取り入れるために、どんなトピック構造&トピッ
-
-
HandyFlowyのOPML機能の基本(HandyFlowy Ver.1.4)
HandyFlowyは、スマートフォンから使うWorkFlowyを快適にするアプリです。 iOS
-
-
彩郎のWorkFlowy(2015/02/21段階)
0.彩郎のWorkFlowyのHome(2015/02/21段階) ずっとやってみたかったWorkF
-
-
WorkFlowyのImportの基本(テキストファイル、Excel、Evernote)
1.WorkFlowyのImportとExportは、WorkFlowyと他のツールをつなぐ Wor
-
-
WorkFlowyによる「ブログ原稿を育てる畑」から、見出しタグで構造化されたHTMLを収穫するための、知的生産の治具(Mac・AppleScript)
1.WorkFlowyを、「ブログ原稿を育てる畑」にする WorkFlowyは、クラウドアウトライナ
-
-
「とりあえずWorkFlowy」の2015年
このブログ「単純作業に心を込めて」にとって、2015年がどんな1年だったかといえば、そりゃまあもちろ
-
-
WorkFlowy検索機能の強いところと足りないところ(Evernote、grep検索、Gmailと比較して)
1.WorkFlowyの検索機能のポイント 先日、WorkFlowyの検索機能を整理しました。自分の
-
-
「WorkFlowyによる文書作成は、実に楽しい。」という主観的な経験を観察することを通じて、文書作成ツールとしてのWorkFlowyの可能性を考察する(概観)
1.「WorkFlowyによる文書作成は、実に楽しい。」 WorkFlowyを文書作成ツールとして使
-
-
iPhoneから使うWorkFlowyに対してあなたが感じるその不満、全部まとめて、HandyFlowyが相手にします! #ただしペーストは除く
拝啓 WorkFlowyを愛用するiPhoneユーザーの皆様へ 寒い日が続きますが、いかがお過ごしで
-
-
磯野家の家系図版「WorkFlowy用語の基礎知識」(2)トピック群を特定したり表現したりするための用語
1.はじめに 「私家版WorkFlowy用語の基礎知識(β版)」を、スクリーンショットや具体例を用い
スポンサードリンク
- PREV
- WorkFlowyで「三色ボールペン方式」
- NEXT
- 続・WorkFlowyで「三色ボールペン方式」