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

WorkFlowy

WorkFlowyはアウトラインプロセッサとしては非常に使いやすく一番のおすすめです。

でもブログエディタとして使いたくて試してみたら見出しと本文の階層が同じになって見分けが付かず使い物になりませんでした。

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

スポンサーリンク

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

WorkFlowyは階層構造のあるメモを書くことができて順番を簡単に入れ替えられるのでブログエディタとしてすごい可能性を秘めていると常々思っていました。

でもWorkFlowyは初期設定だとブログ下書きに向いてない部分が結構あるのでそのままだと使い物になりません。

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

↓これがWorkFlowyを素の状態でブログ下書きしてみようとした時の見た目です。

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

これをWorkFlowyの機能はそのままで見た目だけをカスタマイズすることができたらどんなに良いことか妄想が膨らみますよね。

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

(いきなり話が飛びますが)いろいろ試した結果WorkFlowyをブログエディタとして使えるようにした状態がこれです。

見出しと本文の見分けが付いて階層構造が表現できるようになりました。(具体的なやり方は後述します)

↓こちらは最初に作ったスタイル

↓しばらく使って段落間が広すぎるなと思ったのでこんなのも作りました。(この記事の後半に登場します)

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

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

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

こういうことが「Stylish」を使えば実現できます。

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

おおまかに流れを書くと以下のようになります。

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

WorkFlowyのアカウント作成

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

使い方とショートカットキーをまとめた記事にどんなことができるのかまとめているのでWorkFlowyを使ったことが無くて興味がある人はどうぞ。

Stylishをインストール

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

Chrome拡張機能:Stylish – Chrome ウェブストア

Firefoxアドオン:Stylish :: Add-ons for Firefox

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

まずはFirefoxアドオンのStylishのほうから手順を説明していくのでChrome拡張機能のStylishを使う人は次の見出しまで飛ばしてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firefoxと設定が微妙に違うのでChrome拡張機能を使う人はよく読んでおいてくださいね。

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

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

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

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

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

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

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

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

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

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

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

追記です。

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

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

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

Firefox用の新スタイルCSSタグ

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

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

Chrome用の新スタイルCSSタグ

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

WorkFlowy用Stylishのカスタマイズ

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

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

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

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

外側の背景色

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

本文幅・本文左右の余白

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

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

本文レイアウトの設定

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

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

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

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

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

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

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

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

HTMLタグや画像は使えない

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

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

エクスポートが不便

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

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

エクスポートには3種類ありますが残念ながらWordPressのビジュアルエディタに良い感じでコピペできる形式はありません。

自分はエクスポートは使わずに全体の構成がなんとなくできたら1つずつコピペしながらWordPressのエディタで書いています。

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

まとめ

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

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

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

スポンサーリンク

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

『WorkFlowyにFirefoxやChromeのアドオン「Stylish」を適用してブログエディタとして使う方法』へのコメント

  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含むコメントは承認待ちになります)

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