*

「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

WorkFlowyにKindleのURLを書いて、「読書ノート」を育てる

1.前提知識 (1) WorkFlowyに関する前提知識 a.WorkFlowyは、「読書ノート」と

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

彩郎流二毛作。知的生産の治具マクロ「WFtoMSWD.dot」で、Word文書作成プロセスから得る収穫を倍にする。

1.マロ。さんの知的生産の治具工房による新作Wordマクロ「WFtoMSWD.dot」 マロ。さんの

記事を読む

no image

WorkFlowyからブログエントリをHTMLで切り取る。ハサミスクリプトirodrawEditionの導入方法と使い方(Mac)

1.WFtoHTML irodrawEdition (1) WorkFlowyでブログ原稿を書く 2

記事を読む

no image

なぜ、MemoFlowyを使うのか?(3) 書いたメモを、WorkFlowyのアウトラインの中の好きな場所へ簡単に放り込める

MemoFlowyは、WorkFlowyにテキストメモを投稿するためのiOS用アプリです。ぱっとアプ

記事を読む

no image

WorkFlowyで、『「超」整理法』の時間軸検索原則を実現するため、検索条件「last-changed:」のURLをブックマーク

1.私の知的生産の基本は、『「超」整理法』の2大原則 このブログのテーマのひとつは、知的生産です。W

記事を読む

no image

ライフログツールとしての進化と新しい可能性/位置情報とTwitter機能を備えたMemoFlowy Ver.1.8

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

記事を読む

no image

『WorkFlowy文章作法』第1章「2つの原則」(前半「知的生産のフロー」)

この記事は、『WorkFlowy文章作法』の第1章「2つの原則」のうち、前半の「知的生産のフロー」で

記事を読む

no image

WorkFlowyを共同制作環境として活用する(1) 共同制作環境のために役立つWorkFlowyの基礎知識

1.HandyFlowyとMemoFlowyを生み出したのは、WorkFlowy共有トピック Han

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑