>[!Note]
>[[Obsidian 💎|obsidian]]で利用できる`callout`の種類を増やしたい。
>[[Obsidian Publish]]をよりリッチなサイトにするため
以下の公式のヘルプに記載があったのでその通りに[[CSS]]を実装すれば良さそう。
[Callouts - Obsidian Help](https://help.obsidian.md/Editing+and+formatting/Callouts#Customize+callouts)
```css
.callout[data-callout="custom-question-type"] {
--callout-color: 0, 0, 0;
--callout-icon: lucide-alert-circle;
}
```
名前と[[lucide]]アイコンを指定できるっぽい。
---
`snippets`のフォルダに`custom.css`というファイルを作成し以下のように記述した。
```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`で公開をすれば反映される。
めっちゃ簡単に実装できるので、今後適宜追加していく。