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

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

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

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

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

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

↓Wikipediaから引用。

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

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

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

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

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

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

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

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

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

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

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

子階層がある行には色が付き、見出しになります。通常の階層は本文になり、左側に三角マークで行の始まりを分かりやすくしました。

↓比較のためこちらがWorkFlowy初期状態の見た目。

とくに見出しと本文の見分けが付きやすくなりましたね。

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

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

手順は3つ。

1. WorkFlowyのアカウント作成
2. 「Stylus」をインストール
3. StylusにCSSを設定（←ここが重要）

WorkFlowyのアカウント作成

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

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

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

Stylusをインストール

Chrome拡張機能の「Stylus」をインストールします。

StylusにCSSを設定

StylusにブログエディタのためのCSSを設定します。

↓CSSタグがこちら。

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

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

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

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

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

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

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

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

CSSについて補足

CSSタグの中にコメントを記入しているので、カスタマイズしたい人はいじってください。

Ctrl+B・I・Uは初期状態では太字・斜体・下線になります。先ほどのCSSの中に空っぽの状態であるので、装飾を消したり付け足したり、自由にどうぞ。

見出しは、設定したぶんだけ本文のCSSで打ち消さないといけないため、今回は色だけ変えるようにしています。 「color: #333;」と「font-weight: normal;」が打ち消している部分）。見出しの装飾をいろいろつけたら、本文のCSSが長くなります。

また、見出しは3階層まで作っていますが、それ以上増やすこともたぶんできます。ただし、見出しと本文のCSSの入れ子を増やす必要があるので、かなり煩雑になります。

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

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

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

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

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

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

HTMLタグや画像は使えない

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

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

エクスポートが不便

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

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

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

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

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

まとめ

WorkFlowyは使い方次第でこんな使い方もできるので、ブログを書いている人には、ツールとしてとてもおすすめです。

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