MENU
  1. ホーム
  2. Obsidian
  3. 設定・カスタマイズ
  4. ObsidianのCSSカスタマイズ入門｜見た目を自分好みに変える

ObsidianのCSSカスタマイズ入門｜見た目を自分好みに変える

Obsidian 設定・カスタマイズ

Obsidianはデフォルトのままでも十分使いやすいですが、「フォントを変えたい」「見出しをもっと目立たせたい」と感じることはありませんか？ そんなときに活躍するのがCSSスニペットです。テーマを丸ごと変えなくても、ピンポイントで見た目を調整できます。この記事では、CSSスニペットの基本から実用的なカスタマイズ例まで、初心者にもわかりやすく解説します。

目次

CSSスニペットとは

CSSスニペットとは、Obsidianの見た目を部分的にカスタマイズするための小さなCSSファイルです。テーマとは別に読み込まれるため、テーマを変更しても自分のカスタマイズを維持できるのが大きなメリットです。

たとえば「見出しの色だけ変えたい」「サイドバーの幅を広げたい」といった細かい要望に、テーマの切り替えなしで対応できます。複数のスニペットを用意しておき、必要に応じてオン・オフを切り替えることも可能です。

CSSスニペットの有効化手順

CSSスニペットを使うには、以下の手順で設定します。

1. スニペットフォルダを確認する

Vault内の .obsidian/snippets フォルダがスニペットの格納場所です。フォルダが存在しない場合は、手動で作成してください。

YourVault/
  .obsidian/
    snippets/
      my-style.css   ← ここにCSSファイルを置く

2. CSSファイルを作成する

テキストエディタ（VSCodeやメモ帳など）で .css ファイルを作成し、snippets フォルダに保存します。ファイル名は自由ですが、内容がわかる名前にしておくと管理しやすいです。

3. Obsidianで有効化する

  1. Obsidianの 設定 → 外観 を開きます
  2. 「CSSスニペット」セクションまでスクロールします
  3. フォルダアイコンをクリックすると snippets フォルダが開きます
  4. リロードアイコンをクリックしてスニペットを読み込みます
  5. 表示されたスニペットのトグルをオンにします

これでスニペットが即座に反映されます。

よく使うCSSカスタマイズ例

実際によく使われるカスタマイズをいくつか紹介します。そのまま .css ファイルにコピーして使えます。

フォントの変更

エディタのフォントを変更する例です。お好みのフォント名に書き換えてください。

.markdown-source-view,
.markdown-preview-view {
  font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

見出しの装飾

見出しに色や下線を付けて視認性を高めます。

.markdown-preview-view h2,
.markdown-source-view .HyperMD-header-2 {
  color: #4a90d9;
  border-bottom: 2px solid #4a90d9;
  padding-bottom: 4px;
}

サイドバー幅の調整

ファイルエクスプローラーの幅を広げたいときに使います。

.workspace-split.mod-left-split {
  width: 300px !important;
}

チェックボックスのカラー変更

タスクリストのチェックボックスに色を付けて見やすくします。

input[type="checkbox"]:checked {
  accent-color: #27ae60;
}

.markdown-preview-view li.task-list-item.is-checked {
  color: #888;
  text-decoration: line-through;
}

カスタマイズのデバッグ方法

CSSが期待通りに反映されないときは、開発者ツールを活用しましょう。Ctrl + Shift + I（macOSでは Cmd + Opt + I）で開発者ツールを起動できます。

要素を検証（Inspect）して、どのCSSクラスが適用されているかを確認すれば、正しいセレクタを特定できます。Obsidianのアップデートでクラス名が変わることもあるため、うまく動かないときはまず開発者ツールで確認する癖を付けておくと便利です。

CSSスニペットを使う際の注意点

CSSスニペットは便利ですが、いくつか注意すべき点があります。

  1. テーマとの競合: テーマが同じセレクタを指定している場合、!important を付けないと上書きできないことがあります。ただし !important の多用は保守性を下げるため、必要最小限にとどめましょう。
  2. アップデートによる変更: Obsidian本体のアップデートでHTML構造やクラス名が変わると、スニペットが効かなくなる場合があります。定期的に動作を確認してください。
  3. パフォーマンスへの影響: スニペット数が極端に多いと読み込みに影響が出る可能性があります。不要になったスニペットはオフにするか削除しましょう。
  4. バックアップ: snippets フォルダはVault内にあるため、Vaultのバックアップを取っていればスニペットも一緒に保存されます。

まとめ

CSSスニペットを使えば、テーマを変えなくてもObsidianの見た目を細かくカスタマイズできます。.obsidian/snippets フォルダにCSSファイルを置いて有効化するだけというシンプルな仕組みなので、CSS初心者でも気軽に試せます。まずはフォント変更や見出し装飾など、小さなカスタマイズから始めてみてください。自分好みのObsidianに仕上げていく過程も、ノートツールを使う楽しみのひとつです。

Obsidian 設定・カスタマイズ
目次