前回の記事で、テキストエディタっぽくDynalistを使っていると紹介した。
今回はその設定を見ていこう。
テーマとCSS
まず標準状態。テーマは「Sepia」を選択している。
ここで「LAYOUT」を「List」から「Article」に変更する。
これで行頭のバレットが取れた。が、このままだと行間が広すぎる。そこでブラウザ拡張の「Stylus」を使ってCSSを上書きする。
.is-compactDensity.is-article-view .Node-self, .is-cozyDensity.is-article-view .Node-self, .is-comfortableDensity.is-article-view .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}
こうすれば行間が縮まる。
さらに右上に常時表示されている検索ボタンとview optionボタンが邪魔なので、ホバーしたときだけ表示するようにする。
.DocumentTools-overlay:not(:hover){
opacity:0;
}
.DocumentTools-icon:not(:hover){
opacity:0;
}
これで邪魔なものはほとんど消えた。いかにもテキストエディタっぽくなる。ちなみに、大きい画面の方の背景色は以下で変更してある。
.DocumentContainer, .AppContainer.is-borderShowing.is-globalSearch .DocumentContainer {
background: whitesmoke ;
background-image: none;
}
この辺はお好みで。
表示に加えて
上記のような設定をすれば、アウトライナーを使っている気分なく、アウトライナーを使うことができる。特にDynalistはいろいろなことができる分、表示されるものも多いので、文章を書く段階ではわりと視覚的重さが発動されてしまう。だからこその、要素の隠蔽だ。
ただし、こう設定しても、項目をホバーしたときに表示されるメニューボタンとズームボタンはいかんともしがたい。これがまた、気になるのである。
なので、解決策は、ホバーさせないこと、つまりマウス操作を極力避けることである。項目の移動やズームに関してはショートカットで操作できる。別の項目に移動させる(move to）もショートカットがある。だから、ある程度操作を覚えてしまえば、マウスを触らなくてもたいていのことはできる。つまり、左側のアイコンを見なくても済む。素晴らしい。
ショートカットの簡単なまとめは以下の記事に書いてあるので、参考にする場合はどうぞ。
Dynalistでよく使うショートカットキー – R-style
▼こんな一冊も：
売り上げランキング: 134,782
