[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標準のメモ帳でも編集できます。しかし今後色々な編集を試すなら、AtomVisual 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タグ・スタイルシート・特殊文字等の早見表

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

スタイルの優先順位-CSSの基本
CSSの基本解説・チュートリアル

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

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

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

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

編集画面 (テキスト)

場所指定方法
通常の文字.CodeMirror pre.CodeMirror-line
(.cm-s-obsidian でも可能だがテーマによっては反映されない)
見出し全体.cm-header
見出し2を指定.cm-header-2 (数値を変更すれば1~6まで指定可能)
見出しの# (編集時).cm-formatting-header
**強調 (太字)**.cm-s-obsidian .cm-strong
*イタリック (斜体)*.cm-em
打ち消し線 (~~部分).cm-s-obsidian span.cm-formatting-strikethrough
打ち消されたテキスト.cm-s-obsidian span.cm-strikethrough
ハイライト (==部分).cm-s-obsidian span.cm-formatting-highlight
ハイライトされた文字.cm-s-obsidian span.cm-highlight
引用.cm-quote
フロントマターの値部分.cm-s-obsidian .cm-hmd-frontmatter

編集画面 (その他)

場所指定方法
インラインコード.cm-s-obsidian span.cm-inline-code
コードブロック.cm-s-obsidian pre.HyperMD-codeblock
内部リンク.cm-s-obsidian span.cm-hmd-internal-link
外部リンク (名称部分).cm-s-obsidian span.cm-link
外部リンク (URL部分).cm-s-obsidian span.cm-url
タグ 全体 (編集時).cm-s-obsidian .cm-hashtag
タグ #部分 (編集時).cm-s-obsidian span.cm-hashtag-begin
タグ #以外の部分 (編集時).cm-s-obsidian span.cm-hashtag-end
エディタ画面の左右境界線.CodeMirror-lines

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

場所指定方法
見出し(一括設定は無し?)
見出し1を指定.markdown-preview-view h1
**強調 (太字)**.markdown-preview-view strong
*イタリック (斜体)*.markdown-preview-view em
打ち消し線.markdown-preview-view del
ハイライト.markdown-preview-view mark
引用.markdown-preview-view blockquote
選択中のテキスト::selection
水平線.markdown-preview-view hr

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

場所指定方法
内部リンク.markdown-preview-view a.internal-link
外部リンク.markdown-preview-view a.external-link
インラインコード.markdown-preview-view code
コードブロックの背景.markdown-preview-view pre
コードブロックの文字.markdown-preview-view pre code
タグの全体的な見た目.tag
タグ名「complete」を指定.tag[href^="#complete"]
タグのピルボックスa.tag

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

場所指定方法
番号無しリスト 全体ul
番号無しリストの文字ul li
番号なしリストのBulletul li::marker
番号付きリスト 全体ol
番号付きリストの文字ol li
番号付きリストの番号ol li::marker
チェックボックス (テキスト部分).markdown-preview-view .task-list-item
テキスト部分 (チェックされたとき).markdown-preview-view ul > li.task-list-item.is-checked
チェックボックスの□部分input[type=checkbox]
□部分 (チェックされたとき)input[type=checkbox]:checked

その他

場所指定方法
ダークテーマの既定値を設定.theme-dark
ライトテーマの既定値を設定.theme-light
アクティブなノートタイトル.workspace-leaf.mod-active .view-header-title
非アクティブなノートタイトル.view-header-title
ノートタイトルのアイコン.view-header-icon
ファイルエクスプローラ > ファイル名.nav-file-title
ファイルエクスプローラ > フォルダ名.nav-folder-title
ポップアップ プレビューウインドウ.popover.hover-popover
タグペイン > タグの名称部分.tag-pane-tag
タグペイン > 数の表記部分.tag-pane-tag-count
ツールバー (画面左端のリボン).workspace-ribbon.mod-left
画面右端のリボン.workspace-ribbon.mod-right
ステータスバー.status-bar

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

表記意味
:root<html>要素を指す
:not (A)Aセレクターに一致しない要素
:hoverマウスポインタを合わせたとき
:link未訪問のリンク
:visited既に訪問したリンク
:checkedチェックボックスなどがONの状態

公開中のスニペット

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

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

GitHubリポジトリ

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

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

obsidian-css-snippets/Markers.md at master · Dmitriy-Shulha/obsidian-css-snippets
Most common appearance solutions for Obsidian now in a single place. Initially collected by Klaas: - obsidian-css-snippets/Markers....

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

obsidian-css-snippets/Snippets at master · Dmitriy-Shulha/obsidian-css-snippets
Most common appearance solutions for Obsidian now in a single place. Initially collected by Klaas: - obsidian-css-snippets/Snippets...

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

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...

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

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

r/ObsidianMD_Japanese - カスタムCSS スニペット「Card view & Attention pane」
3 votes and 2 comments so far on Reddit
https://www.reddit.com/r/ObsidianMD_Japanese/comments/pb4thb/css%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%A8%E3%82%A2%E3%83%B3%E3%83%80%E3%83%BC%E3%83%A9%E3%82%A4%E3%83%B3/
r/ObsidianMD_Japanese - 文章中に傍点を表示するスニペット
2 votes and 6 comments so far on Reddit
タイトルとURLをコピーしました