[Obsidian] Font-Weight を変更する CSS スニペットを作った

Obsidian の CSS スニペット作ってみました。ついつい、フォントを変更する旅に入ってしまい、源ノ角ゴシックを使ったりすることになりました。せっかく Thin な細めのフォントが選択できるのに、Minimal のテーマでは標準的な太さの文字利用を強制されます。

一部の表示だけをカスタマイズする CSSスニペット

この font-weight だけを変更したいなと行き着いたのが CSS スニペットでした。表示部分の一部のカスタマイズであれば、テーマを直接編集することなく、特定のCSSのみを上書きすることのできる機能です。カスタマイズにうるさい Obsidian ならではですね。
そこで、Minimal テーマの通常の font-weight が 400 だったので、font-weight を 100 にしたら、細めの、とても気持ちよい感じになりました。

ただ、細いフォントなので、文字サイズは 17に広げてみました。それにしても、細い書体はかっこいいなぁ。

CSS スニペット なら、テーマが変更されても影響しないので、個別に自分の好きなデザインを維持できます。好きな見た目にでき過ぎるの、本当に素晴らしい。やり方としては、".obsidian/snippets/" 配下に *.css なファイルを作成すれば、Obsidian の設定から、Appealance(外観?) の一番下に ON/OFF スイッチがつきます。

今回の内容はこれだけです。

body {
  --normal-weight:100;
}

ただ、そのままだと、リンクのアンダーライン付きの部分が読みにくかったので、太めというかノーマルの太さのフォントへ変更してみました。

span.cm-underline {
  font-weight:400;
}

ああ、素晴らしい。

ちなみになんですけれども、ファイルを直接変更するとすぐに反映されます。なお素晴らしい。 ちょっと気に入らないな、とファイルを何度も編集しても煩わしさがありません。

body {
  --normal-weight:100;
}

span.cm-underline {
  font-weight:400;
}

参考にしたサイト

フォント周りのCSS

Obsidian Snippets

CSS の名前を探すには

Obsidian の CSSカスタマイズ