*

アドオン「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で大切なことは、すべてEvernoteから学んだ

1.EvernoteからWorkFlowyへの転向 2014年11月から2015年1月までの2ヶ月間

記事を読む

no image

WorkFlowyをブログツールに。ハサミスクリプトファミリーの整理(Win&Mac・HTML&マークダウン&はてな記法)

1.WorkFlowyをブログツールにするハサミスクリプト 2015年現在、私は、「単純作業に心を込

記事を読む

no image

自分のWorkFlowyを育てる。「赤坂シナモンの地下迷宮」へと続く試行錯誤の中間報告。

1.はじめに (1) WorkFlowyを使い始めて2ヶ月間 私がWorkFlowyを本格的に使

記事を読む

no image

情報の構造を活かし、Amazonから目次をWorkFlowy&MemoFlowyに取り込む「入口」拡張ツール

1.はじめに 昨日、マロ。さんによって、「kindle highlight to WorkFlowy

記事を読む

no image

HandyFlowyでWorkFlowyを着せ替えする(機能拡張スクリプトで背景画像を設定・iOS&Android)

HandyFlowyは、スマートフォン用のWorkFlowy専用クライアントアプリです。HandyF

記事を読む

no image

WorkFlowyでセミナーをやってみたことの報告(課題・可能性・今後の展望)

1.WorkFlowyでセミナーをやってみた (1) 「朝一番の自動書記」での思いつきをTwitte

記事を読む

no image

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

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

記事を読む

no image

まずはここから!多機能なHandyFlowyの中で、使用頻度が高く、よい仕事をする、3つの地味機能

HandyFlowyは、iPhone・iPad用のWorkFlowy専用クライアントアプリです。昨日

記事を読む

no image

HandyFlowy機能拡張スクリプトライブラリ作成計画:HandyFlowyを世界に広げるために

1.日本に、HandyFlowy機能拡張スクリプト生態系が育った HandyFlowyを公開してから

記事を読む

no image

WorkFlowyについて書いてきた177個のブログ記事を、WorkFlowyによって組み替えた、ひとつの大きな階層つきリスト

1.はじめに 2015年1月から、私は、この「単純作業に心を込めて」というブログに、WorkFlow

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑