*

「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

土台を固める堅実なバージョンアップ・HandyFlowy Ver.1.3のお知らせ

HandyFlowyは、スマートフォンから使うWorkFlowyを驚くほど便利にするアプリです。

記事を読む

no image

WorkFlowyの真価を引き出す必読文献『アウトライナー実践入門~「書く・考える・生活する」創造的アウトライン・プロセッシングの技術~』(Tak.著)

出ました。待望の一冊。 アウトライナー実践入門 ~「書く・考える・生活する」創造的アウトライン・プ

記事を読む

no image

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

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

記事を読む

no image

アシストボタンからカスタマイズツールバーへの進化(HandyFlowy ver.1.1)

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

記事を読む

no image

[展開]『コンテナ物語』から得た「入れ物」一般に関する知見を、WorkFlowyの「トピック」に応用する

1.はじめに 『コンテナ物語』は、2015年に読んだ本の中で、もっともよい収穫を得た本のうちの1冊で

記事を読む

no image

iOS10対応・OPML機能・文字選択モード/HandyFlowy Ver.1.4のお知らせ

HandyFlowyは、スマートフォンから使うWorkFlowyを驚くほど便利にするアプリです。

記事を読む

no image

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

1.ウェブブラウザから使うWorkFlowyはすごくよいけれど、若干の課題もある (1) ウェブブ

記事を読む

no image

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

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は、「ハサミスクリプト for

記事を読む

no image

続・WorkFlowyの文字数を数える(WorkFlowyを「文章エディタ」へと育てる)

1.WorkFlowyを「文章エディタ」に育てる知的生産の治具 2015年3月、『アウトライン・プロ

記事を読む

no image

【連載】iOSからWorkFlowyを快適に使う(3) ブラウザアプリからWorkFlowyを使う。

WorkFlowyは、パソコンからなら、すごく使いやすい道具です。でも、iPhoneなどのスマートフ

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑