*

アドオン「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の下線・太字・斜体を、ハイライトにしたり、三色ボールペン方式にすることができます。

三色ボールペン方式のWorkFlowy

たとえば、特定のタグだけを、色やフォントを変えることができます。

たとえば、noteを全文表示にすることができます。

(2) アドオン「Stylish」で、段差をフラット&bulletを消去

さて、私がここで実現したいと考えているのは、

  • WorkFlowyのトピック群が持っている階層構造を、フラットに表示すること
  • トピック冒頭のbulletを消すこと

です。

これらは、WorkFlowyの機能と分かちがたく結びついてはいるものの、見た目の問題です。そして、WorkFlowyは、トピック群の階層構造の見た目も、bulletの見た目も、(HTMLのレベルではなく、)cssのレベルで、作っています。

であれば、アドオン「Stylish」でcssをいじりさえすれば、トピック群の階層構造をフラットにすることも、bulletを非表示にすることも、実現可能なはずです。

このように、「文章を推敲するための機能」をWorkFlowyに追加するための、解決の方向性は、「アドオン「Stylish」でWorkFlowyの見た目をカスタマイズする」となります。

3.さっそくやってみました

(1) 完成イメージ

さっそくやってみました。こんな感じになります。

推敲用WorkFlowy。フラットでbulletなし。

(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の行間は、階層構造を前提としているからか、行間などをそのままに段差をなくすと、若干文字が詰まった印象を受けます。

段差をフラットにして、bullet非表示だと、窮屈。

そこで、行間を空けることにしました。

また、パラグラフライティングの観点から、トピック内での行間よりも、トピック間での行間を、よりたくさん開けることにしました。

こうなります。

行間をパラグラフごとに開けて、余裕をもった印象に。

4.おわりに

アドオン「Stylish」で見た目を調整すれば、WorkFlowyは、ますます強力な「文章エディタ」になります。

よろしければ、皆さんも、お試しください。

(なお、「Stylish」のCSSを作るときは、Firefoxの「開発ツール」やChromeの「デベロッパーツール」を使うとよいです。画面の特定の場所を選択するだけで、その場所を変更するためのセレクタを簡単に取得できます。)

Firefoxでcssをいじるなら、開発者ツールがおすすめ。

スポンサードリンク

関連記事

no image

WorkFlowyに『「超」整理法』の時間順原則を取り入れるための、「WorkFlowy押下げトピック法」試案

1.課題:WorkFlowyに『「超」整理法』の考え方を取り入れるために、どんなトピック構造&トピッ

記事を読む

no image

HandyFlowyのOPML機能の基本(HandyFlowy Ver.1.4)

HandyFlowyは、スマートフォンから使うWorkFlowyを快適にするアプリです。 iOS

記事を読む

no image

彩郎のWorkFlowy(2015/02/21段階)

0.彩郎のWorkFlowyのHome(2015/02/21段階) ずっとやってみたかったWorkF

記事を読む

no image

WorkFlowyのImportの基本(テキストファイル、Excel、Evernote)

1.WorkFlowyのImportとExportは、WorkFlowyと他のツールをつなぐ Wor

記事を読む

no image

WorkFlowyによる「ブログ原稿を育てる畑」から、見出しタグで構造化されたHTMLを収穫するための、知的生産の治具(Mac・AppleScript)

1.WorkFlowyを、「ブログ原稿を育てる畑」にする WorkFlowyは、クラウドアウトライナ

記事を読む

no image

「とりあえずWorkFlowy」の2015年

このブログ「単純作業に心を込めて」にとって、2015年がどんな1年だったかといえば、そりゃまあもちろ

記事を読む

no image

WorkFlowy検索機能の強いところと足りないところ(Evernote、grep検索、Gmailと比較して)

1.WorkFlowyの検索機能のポイント 先日、WorkFlowyの検索機能を整理しました。自分の

記事を読む

no image

「WorkFlowyによる文書作成は、実に楽しい。」という主観的な経験を観察することを通じて、文書作成ツールとしてのWorkFlowyの可能性を考察する(概観)

1.「WorkFlowyによる文書作成は、実に楽しい。」 WorkFlowyを文書作成ツールとして使

記事を読む

no image

iPhoneから使うWorkFlowyに対してあなたが感じるその不満、全部まとめて、HandyFlowyが相手にします! #ただしペーストは除く

拝啓 WorkFlowyを愛用するiPhoneユーザーの皆様へ 寒い日が続きますが、いかがお過ごしで

記事を読む

no image

磯野家の家系図版「WorkFlowy用語の基礎知識」(2)トピック群を特定したり表現したりするための用語

1.はじめに 「私家版WorkFlowy用語の基礎知識(β版)」を、スクリーンショットや具体例を用い

記事を読む

スポンサードリンク

スポンサードリンク

no image
お待たせしました! オフライン対応&起動高速化のHandyFlowy Ver.1.5(iOS)

お待たせしました! なんと、ついに、できちゃいました。オフライン対応&

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のワーキングパパです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑