【Obsidian】自分だけのカスタムテーマを作ろう(CSS)

どうも、れいです。

他の人が作ったテーマってとても使いやすいものが多いですが、ほんとにそのテーマで満足していますか？
例えば、見出しの色を自分の好きな色にしたり、背景をもっと暗くしたいな～とか思うことありますよね。

でも完全に自分好みのテーマって、いくら探してもないと思います(決めつけ)。
そんなときは自分で作ればいいのです。

ということで今回は、Obsidianの見た目を自分好みに改造する方法を教えたいと思います。

筆者のプロフィール

• プレイ済ゲーム300以上
• 所持ハード20以上
• PC自作経験とGBASP改造経験
• インディーゲー好き
• デザイン等のクリエイティブなことが好き

よろしくね！
＠れい

下準備

STEP

CSSスニペットをオンにする

設定 > 外観 > 一番下へスクロールし、「CSSスニペット」の項目を探し、トグルをオンにします。

STEP

フォルダのマークを押す

オンにしたら、トグルのすぐ上にあるフォルダのマークを押します。

STEP

CSSファイル作成

するとフォルダが開かれるので、○○.cssのファイルを作成します(○○の名前は自分で決めていい)。

ここで作成した○○.cssが自分のobsidianの見た目をカスタムできるものとなります。

カスタムする方法としては、テキストエディタを使うのが一番いいです。
おすすめはみんな使ってるVSCode(私も使ってる)。

いざカスタム！

Obsidianの見た目を自分でカスタムしたいって思う人なんて、多分テキストエディタの使い方や一通りのCSSの書き込み方は分かっていると思う(偏見)のでその前提で進めて行きますね。

VSCodeから○○.cssを開きます。

あとはこの開いた○○.cssに、Obsidianのどこをカスタムしたいのかを書き込むだけです。

書き込むとはいえCSS変数が分からないと意味がないのですが、Obsidianでも開発者ツールを開くことが出来ます。
Obsidianのウィンドウを選択した状態で、ctrl+Shift+Iを押してみましょう。

すると右側に開発者ツールが出たはずです。
後は簡単。

開発者ツールを選択した状態でctrl+Shift+Cをクリックし、
Obsidian内にマウスを重ねると、Obsidianのどの部分にどういう変数が使われているかが一目瞭然となります。

例えば文字のカラーを変えたいとします。
そのときは以下のコードを○○.cssへコピペしてみてください。

.markdown-source-view.mod-cm6 .cm-line {
  color: red;
}

また、listのカラーはこれで変更できます。

.outliner-plugin-better-lists .list-bullet::after {
  background-color: red;
}

.outliner-plugin-better-lists .list-bullet::after {
  background-color: red;
}

.outliner-plugin-better-lists .list-bullet::after {
  background-color: red;
  margin-right: 20px;
}

VSCodeのウィンドウが選択されている状態でctrl+Sで保存をすると、即座にObsidianに変更が反映されると思います。

こんな感じの流れでカスタムを進めて行きます。

Obsidianのリーディングモードと編集モードとで見え方が異なるので、その辺の見え方にもこだわる人は気を付けてください。

ちなみに以下のサイトでもどういうCSS変数を使っているのか一覧で見ることが出来ますので参考までにどうぞ。

豆知識

プラグインでStyleSettingsというものを入れると、Obsidian上で簡単にダークモードとライトモードを設定することができます。

その他にもCSS変数のカラーをプラグイン上でいじることもできたりするので、CSSを一通り作ったけどコードをいじらずに後でカラーを変えられるようにしたいという方はぜひ使ってみてください。

プラグイン検索画面で「StyleSettings」と入力するだけで出てきます。

まとめ

いかがでしたでしょうか。
この方法で自分だけのObsidianを作り上げてみてください。

今までず～っと他の人が作ったテーマを利用してきたのですが、いまいち一部のデザインが気に入らなかったりしたので、こうして自分の見やすいようにスタイルを変更できるというのは気分が上がりますね。

テキストエディタやCSSについては一切解説していないため、初心者の方にとっては全く意味の分からない内容かと思いますが、要望があればもっと具体的に分かりやすく記事を修正していきたいと思います。

以上、「【Obsidian】見た目(CSS)を自由にカスタムする方法」でした。