*

アドオン「Stylish」で「WorkFlowy専用Firefox」に機能を追加する

公開日: : 最終更新日:2016/05/05 WorkFlowy

1.「WorkFlowy専用Firefox」を、一段高いレベルに引き上げてくれたアドオン「Stylish」

私は、WorkFlowyを、「WorkFlowy専用Firefox」から使っています。

「WorkFlowy専用Firefox」は、用途をWorkFlowyに限定したFirefoxです。機能は普通のFirefoxそのものですが、用途がWorkFlowyだけに限定されています。

なぜ、こんなことをするかといえば、用途をWorkFlowyに限定することによって、WorkFlowyの使い勝手を上げることに特化したカスタマイズが簡単になるためです。Firefoxには、多くの先達によって、たくさんのカスタマイズノウハウや、いろいろなアドオンが蓄積されています。これら膨大な蓄積を、WorkFlowyの使い勝手を上げるという一点に集中できることが、「WorkFlowy専用Firefox」の唯一にして最大の強みです。

これまでに、私が「WorkFlowy専用Firefox」を強化するために実行してきたことは、いろいろあります。その中で、もっとも大きな進化をもたらしてくれた方策をひとつだけ選べと言われれば、答えは「アドオン「Stylish」の導入」です。

アドオン「Stylish」は、ウェブサイトの見た目を変えるアドオンです。その仕組みを大雑把に言えば、自分で設定したスタイルシートを、自分のブラウザの上でだけ、特定のウェブサイトにかける、というものです。

このような仕組みなので、ウェブサイトの見た目がCSSで制御されていさえすれば、CSSでできる範囲で自由に、見た目をカスタマイズできます。そして、昨今のウェブサービスの見た目は、ほぼすべてにわたって、CSSで制御されています。ということは、アドオン「Stylish」を使えば、かなり自由に、見た目を変えることができるわけです。

WorkFlowyも、その見た目はCSSで制御されています。フォントや行間や背景や余白などはもちろんのこと、段差やBulletなどアウトライナーの本質と切り離せない見た目も、noteやパンくずリストやタグなどWorkFlowyの機能と深く絡み合う見た目も、全部CSSです。

そのため、アドオン「Stylish」を使えば、WorkFlowyの見た目を好きなように変えることができます。この見た目の変化はあまりに根本的なので、ときに、「見た目」を変えることが、「新しい機能」を追加することと、ほぼイコールになるほどです。

アドオン「Stylish」は、「WorkFlowy専用Firefox」を、一段高いレベルに引き上げてくれます。ここでは、「WorkFlowy専用Firefox」に特化して、アドオン「Stylish」の具体例を説明します。

2.アドオン「Stylish」で、「WorkFlowy専用Firefox」は、こんなふうに育つ

アドオン「Stylish」を使うと、どんなことができるかの実例を、いくつか示します。

(1) 彩郎の「WorkFlowy専用Firefox」での実例

私がやっているのは、主に、次の3つです。

a.「三色ボールペンWorkFlowy」

WorkFlowyで三色ボールペン方式

ひとつめは、「三色ボールペンWorkFlowy」です。

改・WorkFlowyで「三色ボールペン方式」

齋藤孝氏が提唱する「三色ボールペン方式」を、WorkFlowyで実践するために作成しました。

  • カスタマイズした見た目
    • 下線(青色下線へ)
    • 下線+斜体(赤色下線へ)
    • 太字(緑色ハイライトへ)
    • 斜体(赤色文字へ)
    • 斜体+太字(緑色文字へ)
  • 追加された新機能
    • 三色ボールペン方式の塗り分け機能
    • ポイントは、次の3点
      • 赤&緑、青&緑が可能
      • 文字の色を赤・緑にすることも可能
      • 操作が簡単(Ctrl+U,I,B)

b.「フラットなWorkFlowy」

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

ふたつめは、「フラットなWorkFlowy」です。

アドオン「Stylish」による「推敲用WorkFlowy」(段差フラット&bullet非表示)

アウトラインを一時的に忘れるために、作成しました。

  • カスタマイズした見た目
    • WorkFlowyの段差(段差をなくしてフラットに)
    • WorkFlowyのBullet(Bulletを消して、リストではない見た目に)
  • 追加された新機能
    • 段差を消すことで、アウトラインを一時的に忘れることができる
    • Bulletを消すことで、リストではなく、文章のような印象にすることができる
    • これらは、推敲に役に立つ

c.「プレゼン用WorkFlowy」

WorkFlowyでプレゼンをする

みっつめは、「プレゼン用WorkFlowy」です。

WorkFlowyをプレゼンツールとして使うことのメリット

WorkFlowyの画面をプロジェクタでスクリーンに映してプレゼンをする際、そのままだと文字が少し小さいため、文字サイズを大きくするために、作りました。

  • カスタマイズした見た目
    • 文字サイズを大きく
    • 行間を広く
    • 余白をなくして左右を最大化
  • 追加された新機能
    • スクリーンに表示したときに見やすい

(2) 先達の皆様方の活用例

アドオン「Stylish」によるWorkFlowyのカスタマイズには、先達がいらっしゃいます。先達の皆様方の活用例を紹介させていただきます。

a.あきさん

(a) 見た目をブログと近づけて、「自分のモノ」にする

Chrome拡張『Stylish』でWEBアプリを自分のモノにする – mmkns

私とアドオン「Stylish」の出会いは、この記事でした。

(b) タグごとに色を変える

【WorkFlowyTips】Stylishでタグ名ごとに色を変える – mmkns

特定のタグの色を変えることもできます! 驚愕。

(b) フォント

Firefoxでフォント「Ricty Diminished」が潰れる問題が解決 – snap of brain

フォントが潰れるというちょっとした問題の解消にも使えます。

b.倉下忠憲さん

(a) note全文表示

R-style » Workflowyでnoteを全文表示にしてみた

見た目を変えることで、機能を追加する、という視点は、倉下忠憲さんのこの記事に教わりました。

noteを全文表示にして、エディタに近づけています。

(b) ハイライト表示

WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ!

「三色ボールペンWorkFlowy」は、このTipsから生まれました。

c.Stylishの共有サイトで公開されているいろいろな使用例

アドオン「Stylish」には、ウェブサービスごとに、スタイル共有サイトが存在しています。

WorkFlowyのスタイル共有サイトは、以下のとおり。

Workflowy themes and skins – userstyles.org

ここをざーっとみると、アドオン「Stylish」で追加できる機能をイメージできるはずです。

3.アドオン「Stylish」でWorkFlowyのためのスタイルを作るには

アドオン「Stylish」を設定するには、CSSを作る必要があります。特にCSSを知らない方がはじめてやろうとすると、高いハードルを感じて怖気づいてしまうかもしれません。

でも、心配ありません。

まず、倉下忠憲さんによるシゴタノ!の次の記事は、丁寧で、詳しくて、わかりやすい解説です。これを読めば、どんな必要な作業の全体イメージがつかめます。

WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ!

次に、残る作業は、具体的なCSSの作成なのですが、これもそんなにむずかしくありません。理由は2つあります。

ひとつは、アドオン「Stylish」で作るスタイルは、自分のブラウザ上でのみ動くスタイルです。多少不格好でも、多少構文がおかしくても、多少エラーがあっても、自分のブラウザ上で見た目が変われば、それで問題はありません。

(このアドオンが変更するのは見た目だけです。なので、変なスタイルを適用してしまっても、それによってウェブサービスのデータが失われる、とかいうこともありません。この意味で、気楽です。)

そのため、Googleなどで検索しながら、適当に試行錯誤をくり返せば、だいたい目的を叶えるスタイルを作ることができます。

その上、世の中には、CSSを作ることを支援してくれる便利なツールが、たくさん存在しています。Firefoxなら「開発ツール」がこれにあたります。

開発ツール | MDN

「開発ツール」は、ウェブサイトの特定の箇所の見た目が、どんなCSSで制御されているのかを、ピンポイントで特定してくれます。「開発ツール」を使えば、CSSを書くことのむずかしさは、大きく下がります。

この「開発ツール」の存在が、理由のふたつめです。

「WorkFlowyのここがこんな見た目になれば、もっと便利なんだけどな」というニーズを感じている方は、よろしければ、アドオン「Stylish」によるカスタマイズにチャレンジしてみてください。きっと、WorkFlowyがもっともっと身近な「自分の道具」に育ちます。

お知らせ

このエントリは、その後、加筆修正などを経て、書籍『クラウド時代の思考ツールWorkFlowy入門』の一部分となりました。

書籍『クラウド時代の思考ツールWorkFlowy入門』の詳細目次と元エントリは、次のとおりです。

『クラウド時代の思考ツールWorkFlowy入門』の詳細目次と元記事の紹介

スポンサードリンク

関連記事

no image

WorkFlowyで、Kindle本の「読書ノート」を作る

実例をまとめました。→WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボール

記事を読む

no image

WorkFlowy Proの説明

1.はじめに クラウドアウトライナーWorkFlowyは、無料で使いはじめることができます。また、無

記事を読む

no image

WorkFlowyで「発見の手帳」(『知的生産の技術』とWorkFlowy)

1.私は、「発見の手帳」の、どこに惹かれたか? (1) 「発見の手帳」は、着想を文章で記録する手法

記事を読む

no image

WorkFlowyの公式デモページで、アカウントを作成せずに、WorkFlowyを体験する

WorkFlowyは、ある種の人にとっては、うまく機能し、大きな力を発揮します。 自分にとってWor

記事を読む

no image

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

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

記事を読む

no image

元記事を時系列で並べるところから見える、本を書くことの醍醐味(『クラウド時代の思考ツールWorkFlowy入門』までの時系列)

1.『クラウド時代の思考ツールWorkFlowy入門』の元記事紹介 2016年1月29日に、『クラウ

記事を読む

no image

WorkFlowyで、離れた場所を同時に操り、文章を書く

1.WorkFlowyで長文を書くことを助けてくれるのは、階層構造だけではない WorkFlowy

記事を読む

no image

WorkFlowyで「三色ボールペン方式」

最新版の「三色ボールペンWorkFlowy」は、「改・WorkFlowyで「三色ボールペン方式」」に

記事を読む

no image

WorkFlowyの丁寧な説明

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

スポンサードリンク

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

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

no image
AI・BI・PI・BC

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

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

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

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

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

no image
WorkFlowyを「書き上げる」ための道具として機能させるための、2つの条件・3つのイメージ

Tak.さんのTweetに触発されて。 WorkFlowyやOmniO

→もっと見る

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

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

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑