Obsidian の CSSカスタマイズ

「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

その他のスニペット

• 文章中に傍点を表示するスニペット : ObsidianMD_Japanese
• CSSスニペットによるマーカーとアンダーライン : ObsidianMD_Japanese

行った変更

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

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

.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;
}

pre > span > span.cm-header-1:nth-child(2)::before {
content:"■";
color:lightcoral;
padding-right:5px;
}

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;
}