*

「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を共同制作環境として活用する(1) 共同制作環境のために役立つWorkFlowyの基礎知識

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

MemoFlowyは、「iPhoneからもWorkFlowyにメモしたいけれど、iPhoneからWorkFlowyに直接メモするのはやりづらい」という人のためのアプリである

1.はじめに MemoFlowyは、WorkFlowyにテキストメモを書き込むためのアプリです。

記事を読む

no image

WorkFlowy基本5原則【第5原則】毎日の生活の中で気軽に使ってみる

1.はじめに WorkFlowyは、他の道具にはあまり見られない特徴を持つ、ちょっと変わった道具で

記事を読む

no image

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

1.三色ボールペンWorkFlowy 今、私のWorkFlowyは、「三色ボールペンWorkFlow

記事を読む

no image

iPhoneから使うWorkFlowyに対してあなたが感じるその不満を、HandyFlowyは、どう解消できるのか? #ただしペーストは除く 【回答編】

先日、WorkFlowyを愛用するiPhoneユーザーの方々に向けて、こんな呼びかけをしました。 i

記事を読む

no image

「情報を区切る単位はトピックだけでいい」というWorkFlowyの思想

1.WorkFlowyは、思想を持っている WorkFlowyを使っていると、WorkFlowyは思

記事を読む

no image

WorkFlowyがテキストを管理する枠組みは、「テキストをトピックに格納する」と「トピックを階層構造で管理する」の2段階

1.WorkFlowyは、テキストとトピックの2段階で、テキストを管理する クラウドアウトライナー

記事を読む

no image

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

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

記事を読む

スポンサードリンク

スポンサードリンク

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 ↑