Obsidian の CSSカスタマイズ

Obsidian
スポンサーリンク

「Obsidian」のCSSカスタマイズについての記録。

2021年8月:いろいろ追記しました。

2021年12月:Live Preview対応版(0.13系)に未対応のため、折りたたみました。

目次

Obsidianのテーマについて

「Obsidian」では、CSSで作成された「テーマ」を切り替えることで外見を変更できる。

変更は、「設定」ー「外観」ー「コミュニティテーマを開く」ー「使用」で選択できる。なおテーマにはダークテーマとライトテーマの2種類があり、検索もこの種類ごとに行うため注意が必要。

複数のテーマを切り替える場合は、同様に「設定」ー「外観」で取り込み済のテーマを選択するだけで良い。

こうやっていわばサブスクライブしたテーマは、「各保管庫(Vault)/obsidian/themes」に格納されており、いつでも切り替えできるが、ちょっと気に入らないからと言ってここに格納されているCSSファイルを直接弄ってしまうと、テーマを選択した際に上書きされてしまう。

じゃあどうやってカスタマイズするのかの概要を次に述べる。

 

CSSカスタマイズの概要

次のような手順でカスタマイズしていく

  1. CSSファイルを用意し、「各保管庫(Vault)/obsidian/snippets」に格納する
    ※CSSファイルは適当な内容のもの。
  2. Obsidianの設定-外観-CSSファイルをスニペットにCSSファイル名が表示されているのを確認し、オンにする
  3. 適当にCSSを編集し保存すると、ダイナミックにObsidianの表示に反映される

CSSクラス名などの調査方法

  1. Obsidian起動状態で「Ctrl+Shift+I(アイ)」(MacはCommand+)を押してデベロッパーツールを起動する
  2. 左上にあるセレクトツールをクリックしてからObsidianのCSSをいじりたい箇所を選択する
  3. クラス名をコピーし、CSSファイルに変更内容を記述する
  4. CSSファイルを更新すると、ダイナミックにObsidianの表示に反映される

※これではあまりに不便なのでどこかに一覧がないが探しているが、どうも見つからない。

参考)公式サイト情報

Obsidianに関する一週間の最新情報

Obsidian Roundup

モデレーターのひとりEleanor Konikさんが運営するサイト。

ユーザーコミュニティによる議論

Getting comfortable with Obsidian CSS – Share & showcase – Obsidian Forum
https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133

日本語コミュニティ

Obsidian 日本語コミュニティ

Reddit内に解説された非公式日本語コミュニティ & ナレッジベース。

Klaas氏によりまとめられたスニペット

obsidian-css-snippets/Snippets at master · Dmitriy-Shulha/obsidian-css-snippets · GitHub
https://github.com/Dmitriy-Shulha/obsidian-css-snippets/tree/master/Snippets

 

その他のスニペット

 

 

 

行った変更

※Live Preview対応版(0.13系)に非対応なコードです。

Live Preview対応版(0.13系)に非対応なコードです

 

 

私自身は次のようなカスタマイズを行った。

・履歴代わりに記録しておきますが、各自の使用テーマや環境によりこちらの意図通りには動作しない可能性があるため、参照する場合には各自で調整をして下さい。私はライトテーマ使用中です。
・なお手探りでやっているため、CSSクラス名称や指定方法が誤っている場合もあるかと思います。お気付きの際には優しく教えていただけると幸いです

右サイドバー(アウトライン)のサイズ変更

.outline {
font-size: 12px;
line-height: 1.2em;
}

これで文字サイズの縮小と、1行ごとの行高が変更できる。

 

箇条書きの角丸囲みを解除する

※これは私が使っているBlueTopazテーマ特有のものなので他のテーマでは不要。

.theme-light ol > li ,
.theme-light ul > li:not(.task-list-item) {
border: none!important;
box-shadow: none!important;
}

エディタモードでの見出し記号非表示

エディタモードで見出し記号「#」を非表示(折りたたみ解除&行高調整など)にした上で、判別しやすいように前記号「■」を付加する。

#記号非表示
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-header {
display: none;
}
行高など調整
pre > span > span.cm-header-1:nth-child(2) {
color:chocolate;
padding: 5px;
border-bottom: 2px solid lightgray;
text-overflow: ellipsis;
white-space: nowrap;
line-height:2.8em;
margin-bottom: 50px;
}
H1要素に前記号付加
pre > span > span.cm-header-1:nth-child(2)::before {
content:"■";
color:lightcoral;
padding-right:5px;
}

 

引用(blockquote)の背景調整

div:not(.CodeMirror-activeline)>.HyperMD-quote {
border-left: 7px solid lightgray;
}

※背景色を指定すると範囲選択ができなくなる。

 

エディタ部のフォント調整

大きさを変更しメリハリをつける

:root {
--font-size-h1: 30px;
--font-size-edit-normal: 15px;
--font-size-edit-code: 13px;
}

 

コード部の等幅フォント指定

.cm-hmd-codeblock {
font-family:monospace;
line-height:1.1em;
}

 

全体のフォント調整

body{
font-family: "UD デジタル 教科書体 NK-R" ! important;
}

 

タイトルとURLをコピーしました