WorkFlowyをブログエディタとして使う方法|拡張機能「Stylus」で見た目をカスタマイズ

WorkFlowy

WorkFlowyはアウトラインプロセッサとしては非常に使いやすく人気があります。

でも、ブログエディタとして使おうとすると、階層の見分けがつきにくく、使い方によっては不便になります。

そこでいろいろ試行錯誤した結果、FirefoxアドオンもしくはChrome拡張機能の「Stylus」を使って、ブログエディタみたいにできたのでその使い方を紹介します。

※以前は「Stylish」という拡張機能を使っていましたが、ポリシー違反でFirefoxからもChromeからも削除されてしまったようです。

参考:人気のFirefox拡張機能「Stylish」がポリシー違反でブロック、すべての閲覧履歴を収集か – 窓の杜

Stylusはほぼ同じ設定画面で上位互換のようなので、現在まだStylishが使えている人も、Stylusへの乗り換えを推奨します。

スポンサーリンク

WorkFlowyをブログエディタにしたい

WorkFlowyはアウトラインプロセッサ(アウトライナー)と呼ばれる、階層構造を持った文書作成ソフトウェアの一つです。

↓Wikipediaから引用。

長文の場合、大雑把な文書構成を決めてから、見出し(ノード)を付けていき、ブロック単位で細部についての記述を追加していく、という手法が取られることが多い。アウトラインプロセッサを使えば全体の構成がツリー表示され、現在の編集位置を把握しながら文章を記述することができる。また、ブロック単位で階層構造を上下に移動させたり、位置を入れ替えたりすることができるので、長文を作成する機会が多い小説家やライターに愛用者が多い。

引用:アウトラインプロセッサ – Wikipedia

アウトラインプロセッサをブログの執筆に使うと、上記の「ブロック単位で階層構造を上下に移動させたり、位置を入れ替えたりすることができる」ので、最初に勢いでガガガっと書いた後に、まとめられそうなものを固めて見出しをつけたり、見出しの位置を入れ替えたりするのが簡単になります。

でも、WorkFlowyは初期設定だと見出しと本文の見分けがつきにくく、ブログの下書きには向いていません。

なので、この記事は、WorkFlowyをブログエディタとして見やすいデザインにカスタマイズしましょう、という内容です。

WorkFlowyデフォルトの状態でブログを書いた場合

↓これがWorkFlowyをデフォルトの状態でブログ下書きした時の見た目です。

上記の通り、「段落間と改行が同じ大きさで見分けにくい」「同じ階層の見出しと本文の違いがわかりにくい」「バレット(・)が邪魔」というのがブログエディタとしては使いにくい点になります。

これを、WorkFlowyの機能はそのままで見た目だけをカスタマイズしていきます。

WorkFlowyをブログエディタにした結果

具体的なやり方をレクチャーする前に、カスタマイズした結果どうなるのかを先に紹介しておきます。

※後で段落間が広すぎるなと思ったのでこんなのも作りました。(後半に登場します)

↓比較のためこちらがWorkFlowy初期状態の見た目です。とくに見出しと本文の見分けがつくようになったのが大きく変わった点です。

↓実際に執筆している時の画面はこのようになります(アニメGIF)。階層を変更したら見出しが動的に変わっているのがわかりますね。

WorkFlowyをブログ下書きとして使う

こういうことがChrome拡張機能の「Stylus」を使えば実現できます。

WorkFlowyをブログエディタとして使う手順

それでは具体的に、WorkFlowyをブログエディタとして使いやすくするカスタマイズの手順を書いていきます。

手順は3つ。

  • WorkFlowyのアカウント作成
  • Stylus」をインストール
  • StylusにCSSを設定(←ここが重要)

WorkFlowyのアカウント作成

WorkFlowyのアカウントをまだ持っていない人でやってみたい場合はまずアカウントを作成する必要があります。

WorkFlowy(デフォルトでは1ヶ月に250行の制限がありますが、この招待リンクからアカウントを作成すると、お互い250行がプラスされます。)

WorkFlowyの使い方を知りたい人は、使い方とショートカットキーをまとめた記事も書いているので、興味があればどうぞ。

Stylusをインストール

続いてFirefoxアドオンもしくはChrome拡張機能の「Stylus」をインストールします。

Chrome拡張機能:Stylus

Firefoxアドオン:Stylus

FirefoxのStylusにCSSを設定する方法

まずはFirefoxアドオンのStylusのほうから手順を説明していきます。Chrome拡張機能のStylusとタグの内容が微妙に違うので、Chromeの人は次の見出しまで飛ばしてください。

ここからついにカスタマイズの肝である「ブログエディタ用に用意したCSS」を設定します。

これから紹介するタグがStylusにコピペするためのCSSタグです。

↓下記コードの右上にあるコピーボタンをクリックしてください。

すると中身が全選択されるのでCtrl+Cでコピーします。

今は新しいスタイルも作っているので後半も見てみてください。

なお、彩郎(@irodraw)さんの記事でStylishをWorkFlowyに使うことやその他多くのヒントをもらいました。ありがとうございます。

参考:アドオン「Stylish」で「WorkFlowy専用Firefox」に機能を追加する

そしてコピーしたCSSタグをまるごとStylusの設定画面にコピペしていきます。

まずはFirefoxの右上のほうにある設定ボタンから白紙のスタイルを作成して、

以下、解説のキャプチャが以前書いたStylishのままになっていますが、基本的な機能はStylusと似ているので、同じような項目を探してください。

コードを書く部分にCtrl+Vでまるごとコピペします。保存を忘れないように気をつけてください。名前の欄はなんでもOKです。

これで設定が間違ってなければWorkFlowyの見た目がブログエディタっぽくなっているはずです。

↓こういう階層や色が付けば設定は成功です。

WorkFlowyのホーム画面に戻って何か書いたりTabで階層を変えたりしてみてください。

Chrome拡張機能のStylusにCSSを設定する方法

続いてChrome拡張機能のStylusを設定する手順を説明します。

↓まずはChrome拡張Stylus用のCSSタグがこちら。Firefoxとほぼ同じですが最初の3行と最後のカッコがありません。

今は新しいスタイルも作っているので後半も見てみてください。

↑上記CSSタグをコピーしてStylusの設定に貼り付けしていきます。

まずはStylusの拡張機能ボタンを右クリックしてからオプションをクリックします。

そして「新しいスタイルを作成」をクリック。

設定画面に必要な情報を入力してから最後に「保存」ボタンをクリックします。

「スタイル名」は自分の分かりやすい名前を自由に入力してOK。

右側のタグ入力欄にはコピーしたCSSタグを貼り付けします。

「適用先」は「次で始まるURL」を選択してから右側のURL欄には「https://workflowy.com/」を入力します。これでWorkFlowyだけで見た目が変わるようになります。

最後に左側のほうにある「保存」ボタンをクリックして設定完了。これでWorkFlowyを開けば見た目が変わっているはずです。

行間を縮めて一覧性を高めた新しいスタイル

追記です。

しばらく上記に説明したスタイルを使ってきたんですが、行間が広くて、1ページに表示できる情報量が少ないと感じることがあったため、もう少し行間をつめて、それでいて段落の塊がわかるようなスタイルを作ってみました。(タグは後述します)

↓同じ文章でどのくらい行間・段落間が違うのか比べたのがこれ。

新スタイルでは段落間をかなり狭くしたので1ページに表示される情報量が多くなりました。ただし、単に狭くしただけだと段落の塊がわかりにくくなるので、見出し以外にだけ左側に▶マークを付けて見分けやすくしています。

Firefox用の新スタイルCSSタグ

導入方法はこの記事の前半に書いてあるのと一緒なのでそちらを参考にしてください。

↓FirefoxアドオンStylus用タグです。

Chrome用の新スタイルCSSタグ

続いてChrome拡張機能Stylus用CSSタグです。

WorkFlowy用Stylusのカスタマイズ

さて、ここまでの設定が成功すればあとはCSSがいじれる人なら自分に合わせてStylusをカスタマイズすることもできるでしょう。

今回StylusにコピペしたCSSタグはひとつの例なので、それぞれ自分のブログに合わせて調節できるようならしてください。

ここからはCSSをカスタマイズするポイントをまとめたので変更したい部分があったら実験してみてください。

CSSタグ左側にある行番号がだいたい対応しているので編集する場合はそこらへんを探してみてください。

外側の背景色

枠の外側の背景色が最初はグレーになっていますがブログの背景が白の人は#FFFで白にしたほうが同じ見た目になるので良いと思います。

本文幅・本文左右の余白

ブログに合わせて記事幅と左右枠までの余白を設定してください。厳密に言うと本文のフォントサイズも同じにしないと字詰めまでは合いませんが、幅を一緒にするだけでもかなり近くなります。

padding:0px 60pxとなっている部分は上下余白が0px、左右余白が60pxという意味になってます。

本文レイアウトの設定

本文のフォントサイズ・色・行間・段落間などの文章レイアウトを微調整します。この設定によって文章の見た目がだいぶ変わってくるので、好みの数値に設定してください。

あと、見出しのデザインはカスタマイズが簡単にできるように色を付けて太字にしているだけです。カスタマイズはご自由にどうぞ。

ただし見出しのデザインにこだわると本文CSSですべて上書きして消さないといけなくなり、設定が煩雑になるのでCSSが分からない場合は色と太字以外は変更しないほうが良いと思います。

ブログエディタ用WorkFlowyの特徴

さて、これで一応ブログエディタっぽくなりましたが、実際は下書き以上の運用はおすすめしません。

WorkFlowy自体にブログサービスと連携する機能が無いので、そのままブログにうまい形でコピペする手段が無いからです。

使用しているブログサービスにもよりますが、文章を丸ごとコピペしたらうまく貼り付けできないことが多いと思います。

※そのままコピペすると書式までコピーされてしまうことがあるので、メモ帳などテキストエディタにいったんコピペして(書式をリセットして)から、各ブログの本文欄にコピペしたほうが無難です。

なので、あくまでブログの構成を練ったり順番を入れ替えたりする途中段階までの執筆を助けてくれるツール、というくらいの位置づけが一番使いやすいんじゃないかと思います。

HTMLタグや画像は使えない

WorkFlowyで書けるのはあくまでテキストだけなのでブログで使うHTMLタグ(リンク・文字の装飾・画像の挿入)のツールボタンなどはありません。

もともとWorkFlowyは順番や構成が頻繁に入れ替わる序盤のほうが威力を発揮するツールなので、ある程度の構成が出来たら本来のブログエディタに切り替えたほうがスムーズに書けるでしょう。

エクスポートが不便

一応WorkFlowyにはエクスポート機能はありますが、出力方式は細かく選べないので融通は効きません。

WorkFlowyでエクスポートを使う場合はタイトルの左側にマウスカーソルを持って行き「Export」をクリックします。

エクスポートには3種類ありますが、例えばWordPressのビジュアルエディタに良い感じでコピペできる形式はありませんでした。(無料ブログサービスのエディタに上手く貼り付けできるかどうかまでは調べていません)

自分はエクスポートは使わずに全体の構成がなんとなくできたら、全選択→メモ帳にペースト(書式をリセット)→改行になっている部分に改行を追加して段落にする→WordPressのエディタにコピペ。という手順にしています。

逆にほとんどテキスト中心のブログだったらWorkFlowyでかなり終盤まで書けるだろうからとても相性が良いと思います。

まとめ

みんなもよく知ってるFirefoxアドオンやChrome拡張機能とWorkFlowyを掛け合わせるだけでこんな使い方ができます。

WorkFlowyを使ったことが無いという人はブログ下書きに限らず単純なタスクやメモにも使えるのでおすすめです。

関連:WorkFlowyの使い方とショートカットキーまとめ

スポンサーリンク

このページのシェア・保存はこちら

Amazonでの買い物について

いつもコンビニ払いしている人は、Amazonギフト券をチャージするとポイントが余分にもらえるので、今まで知らなかったという人は読んでみてください。

・キャンペーン中なら初回購入で1000ポイント付与
・チャージする金額によって0.5~2.0%ポイント付与

Amazonギフト券チャージタイプの詳細はこちら

また、プライム会員ならさらに0.5%上乗せされます。

ーーー

プライム会員の特典は「お急ぎ便無料」「プライムビデオで多数の映画やアニメ見放題」が特にお得。それ以外にも音楽・読書の使い放題サービスあり。

料金は年額3,900円(月換算325円)で、世界的に日本だけなぜか破格の安さになっているので、配送・映像・音楽・読書など、一部でもよく利用する人なら非常におすすめです。

プライム会員の詳細はこちら

学生ならPrime Studentがさらにお得

スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

『WorkFlowyをブログエディタとして使う方法|拡張機能「Stylus」で見た目をカスタマイズ』へのコメント

  1. 名前:WorkFlowyを使ってみよう | actidea 投稿日:2015/11/06(金) 21:14:45 ID:2fc3746be 返信

    […] Source: Firefoxアドオン「Stylish」でWorkFlowyをブログエディタにする […]

  2. […] 参考 Firefoxアドオン「Stylish」でWorkFlowyをブログエディタにする […]

  3. […] Firefoxアドオン「Stylish」でWorkFlowyをブログエディタにする […]

  4. […] WorkFlowyにFirefoxやChromeのアドオン「Stylish」を適用してブログエディタとして使う方法 […]

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。