Zenn
Open12

ObsidianのCSSスニペットを書いた

Obsidian
ピン留めされたアイテム
cat2151cat2151

はじめに

Obsidian、見た目をよくする素晴らしいテーマがいっぱいで楽しいですね！
そして思うのが「このテーマ、ここがこうなってれば自分にとっては助かるんだけど…」。
そういうわけで、CSSスニペット機能で、テーマを部分的に変更し、カスタマイズしていきます。

前提

CSSスニペットを使ってObsidianの見た目を変更するには、
CSSスニペットファイルを .obsidian/snippets/ に配置し、
設定/外観/CSSスニペット にてチェックをONにします。

なお、CSSスニペットファイルを更新すると、自動で見た目に反映されます。
更新から反映までの時間は、手元環境だと7秒でした。

cat2151cat2151

取り消し線

チェック済みタスクリスト（チェックボックス）から
取り消し線を外すには、
以下のCSSスニペットを使えます。

remove-strike-from-checked.css
:is(.markdown-preview-view,.markdown-rendered)  ul>li.task-list-item.is-checked, 
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task] {
  text-decoration: none;
}

効果のわかるテーマは、例えば、デフォルトテーマ。

  • （チェック済みタスクリストの例）
cat2151cat2151

CSSスニペットを書いていく方法

前提知識を得る

公式ページをざっと読んでおきます。
https://publish.obsidian.md/hub/04+-+Guides%2C+Workflows%2C+%26+Courses/Guides/How+to+Style+Obsidian

それから情報集めをしていきます。
まずはぐぐって、アタリをつけます。
ぐぐるキーワードは後述します。

既存テーマを探す

例えば、取り消し線なら、「取り消し線を外してあるテーマ」を見つけます。
例えば、 .obsidian/themes/Blue Topaz/theme.css

検証する

そのテーマの、取り消し線を外しているであろう部分をCSSスニペットに切り出します。
このとき、ぐぐってアタリをつけておいた前提知識が役立ちます。

あとはほしい結果が得られるまで、

  • 仮説を書く
  • コードを書く
  • 検証する
  • 検証結果から仮説を書く
  • 適宜ぐぐって仮説を書く

といったサイクルをまわします。
今回ですと、候補が複数箇所あり、総当りで現実的な時間でやれると予想し、総当たりで2回～5回くらいで成功しました。

ぐぐる例

「チェック済みタスクリストから取り消し線を外す」「つける」等を、
英語にして、obsidian等のキーワードを工夫して、ぐぐります。
例えば obsidian checklist strike remove
見つけたものをヒントにします。
https://forum.obsidian.md/t/how-to-remove-strikethrough-for-checkboxes/5753/13
※このコードは、今は成功しません。おそらくバージョンアップ仕様変更したと予想します。
ですので、あくまで参考にとどめ、
「実際に動くテーマを使って検証する」のが効率的です。

cat2151cat2151

見出しに色をつけるスニペット例（デフォルト系）

どのテーマでも色がつきます。
デフォルトテーマ系（Minimalテーマ系含む）に向きます。
※--color-red 等を使っているテーマに向きます

colorful-headings_default.css
body {
  --h1-color: var(--color-red, var(--red, red));
  --h2-color: var(--color-orange, var(--orange, orange));
  --h3-color: var(--color-yellow, var(--yellow, yellow));
  --h4-color: var(--color-green, var(--green, green));
  --h5-color: var(--color-blue, var(--blue, blue));
  --h6-color: var(--color-purple, var(--purple, purple));
}

.markdown-preview-section h1,
.cm-header-1 {
  color: var(--h1-color) !important;
}

.markdown-preview-section h2,
.cm-header-2 {
  color: var(--h2-color) !important;
}

.markdown-preview-section h3,
.cm-header-3 {
  color: var(--h3-color) !important;
}

.markdown-preview-section h4,
.cm-header-4 {
  color: var(--h4-color) !important;
}

.markdown-preview-section h5,
.cm-header-5 {
  color: var(--h5-color) !important;
}

.markdown-preview-section h6,
.cm-header-6 {
  color: var(--h6-color) !important;
}
cat2151cat2151

見出しに色をつけるスニペット例（Nord系）

どのテーマでも色がつきます。
Nordテーマ系に向きます。
※--red 等を使っているテーマに向きます

colorful-headings_nord.css
body {
  --h1-color: var(--red, var(--color-red, red));
  --h2-color: var(--orange, var(--color-orange, orange));
  --h3-color: var(--yellow, var(--color-yellow, yellow));
  --h4-color: var(--green, var(--color-green, green));
  --h5-color: var(--blue, var(--color-blue, blue));
  --h6-color: var(--purple, var(--color-purple, purple));
}

.markdown-preview-section h1,
.cm-header-1 {
  color: var(--h1-color) !important;
}

.markdown-preview-section h2,
.cm-header-2 {
  color: var(--h2-color) !important;
}

.markdown-preview-section h3,
.cm-header-3 {
  color: var(--h3-color) !important;
}

.markdown-preview-section h4,
.cm-header-4 {
  color: var(--h4-color) !important;
}

.markdown-preview-section h5,
.cm-header-5 {
  color: var(--h5-color) !important;
}

.markdown-preview-section h6,
.cm-header-6 {
  color: var(--h6-color) !important;
}
cat2151cat2151

見出しに下線をつけるスニペット例

見出しに、同じ色の下線がつきます。
※「見出しに色をつけるCSSスニペット」と併用すれば、
　どのテーマでも見出しに下線がつきます。
　その場合、下線の色はできるだけテーマの色を使うようになっています。

下線の色は、見出し色から背景色へのグラデーションとしています。

border-headings.css
body {
  --border-header-color: var(--background-primary, black);
}

.HyperMD-header-1,
.markdown-preview-view h1 {
  border-bottom: solid 1px var(--h1-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h1-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-2,
.markdown-preview-view h2 {
  border-bottom: solid 1px var(--h2-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h2-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-3,
.markdown-preview-view h3 {
  border-bottom: solid 1px var(--h3-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h3-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-4,
.markdown-preview-view h4 {
  border-bottom: solid 1px var(--h4-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h4-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-5,
.markdown-preview-view h5 {
  border-bottom: solid 1px var(--h5-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h5-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-6,
.markdown-preview-view h6 {
  border-bottom: solid 1px var(--h6-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h6-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}
cat2151cat2151

Dracula Official の見出しに下線をつける

https://github.com/dracula/obsidian
の見出しに下線をつけるためのスニペットです。

Dracula Official の見出しに下線をつけるには、このスニペットと、
見出しに下線をつけるスニペット をあわせて使います。

Dracula-Official-headings.css
body {
  --h1-color: var(--text-title-h1);
  --h2-color: var(--text-title-h2);
  --h3-color: var(--text-title-h3);
  --h4-color: var(--text-title-h4);
  --h5-color: var(--text-title-h5);
  --h6-color: var(--text-title-h6);
}
cat2151cat2151

Draculaは Dracula Official と Dracura for Obsidian があり、フォントサイズが変更できるのは Dracula Official のほう

  • 公式

https://github.com/dracula/obsidian

  • 用途。Draculaなカラーを使いつつ、フォントサイズを変更したいとき用。

  • 参考。一方、ダウンロード数の多いDracula for Obsidianは、開発終了し、Obsidian本体のバージョンアップ仕様変更に対応していないため、現在はフォントサイズが変更できない状態です。

https://github.com/jarodise/Dracula-for-Obsidian.md/issues/17

https://github.com/jarodise/Dracula-for-Obsidian.md/issues/19

cat2151cat2151

インラインコードの色を設定する

  • どのテーマでも、 インラインコード を同じ色で固定できます。
  • 用途。テーマによってインラインコードが標準テキストとほぼ同じ色になって困るとき用です。例えばMinimalがそうです。
colorful-inline-code.css
body {
  --color-inline-code: hsl(60, 60%, 60%);
  --color-inline-code-background: hsl(120, 20%, 20%);
}

.markdown-source-view.mod-cm6 .cm-inline-code {
  color: var(--color-inline-code) !important;
  background-color: var(--color-inline-code-background) !important;
}

.cm-s-obsidian span.cm-inline-code {
  color: var(--color-inline-code);
  background-color: var(--color-inline-code-background);
}
cat2151cat2151

箇条書きやチェックボックスの左の余白を狭くする

  • 対象読者：
    • indentation guideや、折りたたみ時に indicator を表示している人向けです。
  • 知識不足で無理やり書いたので注意。
    • まずは後述の「続き」を読んで、よりスマートな手を試すことをおすすめします。
    • のち、もし「indentation guideや、折りたたみ時の indicator まで変更したい」場合は、
    • こちらのCSSスニペットを使う手があるかもしれません。
/*ライブプレビューのbullet listの左余白を小さくする用*/
.cm-formatting-list-ul, .cm-formatting-list-ol {
    padding-inline-start: 0em;
    /*
    影響範囲：
        この移動によって表示崩れとなるもの
            indent guide → 後述で対応する
            折りたたみ時の indicator → 後述で対応する
        このCSS設定が反映されないもの：
            checkbox
            リーディングビュー
    */
}

/*indent guideをあわせる用*/
.cm-hmd-list-indent {
    margin-left: -0.6em; margin-right: 0.6em;
    /*
    課題：
        DevTools Elements and Stylesでは
            この値は設定されていなかった。
            よってこの手法の妥当性が不明。
    影響範囲：
        このCSS設定が反映されるもの：
            checkboxのindent guide
                その移動によって表示崩れとなるもの：
                    checkbox
                        なぜならcheckboxとindent guideとでズレるため
    */
}

/*checkboxの左余白を、indent guideにあわせる用*/
.task-list-item-checkbox { left: -0.5em; }
.task-list-label { margin: 0em -0.5em; }
/*
    課題：
        DevTools Elements and Stylesでは
            このclassによるCSSは設定されていなかった。
            よってこの手法の妥当性が不明。
*/

/*折りたたみ時の indicator を、bullet listとcheckboxにあわせ左に移動して、見やすくする用*/
.collapse-indicator { left: -1.1em; }
/*
    課題：
        DevTools Elements and Stylesでの調査を省略した。
            よってこの手法の妥当性が不明。
*/