*

「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

「文章を書くツール」の変遷

1.はじめに 私にとって、「文章を書く」ことは、特別で大切な行動です。 仕事の上でも、「文章を書

記事を読む

no image

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

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

記事を読む

no image

WorkFlowyのURLを活用するアイデアを妄想する(その1・ブックマークに登録)

1.WorkFlowyのURL WorkFlowyは、クラウドアウトライナーなので、URLを持ってい

記事を読む

no image

WorkFlowyを印刷用にカスタマイズする

WorkFlowyを印刷用にカスタマイズする 1.「WorkFlowy専用Firefox」で、Wor

記事を読む

no image

MemoFlowy運用例(2016年7月段階)

2016年6月のバージョンアップ(iOS版Ver.1.4・Android版Ver.1.1)で、次の段

記事を読む

no image

「WorkFlowyとは、何か?」を考える2つの視点

1.WorkFlowyはクラウドアウトライナーではない? 私がWorkFlowyを使い始めたとき、

記事を読む

no image

MemoFlowyの進化は止まらない。メモ入力画面から直接WorkFlowyに書き込めるように!(Android Ver.1.1 & iOS Ver.1.4)

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

記事を読む

no image

WorkFlowyのURLを活用するアイデアを妄想する(2) WorkFlowyをToodledoとつなぐ

1.WorkFlowyのURLの活用を妄想する (1) 「WorkFlowyのURLを活用するアイデ

記事を読む

no image

【連載】WorkFlowyのテキスト入力に関するキー操作の基本(4) 削除(「文字単位の削除」と「トピック単位の削除」)

WorkFlowyは、テキストを階層構造で管理するシステムです。テキストをトピックに格納し、トピック

記事を読む

no image

閲覧モードのブラッシュアップ(スムーズなスクロール・スリープ抑制)(HandyFlowy ver.1.1)

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

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑