春を呼ぶ若草色。
Cardy (wakakusa)
冬が溶けて春の雨になる。HandyFlowyのおかげでWorkFlowyを使う機会がさらに増えました。やはり便利ですね。アウトラインという別軸が文章作成で意識できる。立体的です。ただ、いつも長い文を書...
WorkFlowyをカード型のメモ帳に変えるスタイルです。渋め和風なメモを目指しました。分割して書くより、カード内に一行ずつ書く。そういう執筆方法が合います。フォントも明朝体で和歌を詠みたくなる。そんなニーズがあるか知らないけれど。
MemoFlowy経由で登録→ http://tinyurl.com/h4f88m3
スタイル解説
Cardyはカスタマイズしてこそ生きてくる。Stylenoteで組み込んでください。CSSが分かりにくいので、覚え書きも兼ねて書いてみました。
#header{background:#552;}
最上段のバーを抹茶色にしています。
#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カードスタイルにしてブログが書きやすくなった。どうやらカード形式からカードの表示を消すと、それがブログになるようです。ベタなままTextwellに出力し、リンクを追加しMarkdownで整えれば出来上がる。これは、僕の頭の中がカードで出来ているのだろうか。