WorkFlowyの見た目をStylishでカスタマイズしてみた

僕はブログのネタをストックしたり記事の下書きをするのにWorkFlowyを利用しています。WorkFlowyはとても便利なのですが、見た目がちょっとイマイチなのが玉に瑕。有料プランに変更することでいくつかのテーマを選択することができるのですが、今は月に500トピック以上作成することがないので、テーマのためだけに有料プランに加入したくはないのです。単に無制限のトピックを利用したいのならば似たようなサービスの「Dynalist」を利用するという方法もありますし。

というわけで、今回は「Stylish」というウェブページの見た目を変更することができる拡張機能でWorkFlowyの見た目をカスタマイズしてみることにしました。

スポンサーリンク
レクタングル(大)

劇的ビフォーアフター!

まずはビフォー。色使いがやや古臭いです。

そしてアフター。スッキリしてイマドキのデザインになりました。

解説

まずはStylishをインストールします。以下のリンクから自分の利用しているブラウザ用のStylishをインストールしてください。

Stylish for SafariStylish for ChromeStylish for FirefoxStylish for Opera

次に、Stylishに設定するCSSを記述します。今回僕が設定したのは次のとおりです。

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
#documentView {
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  letter-spacing: 1px;
  color: #555;
}
body { background-color: transparent; }
.page { border: none; }
.content { padding-bottom: 3px; }

LatoNoto Sans JPというウェブフォントを使用したいので、「@import」で最初にフォントをインポートしておきます。ウェブフォントやフォントの指定方法については次の記事をご参照ください。

【2017年版】これで間違いなし!font-familyのおすすめ設定
【2017年版】これで間違いなし!font-familyのおすすめ設定
このサイトのフォントをおしゃれにしたくて様々なサイトから情報を集め、それぞれのフォント設定のいいとこどりをした設定を行いました。 おすすめの設定はこれだ!…

文字間を少し空けるために「letter-spacing」で1px空けます。

文字色も真っ黒だと古臭い印象を与えるので、灰色に設定します。

次に、背景の灰色を透明にしてコンテンツ部分と一体化させます。

コンテンツ周りの枠線もなしに設定してスッキリとした見た目になりました。

最後に行間を少し空けるために「padding-bottom」で行の下に3px分の空白を設けます。

Stylishの設定画面ではドメインを「workflowy.com」と指定してください。

これで完成です!WorkFlowyでありながらDynalistのようなオシャレさを持った最高のツールになりました。

ここに紹介したのはカスタマイズのほんの一例にすぎません。次に示したウェブサイトでは世界中のユーザーが作成したスタイルを(WorkFlowyに限らず)インストールすることができます。意欲のある方はインストールしたスタイルを自分好みにカスタマイズしてみるのもよいかもしれません。

Restyle the web with Stylish! - userstyles.org
Customize your favorite web sites with Stylish and user styles.
スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
WorkFlowyの見た目をStylishでカスタマイズしてみた
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!