*

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

公開日: : WorkFlowy

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

(1) 「WorkFlowy専用Firefox」は、しなやかで強力なWorkFlowyアプリ

WorkFlowyをパソコンから使うとき、私が使っているのは、「WorkFlowy専用Firefox」です。

「WorkFlowy専用Firefox」というと大げさに聞こえますが、その実態は、普通のFirefoxをWorkFlowy専用に使っているだけです。でも、「WorkFlowy専用Firefox」は、WorkFlowy専用なので、Firefoxの基本機能(ブックマークや設定)や柔軟で豊富なアドオンを、WorkFlowyの使い勝手を上げるためだけに特化して活用することができます。

汎用機ではなく専用機なので、自分がWorkFlowyに求めるものやWorkFlowyを使っている感覚に応じて、きめ細やかな設定をすることができます。

「WorkFlowy専用Firefox」は、WorkFlowyのURLをブックマークで整理するだけでも、十分強力なWorkFlowyアプリになります。でも、Firefoxに蓄積したいろんなアドオンやカスタマイズテクニックを使って、自分なりの設定を施せば、細やかに柔軟にチューンナップすることができます。

「WorkFlowy専用Firefox」は、しなやかで強力なWorkFlowyアプリです。

「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる(Windows&Mac)

(2) 「WorkFlowy専用Firefox」に、こうなればいいなと感じていたこと

私には、「WorkFlowy専用Firefox」に対して、こうなればいいのになと感じていたことが、ひとつありました。それは、余白です。

「WorkFlowy専用Firefox」のブラウザ本体部分は、何も設定しなければ、WorkFlowyのウェブサイトそのままなので、こんな感じです。

WorkFlowy専用Firefox

左サイドバーを出して、キーボードショートカットを表示すると、左サイドバーの幅によっては、キーボードショートカットとアウトラインが重なります。

「WorkFlowy専用Firefox」にとって、左サイドバーはけっこう重要なので、できれば幅を広く取りたいところです。でも、幅を広くすると、重なってしまいます。

にもかかわらず、右側には余白が余っています。なんだかもったいないです。

WorkFlowy専用Firefox

右側の余白をなくして、アウトライン全体を右側に寄せれば、キーボードショートカットを表示させてもアウトラインと重ならないですし、また、左サイドバーをもっと広くとることもできるのですが、なぜか右側に贅沢な余白があります。

この余白の問題は、私にとって、解決できなくても困るわけではないけれど、ちょっと気になっていた課題でした。

2.アドオン「Stylish」が、余白問題を解消してくれる

(1) アドオン「Stylish」によるBefore→After

さて、昨日、あき(@akio6o6)さんが、こんなエントリをアップしてくださいました。

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

このエントリを読んで、私は、Chrome拡張やFirefoxアドオンである「Stylish」を使えば、WorkFlowyのレイアウトを自分のニーズにあわせて調整できることを知りました。

アドオン「Stylish」を使えば、私が感じていた余白の課題はきれいに解消されるではないか!と感動した私は、早速やってみました。

結果、こんな感じで、余白の課題は解消されました。

Before

before

重なっている&右側に余白が。

After

after

重なっていない&左サイドバーの幅が広くなった&右側の余白なし。

(2) アドオン「Stylish」の設定方法

設定は、簡単です。cssの知識が若干必要になりますが、それほど凝らなければ、そんなにむずかしくありません。

a.アドオン「Stylish」のインストール

まず、「Stylish」をブラウザにインストールします。Firefoxなら、こちらからインストールできます。

Stylish

b.ベースとなるテーマ「Workflowy.com fluid-width monospace」

ゼロからcssを書くこともできるのですが、それは面倒&大変なので、ベースとなるテーマを探します。

「Stylish」は、cssをいじって自分で調整することもできますが、配布されているテーマを利用することもできるのです。

WorkFlowyで利用するテーマを探すなら、以下の手順です。

  • ブラウザでWorkFlowyを開く
  • アドレスバー右横のStylishのアイコンをクリックして、「このサイト用のスタイルを探す」を選択する
  • 表示されたテーマ一覧から、よさそうなテーマを選んで、インストールする

390A45E1 4611 4542 811F 90C4F98F2738

配布されているテーマを修正することも可能です。ベースとなるテーマを探す、くらいのつもりで、気楽に探すとよいです。

私は、右側の余白がないテーマを探した結果、ベースとするテーマは、次のものにしました。

Workflowy.com fluid-width monospace – Themes and Skins for Workflowy – userstyles.org

c.paddingを調整

「Workflowy.com fluid-width monospace」そのままだと、私が使っているMacBookAir11inchの画面では、ショートカットとアウトラインのかぶりが生じてしまいます。

そこで、paddingを修正して、左paddingを250px、右paddingを50pxにしました。

(3) 左サイドバーを広げても大丈夫

右側の余白がなくなったので、左サイドバーをもう少し広くとっても、アウトラインの横幅を十分確保することができます。

そこで、広げました。

左サイドバーが広がったWorkFlowy専用Firefox

これによって、ブックマーク一覧に並んでいる書きかけトピックの文字列がたくさん読めるようになったので、利便性が上がりました。

3.自分のWorkFlowyを育てる

WorkFlowyは、シンプルなアウトライナーです。

でも、WorkFlowyは、高性能なウェブアプリなので、ちょっとした工夫で、自分のニーズに合わせた柔軟なカスタマイズを施すことができます。

特に、「WorkFlowy専用Firefox」なら、カスタマイズの可能性は、それこそ無限大です。

WorkFlowyを使っていると、WorkFlowyの唯一のアウトラインの中には、たくさんの情報が蓄積されます。WorkFlowyのアウトラインの中の情報を増やしていくことは、「WorkFlowyを育てる」ことでもあります。

それと同時に、WorkFlowyは、WorkFlowyを使う環境を、自分なりにカスタマイズしていくことができます。自分のニーズにあわせてカスタマイズすることで、WorkFlowyを使いやすくしていくことも、WorkFlowyの中身を育てることとと同じくらい大切で面白い、WorkFlowyを育てることの一環です。

【参考】WorkFlowyを「Stylish」でカスタマイズするときの参考情報

スポンサードリンク

関連記事

no image

MacのキーボードショートカットでWorkFlowyのトピックを自由に操り、WorkFlowyをテキスト管理システムとしてうまく機能させるための、MacOS基本設定

1.問題:Macのキーボードから、WorkFlowyのキーボードショートカットを自由に操るには、どう

記事を読む

no image

MemoFlowyが「WorkFlowy版WriteNote」へと育つまでの経緯

1.はじめに 先日公開となったMemoFlowyのバージョンアップ(iOS版Ver.1.4・Andr

記事を読む

no image

WorkFlowyは「文章エディタ」になりうるか?(WorkFlowyの生態系を育てる)

1.「プログラマーのエディタ」と「文章エディタ」 「テキストエディタ」と「文章エディタ」は似ているけ

記事を読む

no image

WorkFlowyの丁寧な説明

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

記事を読む

no image

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

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

記事を読む

no image

2016年2月段階でWorkFlowyに期待している3つの機能追加

2016年2月現在、私は、現状のWorkFlowyに、おおむね満足しています。 ただ、これ以上改善の

記事を読む

no image

アウトライナーで考えるための3つのコツ(『アウトライン・プロセッシング入門』より)

1.はじめに 『アウトライン・プロセッシング入門: アウトライナーで文章を書き、考える技術』は、「ア

記事を読む

no image

「WorkFlowy専用Firefox」にローカルファイルリンク機能をつけて、WorkFlowyを知的生産のコックピットに(Window&Mac)

先日、こんなエントリを書きました。 WorkFlowyに書いたURLを活用し、WorkFlowyを思

記事を読む

no image

「コンテナ」と「トピック」〜WorkFlowyの中に知的生産のフローを流すシステム〜

1.[はじめに]知的生産のフローと『コンテナ物語』をつなぐもの 次の2つの記事を書きました。 知的

記事を読む

no image

日々の仕事の中で育てる『私の教科書』

1.「ずっと完成しないで変化し続ける有機体」の考え方を、日々の仕事で具体化する (1) 最近もっとも

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑