obsidianでCSSを使ってデザインカスタマイズ

戻る
公開日:2024/9/28
obsidianでCSSを使ってデザインカスタマイズ

以前、「Obsidianで“育てる”最強ノート術」という本を読んでから、以降Obsidianを使っています。

Obsidianはマークダウン記法で書ける、メモツールです。個人では無料で使用できます。
もし、パソコン、スマホなど複数の端末で同期して使用したい場合は有料になります。

Obsidian公式サイト

3ヶ月利用してきて、外観をカスタマイズしたくて、コミュニティテーマを色々と探してきたのですが、結果、CSSを使ってのカスタマイズに落ち着いたので、まとめておきます。

カスタマイズ後

やりたかったことは、見出しを目立たせることです。

テーマの設定

「設定」メニュー→「外観」で、テーマを「Minimal」に指定する

同じ設定画面で、下の方にCSSスニペットがあるので、フォルダを開いて、そこに「custom.css」ファイルを作成する。(ファイル名は任意)
custom.cssファイルを開いて、以下のCSSを記述する。
以下のように有効になっていたらOK。

CSS

.HyperMD-header-1,
h1 {
  background-color: #d2e6fa;
  color: #113f6e;
  padding: 20px 0px 20px 10px !important;
  border-top: solid 10px #fff;
  border-bottom: solid 10px #fff;
  margin: 0px !important;
}
.HyperMD-header-2,
h2 {
  color: #113f6e;
  border-top: solid 3px #fff;
  border-bottom: solid 3px #113f6e;
  padding-bottom: 10px !important;
  font-size: 20px !important;
}

.HyperMD-header-3,
h3 {
  color: #113f6e !important;
  font-weight: bold !important;
  font-size: 16px !important;
  margin-top: 10px !important;
  margin-bottom: 3px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 3px !important;
  margin-left: 3px !important;
  border-top: solid 5px #fff;
  border-left: solid 5px #113f6e;
  border-radius: 5px;
}

strong,
.cm-strong {
  color: #113f6e !important;
}

.cm-highlight,
mark {
  background-color: #c3dcf7 !important;
  color: #113f6e !important;
}

em,
.cm-em {
  color: #113f6e !important;
}

.search-result-file-matched-text {
  background-color: white !important;
}
ul,
.HyperMD-list-line {
  margin: 5px 0 5px 0 !important;
}
戻る