RL RanceLee Tutorials
← Tutorialsへ戻る

カスタムCSS：Obsidianを自分好みにカスタマイズ

これまでテーマ設定について説明してきました。テーマをインストールするとObsidianの見た目はかなり良くなります。しかし、テーマを切り替えても「フォントが小さい」「行間が詰まりすぎ」「ノート領域が狭い」など、何かしっくりこないと感じる人は少なくありません。こうした細かい部分はテーマの範囲外です。この章では、CSSスニペットを使って微調整する方法を解説します。

この章で扱う内容は以下の4つです。

  1. CSSとは何か（プログラミング知識がなくても理解できます）
  2. テーマを使っていてもCSSが必要な理由
  3. AIにCSSを書かせる方法（コピペするだけ）
  4. CSSの保存場所と有効化の手順

CSSとは

CSSはCascading Style Sheets（カスケーディングスタイルシート）の略です。専門用語に聞こえますが、核となる考え方はシンプルです。CSSは見た目を制御するルールの集まりです。

例えば：

  • このテキストのフォント、サイズ、色は何にするか？
  • この領域の幅は？余白は？
  • ホバー時の背景色は？

ウェブページで目にする視覚効果のほとんどはCSSで制御されています。Obsidianのインターフェースもウェブ技術（Electron）で作られているため、CSSで見た目を操作できます。

インストールするテーマは、誰かが書いた大きなCSSのパッケージです。CSSスニペットは、自分で追加する小さなCSSの断片で、テーマがカバーしていない部分を微調整するためのものです。

テーマは全体的なスタイル、スニペットは局所的な調整です。両者は競合せず、併用できます。

テーマがあるのにCSSが必要な理由

テーマは「全体的なスタイル」の問題を解決しますが、個人の好みに関する細かい部分はテーマの範囲外です。そもそも、人によって好みが異なるため、テーマにそこまで求めるのは無理があります。

テーマでは対応しきれない、よくあるシチュエーションをいくつか挙げます。

ノート領域が狭すぎる：多くのテーマはデフォルトでノートの最大幅を制限しており、ワイド画面では左右に大きな空白ができ、コンテンツが中央に押し込まれます。このレイアウトを好む人もいれば、無駄に感じる人もいます。

行間が詰まりすぎ／広すぎる：デフォルトの行間が自分にとって快適でない場合、テーマに行間を変更するオプションはありません。

見出しの色が気に入らない：テーマ全体は好きだけど、H1の色が少し明るすぎて暗くしたい。

邪魔なUI要素：例えば、使わないボタンを非表示にしたい。

こうしたニーズは非常に個別的で、人それぞれです。CSSスニペットは、こうした「ラストワンマイル」の問題を解決するために設計されたツールです。

自分で書く必要なし——AIに書かせよう

この章で最も重要なポイントです。CSSを学ぶ必要はまったくありません。AIに書かせればいいのです。

手順はとても簡単。変更したい内容をAIに伝えるだけです。

「ObsidianのCSSスニペットを書いて。ノートコンテンツ領域の最大幅を900pxに設定したい」

「ObsidianのCSSスニペットを書いて。本文の行間を1.8に設定したい」

「ObsidianのCSSスニペットを書いて。H1の色をダークブルーに変更したい」

AIが完全なCSSコードスニペットを生成してくれるので、それをコピーしてそのまま使えます。

AIからより良い結果を得るためのコツをいくつか紹介します。

  1. 「ObsidianのCSSスニペット」と明示する。そうしないと、AIが通常のウェブ用CSSを出力し、変数名が間違っている可能性があります。
  2. AIにコメントを追加してもらう。「各プロパティの横に、その役割を説明するコメントを入れてください」と伝えれば、後でファイルの内容を理解しやすくなります。
  3. 1つのスニペットで1つの変更だけを行う。1つのスニペットファイルに1つの変更をまとめると、デバッグが容易になり、個別にオン／オフを切り替えられます。

会話例：

Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.

AI:
.markdown-source-view, .markdown-reading-view {
  /* Limit the maximum width of the note content area */
  --file-line-width: 900px;
}

これだけです。CSSの構文を理解する必要も、ドキュメントを調べる必要もありません。やりたいことを説明し、コードを取得し、貼り付けて、完了です。

CSSはどこに置く？どうやって有効にする？

CSSスニペットの保存場所は決まっています。以下の手順に従ってください。

ステップ1：スニペットフォルダを見つける

パス：Vaultのルート → .obsidianフォルダ → snippetsフォルダ

.obsidianは隠しフォルダです。MacではCommand + Shift + .で隠しファイルを表示します。snippetsフォルダが存在しない場合は、手動で作成してください。

もちろん、設定から直接アクセスすることもできます。

ステップ2：.cssファイルを作成する

snippetsフォルダ内で新しいテキストファイルを作成し、拡張子を.cssに変更します。ファイル名は自由ですが、note-width.cssやline-height.cssのように、内容がわかる名前を推奨します。AIから得たコードを貼り付けて保存します。

あるいは、このフォルダを開いた状態で、AIに直接CSSファイルをここに作成してもらうこともできます。

ステップ3：Obsidianで有効化する

パス：設定 → 外観 → CSSスニペット

ページ下部までスクロールすると「CSSスニペット」セクションがあります。右側の更新アイコンをクリックすると、作成したファイルがリストに表示されます。ファイル名の横にあるトグルをクリックすると、トグルの色が変わり、スニペットが有効になります。再起動不要で、すぐにインターフェースが変わります。効果が意図したものと違う場合は、トグルをオフにしてコードを確認し直してください。

私自身のCSSの使い方

参考までに、私が実際に使っているスニペットをいくつか紹介します。

ノート領域を広くする – これが最もよく使うものです。ノートコンテンツ領域の最大幅を広く設定し、大画面での余白を減らします。

行間を調整する – デフォルトの行間は私には少し詰まりすぎなので、CSSで少し広げて読みやすくしています。

使わない要素を非表示にする – Obsidianのインターフェースには使わないボタンやアイコンがいくつかあります。CSSでdisplay: noneに設定して非表示にし、インターフェースをすっきりさせています。

Calloutのスタイル調整 – あるテーマのCalloutブロックのデフォルト色が気に入らなかったので、CSSでよりソフトな色に変更しました。

これら4つのスニペットは、それぞれ別の.cssファイルに保存されており、個別にオン／オフを切り替えられます。しばらく使って合わないと感じたら、そのスニペットだけオフにすればよく、互いに干渉しません。

まとめ

今日学んだこと：

  1. CSSはインターフェースの見た目を制御するルールであり、ObsidianではCSSスニペットを使って局所的な調整を行う。
  2. テーマは全体的なスタイル、スニペットは細かい調整——両者は併用できる。
  3. CSSを自分で書く必要はなく、AIに変更したい内容を伝えてコードをコピーする。
  4. スニペットの保存パス：Vaultルート → .obsidian/snippets/ → .cssファイル。
  5. 設定 → 外観 → CSSスニペットで有効化する。

重要なポイント：

  • AIに要件を伝えてCSSを書かせる方が、CSSの構文を自分で学ぶよりはるかに効率的。
  • 1つのスニペットに1つの変更だけを入れることで、管理とデバッグが容易になる。
  • トグルはいつでもオフにでき、安全で元に戻せるので、インターフェースを壊す心配はない。