Obsidianのスタイルを改造する #

更新日 : 2020-11-09

こんにちは。パダワンです。今日も短めの記事をパンと出したいと思います。今日は簡単ですがObsidianのカスタムCSSを改造する方法を紹介します。

Ankiを使っている方は、HTMLとCSSを自分で書いてカードのテンプレートを作成したことがあると思います。なのでAnkiを使ったことがある人はとっつきやすいと思います。かくゆう私もAnkiでHTMLとCSSの基礎を学んびました。Ankiを使いながらHTMLとCSSを学ぶのはかなりおすすめです。

この記事の前提知識としてHTMLとCSSの知識(クラスとプロパティ、DeveloperToolの使い方)の知識が少し必要です。

HTMLとCSSを全く触ったことの無い方にはサイト"サルワカ"がおすすめです。次の2つの記事を見れば今回なにをやってるのか大体わかるようになります。私もお世話になりました。かなり分かりやすいので参考にしてみてください。

0. 全体の流れ #

CSSファイルを改造するにあたっての全体の流れです。全体として6つの工程があります。

準備としてテキストエディタをインストール
Obsidianの設定画面を開き、プラグインの項目から Custom CSS の設定をONにする
Community Themes で好きなテーマを選び、Useを押してCSSファイルをダウンロード
obsidian.cssがつくられるので、別名でそれのバックアップを作る
CSSファイルの中身を知る
Developer Toolで要素を調べる
CSSファイルを調整して実際の表示を確認しながら好きな見た目にする

1. 準備 #

まずObsidianのスタイルシートを改造するにあたって必要なのものがテキストエディタです。VSCodeやAtom等を入れてください。これでCSSのSyntax highlight(コードに色をつけて見やすくする)をすることができます。

ちなみに最近はVS Codeがおすすめらしいです。

2. Custom CSSの設定をONにする #

デフォルトでのスタイルではなく、Custom CSSを改造します。好きなテーマをインストールしてください。

設定の項目からプラグイン > Custom CSS と行き、ONにしてください。

設定1

3. Community Themesで好きなテーマを選ぶ #

Community Themeから好きなテーマを選んでUseボタンをクリックしてください。そうするとobsidian.cssというCSSファイルがVaultのディレクトリに作成されます。

設定2

4. obsidian.cssのバックアップを作る #

obsidian.cssファイルは、Community Themeから新しいテーマを選択してUseするたびに上書きされるので、自分の改造したCSSファイルが上書きされないようにバックアップとしてファイルを複製します

まずは、ターミナルもしくはエクスプローラー/ファインダーからVaultとして選択してあるフォルダを開きます。そうするとそのフォルダ直下にobsidian.cssファイルが見つかります。

選択して、CSSファイルをデフォルトでテキストエディタで開けるように、情報の項目を開きます。デフォルトのappをテキストエディタにします。

設定2 情報設定3 情報

次に隠しフォルダとして.themesという名でCSS専用のフォルダを作成します。その中にobsidian.cssをわかりやすい名前をつけて複製保存してください。

テーマ名_日にち.cssとかで良いです。

これでCSSを改造するための準備が終わりました。今後、改造が終わる度にobsidian.cssの内容をCmd+Aで全選択してコピーし、バックアップファイルにペーストしてください。

5. CSSファイルの中身を知る #

ではobsidian.cssファイルをダブルクリックで開いてみてください。テキストエディタが立ち上がります。

CSSファイルを改造する際にテーマの更新がある場合があるので、どこに何を追加したか変更したかをファイル冒頭なのでにメモしておいてください。バグがあった場合に、テーマの更新をして治すのでその際に、自分の改造した部分がわかるようにしておきます。

コメントアウトして内容等を書いておいてください。

/* 
2020/11/01 
- テキストカラーを変更
*/

5-1. CSSカスタムプロパティ #

複数のテーマで、CSSカスタムプロパティが使われています。 CSSカスタムプロパティは、CSSのプロパティを変数として扱って、色などのプロパティをまとめた場所で管理できるようになります。

参考 : CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN

複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 --main-text-color は #00ff00 より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。

CSSを扱う上ではわかりやすいので、なるべくカスタムプロパティを使っているテーマを選ぶといいです。

おすすめのカスタムCSSテーマ

使い方としては、CSS変数を次のように:root疑似クラスのプロパティとして定義するか、もしくはtheme-lightクラスとtheme-darkクラスのプロパティとして定義します。

:root {
	/* ノードグラフのカラー   */
	--graph-color-fill:red;
	--graph-color-circle:red; 
	--graph-color-line:rgb(126, 126, 126);
	--graph-color-text:red;
	--graph-color-fill-highlight:white;
	--graph-color-line-highlight:rgb(255, 255, 255);
}

.theme-light {
	/* ライトテーマでの色   */
	--graph-color-fill:white;
}
.theme-dark {
	/* ダークテーマでの色  */
	--graph-color-fill:blue;
}

使うときは次のようにCSSのvar()関数の引数としてCSS変数を入れて利用します。

.graph-view.color-fill {
	color:var(--graph-color-fill);
}

参考 : var() - CSS: カスケーディングスタイルシート | MDN

例えば、Obsidianiteのテーマではobsidian.cssファイルの冒頭にこのようにかいてあります。

.theme-dark {
  --background-primary: #100e17;
  --background-primary-alt: #0d0b12;
  --background-secondary: #191621;
  --background-secondary-alt: #0d0b12;
  --text-normal: #bebebe;
  --text-accent: #0db9d7;
~~中略
}

--text-normal:の後の色を#bebebeから例えば#aaaaaaに変更するとvar(-text-normal)で参照されている部分の色が一度に変更されます。この場合はテキストカラーが#aaaaaaに変更されます。

ちなみにこの#aaaaaaというのはHexコードと言います。

参考: 色の分類（HSV・RGB・HEX） | ウェブ制作 | 葛飾区のホームページ制作ワイズ

5-2. 例.ノードグラフの色 #

実際にイジる部分としてはテーマごとでわかりやすくカスタムプロパティで管理してくれている場合は簡単です。そのCSS変数の値を書き換えるだけです。

ですが、そうでない場合は自分で次のようにクラスそのものを書き加える必要があります。

.graph-view.color-fill {
	/* ノードの色   */
	color:var(--graph-color-fill);
}
.graph-view.color-circle {
	/* ノード縁の色   */
	color:var(--graph-color-circle);
}
.graph-view.color-line {
	/* エッジラインの色   */
	color:var(--graph-color-line);
}
.graph-view.color-text {
	/* タイトルテキストの色   */
	color:var(--text-normal);
}
.graph-view.color-fill-highlight {
	/* ノード選択時のノードの色   */
	color: var(--graph-color-fill-highlight);
}
.graph-view.color-line-highlight {
	/* ノード選択時のエッジラインの色   */
	color:var(--graph-color-line-highlight);
}

obsidian.cssファイル内でテキストエディタで Cmd+Fを押して.graph-viewを検索すると出てきます。

無い場合は自分でコードを作成します。こんな感じで色付けがされます。

ノードグラフ

6. Developer Toolで要素を調べる #

この部分の色を変えたいが、どこのcssプロパティをいじればいいのかわからないということがあると思います。

そんなときにDeveloper Toolを使います。 View > Toggle Developer Tools を開く、もしくは Cmd + Alt + Iを押すとDeveloper Toolが開きます。

DeveloperTool

要するにブラウザの検証ツールと同じです。 Obsidian自体がHTMLとCSSでレンダリングされているので、要素をクリックするとその要素のクラスやプロパティがわかるようになっています。

Developer Tool画面の左上の Select an element in the page to inspect it をクリックするとカーソルを合わせて部分のHTML部分をハイライトしてくれます。変えたい部分にカーソルをあわせてクリックしてクラス名とプロパティを調べます。

DeveloperTool

ちなみにapp.cssにすべてのデフォルトのクラス名やプロパティ値が記載されています。Developer ToolのSourceから見ることができます。デフォルト値なので変えない方がいいですね。Custom CSSのファイルobsidian.cssに記載されてないこともあるので、注意してください。app.cssをみればどんなクラスがあるのかがわかります。

app.css

参考: Getting comfortable with Obsidian CSS - Share & showcase - Obsidian Forum

7. CSSファイルを調整して実際の表示を確認しながら好きな見た目にする #

Obsidianを開きながら、テキストエディタでobsidian.cssの変更を保存するとすぐにObsidianのレンダリングが更新されます。

ここでは、参考にいくつか例をあげてCSSコードを紹介します。

7-1. 変更部分の概要 #

基本的にスタイル変更する部分は次の3つのスペースで

UI部分(workspace)
Editor画面
Preview画面

テキストカラー変更

改造しやすいのがEditorとPreview画面ですね。

大雑把な目安として Editorのクラスは.cm-から始まります。 Previewのクラスは.markdown-preview-から始まります。

例えば、# から始まる目次部分の色を変更したい場合はEditor画面なら.cm-header、Preview画面なら.markdown-preview-view h1です。

  /* ========= editor画面の目次 ========= */
  .cm-header {
    color:var(--text-header-color) !important;
  } 
  
  /* ========= preview画面の目次 ========= */
  .markdown-preview-view h1, 
  .markdown-preview-view h2, 
  .markdown-preview-view h3, 
  .markdown-preview-view h4, 
  .markdown-preview-view h5, 
  .markdown-preview-view h6 {
    color:var(--text-header-color);
  }

こんな感じで.cm-header等をcmd+Fで検索してその場所に記載されているコードを変更します。なければ自分で付け足します。

スタイルには優先度があるため、!importantを記載しないと反映されないことがあるので、反映したいときは上のようにカスタムプロパティの後に!importantを記載してください。

参考: CSSでの表現の優先度

7-2. テキストカラーの変更 #

一例としてテキスト装飾の部分のコードを紹介します。

==で囲まれるハイライト
**で囲まれるボールド
*で囲まれるイタリック

の3つに関して色を変更します。

.cm- から始まるのがEditor画面 .markdown-preview- から始まるのがPreview画面のクラスです。下のコードの例では、カンマを使ってEditorとPreviewの対応するクラスをまとめて変更しています。

  /* ========= ハイライトカラーを変更========= */    
  .cm-s-obsidian .cm-highlight,
  .markdown-preview-view mark {
    color: var(--highlight-color-text) !important;
    background-color: var(--highlight-color-background) !important;
  }
  
  /* ========= ボールドに色を追加========= */    
  .cm-s-obsidian .cm-strong,
  .markdown-preview-view strong {
    color: var(--strong-color-text) !important;
  }
  
  /* ========= Preview画面だけボールドのフォントサイズ変更========= */    
  .markdown-preview-view strong {
    font-size: 1.3em;
  }
  
  /* ========= イタリックに色を追加========= */    
  .cm-s-obsidian .cm-em,
  .markdown-preview-view em {
    color: var(--italic-color-text) !important;
  }

カスタムプロパティで実際の色を指定してあげます。

:root {
  --highlight-color-background: rgba(168, 14, 207, 0.56);
  --highlight-color-text: white;
  --strong-color-text:red;
  --italic-color-text:rgb(36, 193, 227);
}

そうすると以下のようになります。

テキストカラー変更

7-3. 選択時のテキストハイライト変更 #

テキストを選択時のハイライトの色を変更をします。

選択時のハイライト

:root {
	--text-selection:red;
}

::selection { background:var(--text-selection); }

7-4. ドラッグゴーストの色を変更 #

タブをドラッグしたときのゴーストの色を変更します。

.mod-drag {
  color: red;
  background-color: red;
} 

.drag-ghost {
  opacity:0.8;
  color: red;
  background-color: red;
}

CSS Common Hacks #

Obsidianの公式Forumでの次のPostでおもしろい投稿があります。 CSSのハック方法が色々記載されています。

Meta Post - Common CSS Hacks - Share & showcase - Obsidian Forum

例えば、Dynalist風にListの表示にBullet pointをつけたりするためのコードなどが紹介されています。

span.cm-formatting-list-ul {
  visibility: hidden !important;
 }
 span.cm-formatting-list-ul:after {
  content: '• ';
  margin-left: -14px;
  color: rgba(123, 108, 214); 
  visibility: visible !important;
 }
/* BULLET POINT RELATIONSHIP LINES */
.cm-hmd-list-indent .cm-tab,
ul ul {
  position: relative;
}
.cm-hmd-list-indent .cm-tab::before {
  left: 0;
  top: -5px;
  bottom: -4px;
}
ul ul::before {
  left: -13px;
  top: 0;
  bottom: 0;
}
.cm-hmd-list-indent .cm-tab,
ol ol {
  position: relative;
}
ol ol::before {
  left: -29px;
  top: 0;
  bottom: 0;
}

bullet point

カーソルをブロックに変更するなど

/* Block Cursor */
.CodeMirror-cursor { 
  border-left-width: 0.5em;
  opacity: 0.75;
  background-color: red;
}

どんどん更新されているのでこまめにチェックしてみるとおもしろいと思います。

☟ Obsidianのカスタマイズについての次の記事です。合わせてお読みください。 SCSS/SASS - ObsidianのスタイルをSCSSで作る| アンキヨリハジメヨ