Dynalistをテキストエディタっぽく使っている設定

前回の記事で、テキストエディタっぽく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

▼こんな一冊も：