ObsidianのCalloutの種類を増やす

Note

obsidianで利用できるcalloutの種類を増やしたい。 Obsidian Publishをよりリッチなサイトにするため

以下の公式のヘルプに記載があったのでその通りにCSSを実装すれば良さそう。

Callouts - Obsidian Help

.callout[data-callout="custom-question-type"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-alert-circle;
}

名前とlucideアイコンを指定できるっぽい。

---

snippetsのフォルダにcustom.cssというファイルを作成し以下のように記述した。

/* House Callout */
.callout[data-callout="home"] {
    --callout-color: 34, 139, 34; /* Forest Green */
    --callout-icon: lucide-home;
}
 
/* Thought Callout */
.callout[data-callout="thought"] {
    --callout-color: 70, 130, 180; /* Steel Blue */
    --callout-icon: lucide-brain;
}
 
/* Interest Callout */
.callout[data-callout="interest"] {
    --callout-color: 255, 165, 0; /* Orange */
    --callout-icon: lucide-star;
}

Settings > Appearanceから追加したcssスニペットを有効化する。 あとはこれまで通りの記法でコールアウトを記述するのみ

Home

Home

Thinking

Thoughts

Interest

Interest

またObsidian Publishで利用する場合はVault直下にpublish.cssというファイルを作成し同様にCSSを記載→Publish changesで公開をすれば反映される。

めっちゃ簡単に実装できるので、今後適宜追加していく。