*

アドオン「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で本を書いた人からの手紙」

1.はじめに こんにちは。少しずつ暖かくなってきましたが、いかがお過ごしでしょうか。 先日さし上げた

記事を読む

no image

続・WorkFlowyのZoomの基本「Zoomの本質と4つのZoom」

1.はじめに Zoomは、WorkFlowyの中核的な機能といえます。Zoom機能があるからこそ、W

記事を読む

no image

WorkFlowyで論文や本を書くときの、注の付け方(タグの活用)

1.課題 WorkFlowyで、論文や本を書くときに、注を付けたい。 どうしたらよいか。 注を作成し

記事を読む

no image

WorkFlowy基本5原則【第1原則】ただひとつの「アウトライン」に自分のすべてを同居させる

1.はじめに WorkFlowyは、他の道具にはあまり見られない特徴を持つ、ちょっと変わった道具で

記事を読む

no image

WorkFlowyでプロジェクトを進める

1.はじめに 最近、WorkFlowyをタスク管理に使えないだろうか、と試行錯誤しています。Tood

記事を読む

no image

「WorkFlowy専用Firefox」の余白を、アドオン「Stylish」で調整する

1.「WorkFlowy専用Firefox」で、これができればいいなと思っていたこと (1) 「Wo

記事を読む

no image

日時機能のパワーアップ(MemoFlowy ver.1.2)

MemoFlowyはWorkFlowyへのテキスト入力に特化したメモアプリです。ぱっとアプリを立ち上

記事を読む

no image

私家版WorkFlowy用語の基礎知識(β版)

WorkFlowyの特徴のひとつは、アウトライン操作にあります。では、アウトラインとはなんでしょうか

記事を読む

no image

文章の個数(WorkFlowyで文章を書くこと)

1.文章の個数は仮のもの WorkFlowyで文章を書くようになって実感したことは、「文章の個数は

記事を読む

no image

WorkFlowyの共有機能を理解するための3つの軸、価値を引き出すためのマトリクス

1.WorkFlowyの共有機能を理解するための3つの軸 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 ↑