HandyFlowy用カードスタイルのCardy、もう一つ作ってみた

春を呼ぶ若草色。


Cardy (wakakusa)

WorkFlowyをカードスタイルで使うと別アプリみたい Cardy
冬が溶けて春の雨になる。HandyFlowyのおかげでWorkFlowyを使う機会がさらに増えました。やはり便利ですね。アウトラインという別軸が文章作成で意識できる。立体的です。ただ、いつも長い文を書...

WorkFlowyをカード型のメモ帳に変えるスタイルです。渋め和風なメモを目指しました。分割して書くより、カード内に一行ずつ書く。そういう執筆方法が合います。フォントも明朝体で和歌を詠みたくなる。そんなニーズがあるか知らないけれど。

MemoFlowy経由で登録→ http://tinyurl.com/h4f88m3


スタイル解説

Cardyはカスタマイズしてこそ生きてくる。Stylenoteで組み込んでください。CSSが分かりにくいので、覚え書きも兼ねて書いてみました。


#header{background:#552;border:0;}
最上段のバーを抹茶色にしています。

#documentView{background:#eee;}
背景パネルは薄い灰色で。

.page{background:white;border-radius:5px;font-family:Hiragino Mincho ProN;}
本体パネルの背景色をホワイト、フォントを明朝体にしています。

.parent>.name>.content{color:#552;}
パン屑リストは抹茶色。

.project.selected>.name .content{font-size:large;line-height:1.5em;font-weight:bold;}
大見出し。フォントサイズを下げて太字に変えています。

.project.selected>.children>div{background:#eeb;padding:5px;margin:-10px;margin-bottom:20px;border-radius:5px;margin-left:0px;border-right:1px solid gold;border:1px solid #dda;}
子トピックをカード型に変更。下辺余白を長めにすることでカード間の隙間にします。

.project.selected>.children>div>.name .content{font-weight:bold;padding-bottom:7px;}
子トピックの見出しを太字にします。

.contentTag{color:green !important;}
タグの配色はグリーンに。

.contentUnderline{border-bottom:2px blue solid;text-decoration:none;}
アンダーラインは青色に。

.contentBold{border-bottom:2px red solid;}
ボールドに赤い下線も追加。

.contentItalic{background:lime;}
イタリックの背景色にライムを付けてます。

.notes>.content{color:#552 !important;}
ノートの文字色は抹茶色。

.bullet{background-image:none;}
ブレット(・）を消します。

.project.open>.name>.bullet{border:1px #dda solid;border-radius:50%;}
展開されたトピックに◯を付けます。50%を0%にすれば真四角。

.bullet,#bulletBucket .bulletBucketBullet{background:white;border-radius:50%;}
畳まれたトピックには●を付けます。

.children{position:relative;margin:0px;border:0px;}
子トピックの段差余白を0にします。

.selected>.children>.project .project{margin:0px;border-top:1px solid #dda;padding-bottom:3px;}
子トピック間に罫線を引きます。

.project.highlighted::before,.project.moving::before,.project.tapped::before,.draggableNameClone::before{background:none !important;}
トピック移動のエフェクトを無効にします。

#moveDropLine{background:#cc8;}
トピック移動の表示線を焦げ茶色にします。


まとめ

HandyFlowy 1.0
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

カードスタイルにしてブログが書きやすくなった。どうやらカード形式からカードの表示を消すと、それがブログになるようです。ベタなままTextwellに出力し、リンクを追加しMarkdownで整えれば出来上がる。これは、僕の頭の中がカードで出来ているのだろうか。