*

アドオン「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に関する日本語情報の時系列整理(〜2014年12月)

1.はじめに 2015年1月にWorkFlowyを使い始めたとき、ウェブ上に存在するWorkFlow

記事を読む

no image

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

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

記事を読む

no image

「WorkFlowyらしさ」から考える「WorkFlowyの本質的な基本機能」

1.なぜ、WorkFlowyの基本機能を、淡々と説明するのか? (1) WorkFlowyの基本機能

記事を読む

no image

進化を続けるMemoFlowyが獲得した3つの新機能(MemoFlowy Ver.1.5)

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

記事を読む

no image

【連載】iOSからWorkFlowyを快適に使う(2) 操作と反応の細かい対応関係をちまちま理解して、公式アプリの力を引き出す。

WorkFlowyは、パソコンからなら大変使いやすいのですが、iPhoneなどのスマートフォンから使

記事を読む

no image

WorkFlowy&HandyFlowyに文字置換機能を追加する「ReplaceFlowy」

マロ。さんが、また偉大な仕事を達成しました。 WorkFlowyに、文字置換機能を追加するブックマー

記事を読む

no image

WorkFlowyの丁寧な説明

1.はじめに (1) WorkFlowyは、クラウドのメモツール これから、WorkFlowyの

記事を読む

no image

WorkFlowyのDropboxバックアップの基本

1.WorkFlowyのDropboxバックアップ機能 WorkFlowyには、Dropboxへのバ

記事を読む

no image

WorkFlowyで「メタ・ノート」

1.『思考の整理学』の「メタ・ノート」 外山滋比古さんの『思考の整理学』に、「メタ・ノート」という

記事を読む

no image

磯野家の家系図版「WorkFlowy用語の基礎知識」(3)アウトライン・リスト・トピックの操作に関する用語

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 ↑