やったもん勝ち

主にプログラミングのこと。生産性向上の某とかも。

NotebookアプリQuiverのスタイルをCSSでいい感じに変更する。

エンジニア御用達のメモアプリ、Quiver。

オンラインで同期できないことを除けば、今の自分にとって最高のツールです。

メモを見る上で、見やすさはとても重要ですね〜

ということで、QuiverのCSSを変更して、使いやすくしたい。

というか、自分で考えたこのStyleよくない〜?ってのを言いたいだけ (どっかのサイトをベースにしたけど忘れてしまった)

StyleのCSSを設定

f:id:benzenetarou:20170629064158p:plain

Preferance > Styles > Preview

で、CSSを書いていくだけ。

f:id:benzenetarou:20170629064243p:plain

こんな感じでCSSを書き込んでいく。

僕の設定したCSSだとこんな感じになります。f:id:benzenetarou:20170629065559p:plain

割りと気に入ってます。 CSSのコードは以下です。

body,
.editor {
  font-family: 'Hiragino Kaku Gothic Pro', arial, helvetica, sans-serif;
}
 
h1 {
  border: solid 1px #F89174;
  border-top: solid 5px #F89174;
  border-radius: 2px;
  padding: 5px 5px;
  color: #000;
  background-color: #f4f5fb;
  line-height: 1.3em;
  font-size: 30px;
}
 
h2 {
  border-left: solid 5px #F89174;
  border-bottom: solid 3px #DADADA;
  padding: 10px 10px;
  color: #333333;
  background-color: #f4f5fb;
  line-height: 1.3em;
  font-size: 22px;
}
 
h3 {
  border-bottom: solid 2px #F89174;
  
  padding: 10px 10px;
}

h4 {
  border-left: solid 3px #F89174;
  padding: 3px 8px;
}

ちなみに最初の方しばらくはずっとこれを拝借していた。

Quiverのスタイルを変える – IT Nerd Diary

ありがとうございました