Obsidianの見た目カスタマイズ

Obsidianには標準で見た目をカスタマイズする機能が備わっています。
大きく下記の2つ

• テーマ設定
• CSS snippets

テーマ設定は見た目全体をごっそり入れ替える機能です。
具体的にはThemes@公式サイトを参照して下さい。

CSS snipetsは全体的なテーマはそのままで、細かいカスタマイズを行う機能です。
こちらもやり方はCSS snippets@公式サイトを参照して下さい。

備考

で、下記はデフォルトのテーマにおいて、
ちょっと気になる点をカスタマイズしたサンプルです。
気になる点とは、単純に見出しヘッダーがぱっと見で区別が付きにくいことです。
少し大きさが違うとかそんなので見分けられる能力なんて持ち合わせてないのでカスタマイズしてます。
（多少の副作用もございますが、ぱっと見の見分けレベル優先です）

before:

after:

コード:

/* ======== 文字サイズとカラーリング ======== */
body {
    --h1-size: 2.1em;
    --h2-size: 1.75em;
    --h3-size: 1.5em;
    --h4-size: 1.2em;
    --h5-size: 1.05em;
    --h6-size: 1.05em;
    --h2-color: #222222;
    --h3-color: #222222;
    --h4-color: #222222;
    --h5-color: #222222;
    --h6-color: #222222;
}

/* ======== 下線つける ======== */
.cm-header.cm-header-1, .markdown-preview-view h1,
.cm-header.cm-header-2, .markdown-preview-view h2 {
  border-bottom: 3px solid #222222; /* 黒、太線 */
}
.cm-header.cm-header-3, .markdown-preview-view h3 {
  border-bottom: 1px solid #222222; /* 黒、細線 */
}
.cm-header.cm-header-4, .markdown-preview-view h4,
.cm-header.cm-header-5, .markdown-preview-view h5,
.cm-header.cm-header-6, .markdown-preview-view h6 {
  border-bottom: 1px solid #999999; /* 灰、細線 */
}

/* ======== 行頭にアイコンつける ======== */
.cm-header.cm-header-1::before, .markdown-preview-view h1::before {
    content: ""; /* ページ先頭なのでアイコンなし */
}
.cm-header.cm-header-2::before, .markdown-preview-view h2::before {
    content: "◆ "; /* ページ内の章見出し */
}
.cm-header.cm-header-3::before, .markdown-preview-view h3::before {
    content: "○ "; /* 章内の節見出し */
}
.cm-header.cm-header-4::before, .markdown-preview-view h4::before {
    content: "? "; /* 節内の補足的まとめの見出し */
}
.cm-header.cm-header-5::before, .markdown-preview-view h5::before {
    content: "? "; /* 区切り的な目印、任意の見出し内 */
}
.cm-header.cm-header-6::before, .markdown-preview-view h6::before {
    content: "♯"; /* 注釈・コメント、任意の見出し内 */
}

/* ======== 見出しの下にちょっと余白追加 ======== */
.cm-s-obsidian .cm-line.HyperMD-header {
  margin-bottom: 0.1em !important;
}