[Obsidian] CSSとスニペットだけを調べまくったレポート

Obsidianは数々のアップデートを重ね、よりフレキシブルに扱えるアプリに進化しています。
その中でも大きく変化したのがCSSの扱いです。

CSSスニペットなんて項目は元々ありませんでした。
(ちなみにスニペットとは「断片」や「切れ端」という意味の単語)
ひっそりと追加されたこのスニペットによって、Obsidianは簡単・安全に見た目をカスタマイズできるようになったわけですが、その正体は何なのか？

今回の記事は大きく分けて3つのパートで構成されています。

1. CSSスニペットとは何か？ – スニペットの作り方と運用方法 (初心者向け)
2. 編集箇所の指定方法を調べまくったレポート (CSSが書ける方向け)
3. 公開中のスニペットへの外部リンク (記事の前半部分を読んだ方向け)

「CSSとかスニペットとかよく分からんけど、なんとなくObsidianの見た目をカスタマイズしたい」という方は1と3だけ読めば十分な内容となっています。

全体のテーマを変更する

単純にObsidianの見た目を変更するのは簡単です。【設定 > Appearance > Themes】で【Browse】ボタンをクリックすれば、有志が作成したCSSを閲覧できます。

気になるテーマは【Preview】でお試し。パッと見て気に入らなければ【Stop preview】で元に戻せます。
【Use】をクリックすると、そのテーマのCSSファイルが《Vault/.obsidian/themes》に保存され、適用されます。
複数のテーマを【Use】すると設定画面のドロップダウンリストで簡単に切り替えられます。気に入ったテーマはとりあえずUseしておくのもいいでしょう。

スニペットとは何か？

しかしこれだけで完璧！ という場合はほぼありません。そこはやはり他人が作成したCSS。

• フォントが気に入らない
• 文字の大きさが大きすぎる (小さすぎる)

といった基本的なことから、

• リンクの文字色だけなんとかしたい
• コードブロックの背景色を変更したい

など部分的なことまで、不満を挙げたらキリがありません。
しかしそのために、CSSファイルを1から作成するのはどう考えても面倒です。

選んだテーマファイルを直接編集する？ それもいいですが、テーマを変更した場合はどうでしょう？
また一から同じことを別のファイルに書き込むハメになります。

そこで考えられる最も効率的な手段は、

1. 大まかなデザインは他人に任せる (ThemesでUse)
2. 気になる部分だけ別ファイルで修正する
3. そのファイルで大まかなデザインを部分的に上書きする

ことです。こうすることによって、大まかなデザインを変更したとしても、自分好みの設定は同じものをそのまま引き継ぐことができます。

今回の本題である『スニペット』とは、まさにこの青い部分です。

スニペットを作成 / 編集する

それでは実際にスニペットを作成していきます。例として“Obsdn Dark Rmx”というテーマを有効化した状態を基準としましょう。
配色は爽やかでいい感じですが、いかんせん僕には文字が小さすぎる。

この文字をもう少し見やすくしてみましょう。

ファイルを作成する

最初に空のファイルを作成します。【設定 > Appearance】の『CSS Snippets』という文字の右側、フォルダアイコンをクリック。

標準の状態だと《Vault/.Obsidian/snippets》が開きます。(僕は事情によりフォルダ名が変更されていますが、気にしないでください)
ここに〇〇.cssという名前でテキストファイルを新規作成。

これがObsidianにスニペットを読み込ませるためのファイルとなります。早速編集していきましょう。

CSSファイルを編集するならテキストエディタ

ファイルは基本的にテキストデータなので、やろうと思えばOS標準のメモ帳でも編集できます。しかし今後色々な編集を試すなら、AtomやVisual Studio Codeなどのいわゆる『テキストエディタ』が圧倒的におすすめ。
カラーやサジェスト機能など、編集を強力にサポートしてくれる機能が当たり前に搭載されているため、作業効率はメモ帳の比ではありません。

慣れていない方は導入に多少苦労しますが、そのコストを払うだけの価値は十分にあります。

ファイルを編集する

ファイルを開いたらこのように記述しましょう。
(font-familyの行はフォント指定なので、不要な場合は削除してください)

/* Obsidianのフォント設定 */

/* 編集画面のフォントとサイズ */
.CodeMirror pre.CodeMirror-line {
    font-size: 18px;
    font-family: UD デジタル 教科書体 NP-B;
}

ファイルを保存したらObsidianで読み込みます。
再び【設定 > Appearance】を開き、作成したファイルが【CSS snippets】にリストアップされているか確認しましょう。無ければフォルダアイコン左側、更新ボタンで出てくるはず。

ファイルが確認できたらチェックボックスをONにします。

この状態でノートを確認してみると、

フォントが大きく、見やすくなりました。(変更されない場合はObsidianを再起動してみてください)

なおスニペットファイルはいくつでも読み込ませることができます。
例えば他人が作成したスニペットをコピペする場合などは、同じ手順で新たに.cssファイルを作成し、そこにペーストして使いましょう。

こうすることでどこに何が記述されているのかが把握しやすくなります。

CSSの記述方法 (セレクタ、プロパティ、値)

ここから先はCSSの知識が多少なりとも必要になりますが、CSSの深いところまでの解説はこの記事では到底不可能です。しかし基本文法に関してはすぐにマスターできるので、ここでご紹介しておきます。

CSSの文法は非常にシンプルです。ほとんど全ての項目は、

1. セレクタ (どこの)
2. プロパティ (何を)
3. 設定値 (どうする？)

で構成されています。

少し乱暴かもしれませんが、記述方法の基本はこれだけです。
これさえ覚えておけば、後は『どこ』に『何』があって、『どうできる』のか？ が分かれば、ご自身で思う存分CSSをカスタマイズできるということになります。
プロパティと値に関しては汎用的なhtmlやCSSの知識なので、外部サイトに譲ることにしましょう。

スタイルシートリファレンス（目的別）

HTMLタグ・スタイルシート・特殊文字等の早見表

www.htmq.com

ついでに優先順位に関してもチェックしておいてください。これもCSSではかなり重要な前提知識です。

スタイルの優先順位－CSSの基本

CSSの基本解説・チュートリアル

www.htmq.com

編集箇所の指定方法を調べまくった

残る問題は『どこ』をどのように指定するかですが、これが非常に厄介。
デベロッパーツール (Win: Ctrl + Shift + i 、Mac: ⌘ + Option + i) で調べることも可能ですが「正直面倒だからやりたくない」という方が大多数でしょう。

ということで私、他人のCSSを漁りまくり、その結果を表に落とし込んでみました。
まだまだObsidianの要素を完全に把握できているわけではありません。しかし文字の大きさや背景色など、簡単な編集であればそこそこ対応可能かと思います。

※ あくまで「細かい部分を自分好みに変更したい」という方向けの資料です。初心者の方はCSSにあまり深入りせず、この後の『公開中のCSSスニペット』をそのままコピペして使ってみることをおすすめします。

編集画面 (テキスト)

編集画面 (その他)

プレビュー画面 (テキスト)

プレビュー画面 (リンク、コード、タグ)

プレビュー画面 (リスト、チェックボックス)

その他

補足: 代表的な擬似クラス

公開中のスニペット

以上のようなセレクターを指定すれば、Obsidianはかなり細かな部分まで見た目を変更できます。
しかしそれにはCSSの知識が不可欠なのは言うまでもありません。

もっとお手軽にカスタマイズしたい！ という方に向けて、現在ネット上に公開されているObsidian用CSSスニペットをいくつかご紹介します。

GitHubリポジトリ

GitHub - deathau/obsidian-snippets

Contribute to deathau/obsidian-snippets development by creating an account on GitHub.

github.com

↑複数のスニペットを作成するdeathau氏のリポジトリ。

obsidian-css-snippets/Snippets/Markers.md at master · Dmytro-Shulha/obsidian-css-snippets

Most common appearance solutions for Obsidian now in a single place. Initially collected by Klaas: - Dmytro-Shulha/obsidian-css-sni...

github.com

↑マークダウンの改行(スペース×2 → Shift + Enter) で改行記号、Tab文字で→を編集画面に表示。

obsidian-css-snippets/Snippets at master · Dmytro-Shulha/obsidian-css-snippets

Most common appearance solutions for Obsidian now in a single place. Initially collected by Klaas: - Dmytro-Shulha/obsidian-css-sni...

github.com

↑とにかく大量のスニペットが掲載されたまとめページ。今回のメイン参考文献。

Obsidian Forum

CSS 'Active Line' Fails When Highlighting Text

This is a minor bug relating to the ‘Active Line’ in CSS. As such, I don’t know of a way to reveal it without a custom CSS, but I thought I would share it anywa...

forum.obsidian.md

↑編集画面の外部リンクがアクティブでないとき、URL部分を🔗に変換するスニペット。最初のコードブロックを丸ごとコピペで。

Obsidian日本語コミュニティに投稿されたスニペット

Reddit - Dive into anything

www.reddit.com

Reddit - Dive into anything

www.reddit.com

Reddit - Dive into anything

www.reddit.com