Obsidian スニペット 導入ガイド

このディレクトリは、ObsidianのカスタムCSSスニペットを管理するためのディレクトリです。

目次

1. スニペットとは
2. GitHubからスニペットを導入する方法
3. Obsidianでスニペットを有効にする方法
4. スニペットの管理方法

---

スニペットとは

Obsidianのスニペットは、.cssファイルとして保存されたカスタムスタイルシートです。これらを使用することで、Obsidianの見た目や動作をカスタマイズできます。

• テキスト選択時のハイライト色の変更
• コードブロックのスタイル変更
• フォントや色のカスタマイズ
• その他、CSSで実現可能なあらゆるカスタマイズ

---

GitHubからスニペットを導入する方法

前提条件

• Gitがインストールされていること
• Obsidianのバルト（Vault）のパスが分かっていること

手順

1. .obsidianディレクトリに移動

ターミナルを開き、Obsidianのバルト（Vault）の.obsidianディレクトリに移動します。

cd バルトのパス/.obsidian

重要: .obsidianディレクトリ内で作業を行ってください。ここからsnippetsディレクトリとしてクローンします。

2. GitHubリポジトリをクローン

スニペットが含まれているGitHubリポジトリをクローンします。git cloneコマンドの第2引数にsnippetsを指定することで、.obsidian/snippetsディレクトリとしてクローンされます。

# このリポジトリをクローン（.obsidian/snippetsディレクトリが作成される）
git clone git@github.com:Dingu-suke/obosidian-css_snippets.git snippets

重要: 上記のコマンドを実行すると、.obsidian/snippetsというディレクトリが作成され、その中にCSSファイルが配置されます。これにより、手動でディレクトリを作成したり、ファイルをコピーしたりする必要がありません。

注意事項:

• リポジトリのルートに直接.cssファイルが存在します
• クローン後は.obsidian/snippets/*.cssというパス構造になり、そのままObsidianで使用できます

3. 完了

クローンが完了すると、.obsidian/snippetsディレクトリにCSSファイルが配置されています。追加の作業は不要です。

---

Obsidianでスニペットを有効にする方法

手順

1. Obsidianの設定を開く

1. Obsidianを開きます
2. 左下の⚙️（歯車）アイコンをクリックして「設定」を開きます
3. または、Cmd + ,（Mac）またはCtrl + ,（Windows/Linux）のショートカットキーを使用します

2. スニペット設定に移動

設定画面の左側メニューから「見た目」（Appearance）を選択します。

3. スニペットセクションを確認

「見た目」設定画面を下にスクロールすると、「CSSスニペット」（CSS snippets）セクションがあります。

4. スニペットを有効化

「CSSスニペット」セクションには、.obsidian/snippetsディレクトリ内のすべての.cssファイルが一覧表示されます。

1. 有効にしたいスニペットの横にあるトグルスイッチをオンにします
2. スニペットが即座に適用されます（リロードは不要です）

5. スニペットの確認

スニペットが正しく適用されているか確認するため、Obsidianのエディタでテキストを選択したり、コードブロックを表示したりして、スタイルが変更されているか確認してください。

---

スニペットの管理方法

スニペットファイルの追加

新しい.cssファイルを.obsidian/snippetsディレクトリに追加すると、自動的にObsidianの設定画面に表示されます。

# 新しいスニペットファイルを作成
touch .obsidian/snippets/新しいスニペット名.css

# または、既存のCSSファイルをコピー
cp 既存のスニペット.css .obsidian/snippets/新しいスニペット名.css

スニペットファイルの編集

.obsidian/snippetsディレクトリ内の.cssファイルを直接編集できます。編集後、Obsidianでファイルを保存すると、変更が即座に反映されます。

スニペットファイルの削除

不要になったスニペットは、以下の方法で削除できます：

1. Obsidianの設定から無効化: 設定画面でスニペットのトグルをオフにする
2. ファイルを削除: .obsidian/snippetsディレクトリから.cssファイルを削除する

# ファイルを削除
rm .obsidian/snippets/不要なスニペット名.css

スニペットの更新（GitHubから）

GitHubからクローンしたスニペットを更新する場合：

# .obsidianディレクトリに移動
cd バルトのパス/.obsidian

# snippetsディレクトリに移動
cd snippets

# 最新の変更を取得
git pull origin main

注意: スニペットを更新する場合は、.obsidian/snippetsディレクトリがGitリポジトリとして管理されている必要があります。初回クローン時に.obsidianディレクトリからsnippetsとしてクローンしていれば、そのままgit pullで更新できます。

---

トラブルシューティング

スニペットが表示されない

1. .cssファイルが.obsidian/snippetsディレクトリに正しく配置されているか確認
2. ファイル名に.css拡張子が付いているか確認
3. Obsidianを再起動してみる
4. 設定画面の「見た目」→「CSSスニペット」セクションを確認

スニペットが適用されない

1. スニペットのトグルスイッチがオンになっているか確認
2. CSSの構文エラーがないか確認（ブラウザの開発者ツールで確認可能）
3. 他のスニペットやテーマと競合していないか確認
4. !importantフラグが必要な場合がある

スニペットの競合

複数のスニペットが同じ要素にスタイルを適用している場合、最後に読み込まれたスニペットが優先されます。必要に応じて、CSSの詳細度を調整するか、!importantを使用してください。

---

参考リンク

• Obsidian公式ドキュメント - CSSスニペット
• Obsidian CSSスニペットの例

---

現在のスニペット一覧

このディレクトリに含まれているスニペット：

• selected-string-highlight-green.css - テキスト選択時の背景色を緑色に変更
• code-block-dark.css - コードブロックのダークスタイル