Workflowyで文章を書くことが多くなったので、自分なりに使いやすいようにしたいと思ったので挑戦してみました。自分には、CSSの知識がないので、よく分からない所があります。
WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ！
http://cyblog.jp/modules/weblogs/18812このシゴタノのHPでstylishという拡張アプリを使うことで、装飾が可能だということが分かりました。こちらではテンプレートをインストールして、その中身を一旦消してCSSの例をコピペして使ってみるというやり方が紹介されています。
Stylish - Chrome ウェブストア
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja
シゴタノのHPの手順に従って、一番上にあるテンプレート（clean and bright）を見た時に、リンクが赤くなるし、タグが緑になって見やすい。これで十分だと思いましたが、「単純作業に心をこめて」の彩郎さんのブログを読んでいたので、三色ボールペン方式も取り入れてみたいなと欲が出てしまいました。
改・WorkFlowyで「三色ボールペン方式」
http://www.tjsg-kokoro.com/2015/07/27/kai-3colors/はじめは、改に書かれたCSSをコピーしてみました。下線（command+U）で青、斜体（command+I）が赤、太字（command+B）が緑のハイライトという構成です。ショートカットキーを使用する時に赤と青は近いからということで、このような構成になっています。
ただ、何度やっても太字が表示されず、やっている内に斜体が緑になってしまってパニックでした。しばらく時間がたってからChromeとfirefoxの違いだからこうなってしまうということになってしまったと気づきました。
WorkFlowyで「三色ボールペン方式」
http://www.tjsg-kokoro.com/2015/07/21/workflowy-3colors/
改がついていない方のやり方でやってみると成功しました。下線（command+U）で青、斜体（command+I）が緑のハイライト、太字（command+B）が赤です。改の方のようにキーボードのショートカットの割当を変えられないか色を変えてみましたが、うまくいきませんでした。改がない方の割当のキーボードですが成功しましたので、このまま使いたいと思います。
リンクとタグの色を装飾するものと組み合わせて、コピペしました。ただ、タグの色が緑だったので、紫にしてみました。シゴタノのHPで色見本のHPが紹介されていたので、参考にしながら決めました。
HTMLカラーコード
http://html-color-codes.info/japanese/ここからコピー↓
.contentUnderline{
border-bottom: 2px #0000FF solid;
text-decoration:none;
}
.contentBold {
font-weight: normal;
border-bottom: 2px #FF0000 solid;
text-decoration:none;
}
.contentItalic {
font-style: normal;
background-color:#BCF5A9;
text-decoration:none;
}
.content .contentLink {
color: #FF5E00
}
.contentTag {
color: #D610F5 !important;
background: #FFFFFF !important;
}
この画像のような形でカスタマイズしたい場合は上記をコピペして貼ってみてください。
まとめ
ちょっとやってみようと思って始めてみましたが、ここまでくるのにかなり時間がかかりました。おぼろげながら、CSSに触れてみることができたのも貴重な体験です。難しそうだから今まで手をつけていなかったのですが、やってみるというのも大事です。
やったことは、①stylishをインストールする、②テンプレートを選択する、③スタイルの編集でリンクとタグ以外を消去する、④三色ボールペン方式をコピペする、⑤タグの色を変えるということだけでした。
色がついたことで、だいぶ見やすくなりました。パソコンでのworkflowyの作業も捗るのではないかと期待しています。
workflowyについては下記のような記事を書いています。
[読書]Tak.（2015）『アウトラインプロセッシング入門』kindle: pmastyle
http://pmastyle.seesaa.net/article/420419227.html[workflowy]どうしてworkflowyを続けられなかったかを考えた結果、キーボードショートカットを知らなかった。: pmastyle
http://pmastyle.seesaa.net/article/420525586.html[workflowy][iPhone]memo flowyはiPhoneでのworkflowyを促進させるアプリ
http://pmastyle.seesaa.net/article/432066570.htmlこちらから登録すると、あなたと私にさらに２５０line増やして使用することができます。
https://workflowy.com/invite/23d5dd42.lnx
http://pmastyle.seesaa.net/article/432425743.html[workflowy]Chrome版workflowyをstylishを使ってカスタマイズしてみた。
ブログランキングに参加しています。お手数ですが１クリックして頂きますようお願い致します。
にほんブログ村
特別支援教育 ブログランキングへ
facebookページはこちらです。
posted by pmastyle at 17:21
|
Comment(0)
|
TrackBack(0)
|
workflowy
|
|
