Obsidian_css_snippets

# Obsidian スニペット 導入ガイド

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

## 目次

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

---

## スニペットとは

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

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

---

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

### 前提条件

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

### 手順

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

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

```bash
cd バルトのパス/.obsidian
```

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

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

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

```bash
# このリポジトリをクローン（.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の設定画面に表示されます。

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

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

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

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

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

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

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

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

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

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

```bash
# .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スニペット](https://help.obsidian.md/How+to/Add+custom+styles#CSS+snippets)
- [Obsidian CSSスニペットの例](https://forum.obsidian.md/tag/css-themes)

---

## 現在のスニペット一覧

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

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