サービス PR

●ブログの下書きや原稿執筆にWorkflowyのnote機能を用いたい方向け、フォントサイズの設定を変更する方法 ●Workflowyで100行分が無料使用できる招待コードもこちらから

記事内に商品プロモーションを含む場合があります

Workflowyというアウトライナーを思考の整理空間として重宝している。それ以外にもtodo管理やちょっとしたメモ、各種原稿の下書きなど活用は多岐にわたる。

原稿やブログの下書きをしているときに、note機能に直接原稿を入力することができればエディタライクに使えて便利だと思ったのだが、フォントサイズが小さい。また、標準の設定ではサイズを変更することもできなかったので、cssを変更して対応することにした。

※フォントサイズ変更前(標準)

※フォントサイズ変更後(18ポイント)

上記のようにnoteのフォントサイズを変更するだけで、エディタ感が増して執筆の没入感が高まる。以下に設定方法を記すのでぜひ試してみていただきたい。

Workflowyのnoteのフォントサイズを変更する手順

1.Chrome/Edge で「Stylus」拡張を入れる
Stylus – Chrome Web Store

2.Workflowyを開いて、Stylusの「このURLにスタイルを作成」をクリック

3.[ドメイン上のURL]を選んでworkflowy.comと入力

4.下記のcssを入力する

5.「保存」を押すのを忘れないこと

Workflowyのnoteのフォントサイズを変更するcss

下記のまま貼り付けてください

/* ノート(メモ)だけ拡大 */
.notes,
.notes *,
.notesText,
div[class=”notes”], [data-testid=”notes”], [role=”textbox”][data-type=”note”], [contenteditable=”true”][data-type=”note”] { font-size: 18px !important; / 好みで調整 */
line-height: 1.8 !important;
font-family: “Noto Sans JP”, system-ui, -apple-system, “Segoe UI”, Roboto,
“Hiragino Kaku Gothic ProN”, “Yu Gothic UI”, “Yu Gothic”,
sans-serif !important;
}

本当はもっとシンプルな設定でいけるはずだが、環境によって左右されるので強引にフォントに適用する内容にしておいた。

コードを入力する画面がこのようになっていれが正解。文字サイズは「好みで調整」のところで変更できるようにしてあるので、任意の数値を入れてみてほしい。

なお
https://workflowy.com/invite/3a783386.lnx
が招待コードになる。このリンクを踏んでworkflowyに登録していただくと、無料アカウントでも100行分のボーナスがもらえるので是非(※私も貰えますありがとう)