Quiverのスタイルを変える

前にも紹介したQuiverだが、デフォルトのままだとちょっと見づらい。
というわけで設定で見やすい編集画面にしてみる。

スタイルはCSSで設定

Quiverの編集画面は基本HTMLで出来ているので、スタイルの変更はCSSを編集することで行なう。
このあたり、プログラマ向けのQuiverならではといったところ。

「Quiver」→「Preferences」→「Styles」タブの画面に、
EditorやらPreviewやらの項目の横に「Edit CSS」というボタンがある。

このボタンを押すと編集画面がスライドしてくる。
ちょっと小さいので編集しやすいとは言い難いが、
編集内容は即画面に反映されるので、確認するためにいちいちSaveする必要はない。

Quiver-styles

「Reset」ボタンを押すとデフォルトの設定に戻るので、何かおかしくなったら最初からやり直せる。

ビフォーアフター

CSSで好きなようにスタイルできるので、自分好みに設定すれば良いと思うが、
参考までに自分が設定した画面がこれ。

これがデフォルト(Before)のスタイル。

Quiver-before

そして、これが現在(After)の設定。

Quiver-after

スタイルを変えるとかなり見やすさが変わるので、変更することをお勧めする。

設定例

上のスクリーンショットの設定は、以下になる。
あとは自分好みに変更して欲しい。
なお、下記の設定をEditorのCSSの一番最後に追加する形でペーストする。
もちろんPreviewとかにも応用できる。

body,
.editor {
  font-family: 'Hiragino Kaku Gothic Pro', arial, helvetica, sans-serif;
}

h1 {
  border-top: solid 3px #2a6d9e;
  border-bottom: solid 1px #2a6d9e;
  padding: 6px 10px;
  color: #2a6d9e;
  background-color: #f4f5fb;
  line-height: 1.3em;
  font-size: 22px;
}

h2 {
  color: #fff;
  background-color: #2a6d9e;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.4em;
}

h3 {
  border-left: solid 3px #2a6d9e;
  background-color: #f4f5fb;
  padding: 5px 0 5px 8px;
  line-height: 1.4em;
}

hr {
	background: none;
	border-top: 1px dotted #bbb;
}

コメントする