[[Obsidianの外観に求めること]] の要件を満たすテーマがなかなか見つからないため、CSSスニペットを構築することにした。
> [!warning]
> 私は **CSS に詳しくない** ため、誤りが含まれる可能性があります。
> [!note]
> ここに掲載している CSS は、Publish で使っているものとは異なります。
## Obsidian CSS きそちしき
まず基本的なところからざっくり調べてみる。
### CSS変数
Obsidian には、見た目をカスタマイズするための「CSS変数(バリアブル)」が多数存在する。
現在の Obsidian は、できるだけ変数を使うことが推奨されているらしい。
詳しくは [Obsidian Docs](https://docs.obsidian.md/) を参照した方がいい。
> [!note] CSS変数とは
> `--` から始まるやつ。[モジラのドキュメント](https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) にそう書いてあった。
### セレクター
スタイル設定したい要素やクラスを指定するためのもの。
要素やクラスを指定するセレクターは多数存在するが、これは Obsidian 公式ドキュメントは無いっぽい？
開発者ツールやリファレンスでよくチェックした方がいい。
セレクターの基本 ⇒ [基本的な CSS セレクター - ウェブ開発の学習 - MDN](https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)
#### Obsidian でよく使われるセレクターの例
- `.theme-light`, `.theme-dark`: ライトテーマとダークテーマ
- `.HyperMD-header-1`
- `.markdown-preview-view`
### 要素とクラスの違い
要素はHTMLのタグ名そのものを指す。
クラスは、要素を任意の名前でグループ化したやつの事を言う。
#### セレクターでの指定方法の違い
- **要素:** HTML要素名(タグ名)をそのまま記述する。例: `p {}`
- **クラス:** 先頭にドットを付ける。例: `.text-red {}`
- この二つは組み合わせられて、AND条件で指定ができる。例: `p.highlight {}`
- 複数の要素やクラスをまとめて指定もできる。カンマで区切るとOR指定になる。例: `h1, h2, .main-title {}`
- ○○の中(子) を指定する場合は、 `親 子` のようにスペースで区切る。例: `.markdown-rendered h1 {}`
- ○○直属の子、を指定する場合は、スペースではなく `>` で区切る必要がある。
## 作ったもの
[[Alternative Checkboxes]] 以外は対応できた。
Alternative Checkboxes は自力で実装が難しいので、既製品をありがたく使わせていただく。
⇒ [GitHub - damiankorcz/Alternative-Checkboxes-Reference-Set](https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set)
`MyCustom.css`
```css
/**
* 自分用 Obsidian 外観のカスタマイズ
* 2026-09-07
*/
/**
* イタリック体を若干薄くする。
*/
.theme-light,
.theme-dark {
--italic-color: var(--text-muted);
}
/**
* Web参照している画像を見分けられるようにする。
* ローカル画像はそのまま表示し、Web画像は点線で囲む。
*
* PC版は直接画像ファイル名が指定されてるので「`http` で始まってない」で判別できるが
* Android は `http://localhost` 指定でアクセスしてるっぽいので、
* 明示的に弾く必要がある。
*
* iOS は。。。分かりません (^q^)
*/
.image-embed img[src^="http"]:not([src*="localhost"]),
.markdown-reading-view img[src^="http"]:not([src*="localhost"]) {
outline: 3px dashed dodgerblue;
}
/**
* 見出しの色と大きさを調整する。
* (面倒なので、普段使いのライトテーマのみ)
*/
.theme-light {
--h2-size: 1.5rem;
--h3-size: 1.3rem;
--h3-color: dodgerblue;
--h4-size: 1.1rem;
--h4-color: orange;
--h5-size: 1.0rem;
--h5-color: gray;
--h6-size: 1.0rem;
--h6-color: lightgray;
}
/**
* チェックボックスのカスタマイズ (完了時の見た目をカスタマイズ)
*/
.theme-light,
.theme-dark {
/* チェック済ボックスに取り消し線を引かない */
--checklist-done-decoration: none;
/* チェック済ボックスの文字を薄くする (Thingsと同じカスタマイズ) */
--checklist-done-color: var(--text-faint);
}
/**
* 見出しボーダー (変数が無いのでCSSで直接指定)
*/
.theme-light .HyperMD-header-1,
.theme-light .markdown-preview-view h1 {
border-bottom: solid 1px var(--text-normal);
}
.theme-light .HyperMD-header-2,
.theme-light .markdown-preview-view h2 {
border-bottom: solid 1px var(--text-faint);
}
/**
* Android 版 Obsidian で太字が反映されない問題への対処。
* デフォルトの太さ指定をさらに太くすることで解決してるっぽい？
* 参考: https://qiita.com/WadaTech/items/0a09f578b78f9e18e85a
*/
body {
--bold-modifier: 300;
}
/**
* Publish用カスタマイズ
* `publish` プロパティが `true` の時だけ、背景に色を付ける。
* (一目で公開ノートだと分かるように)
*
* 既知の問題
* `publish` = `true` のノートを埋め込むと、
* 埋め込み先のノートにまで適用されてしまう。
*/
.workspace-leaf:has(.metadata-property[data-property-key="publish"] input[type="checkbox"]:checked) .cm-scroller,
.workspace-leaf:has(.metadata-property[data-property-key="publish"] input[type="checkbox"]:checked) .markdown-reading-view .markdown-preview-view {
background-color: color-mix(in srgb, var(--color-accent), var(--background-primary) 95%);
}
/**
* 代替チェックボックス (Alternate Checkboxes) 対応
* …したかったが、結構長めのCSSを書かないといけないらしいので、既製品を使って対応する。
* これがシンプルで良さそう
* ⇒ https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set
*/
```
## 参考に見た資料など
- [Build a theme - Developer Documentation](https://docs.obsidian.md/Themes/App+themes/Build+a+theme)
- [カスタム CSS スニペットでデザインしよう - Obsidian.Zenn](https://zenn.dev/estra/books/obsidian-dot-zenn/viewer/b-oz-css-snippets)
- [【Android】Obsidianで日本語が太文字にならない件の解決策 - Qiita](https://qiita.com/WadaTech/items/0a09f578b78f9e18e85a)