Zenn
📌

Obsidianでファイル毎にメタデータやCSSクラスを設定する

2021/08/06に公開
Markdown
YAML
Obsidian
tech

はじめに

Obsidianはリンクなどの機能が充実した無料のMarkdownエディタで、開発のアイディアやコードの仕様をメモするのにとても便利です（使ったことがない人は、ぜひ試してみてください）。

さて、実はObsidianではmdファイル毎にメタデータを設定したり、スタイルを分けることができます。しかしながら、Obsidianのメタデータ（YAML front matter）の仕様[1]や、cssclassを使ったファイル毎のスタイル適応に関して、ほとんど日本語の情報がありません。

この記事ではObsidianのメタデータについて軽く触れるとともに、ファイル毎のスタイルの分け方について共有したいと思います。

この記事をざっくりと

  • ObsidianはYAMLでメタデータが書ける
  • mdファイル毎に違うスタイルを当てることもできる
  • cssclassの注意点とTips

ObsidianではYAMLでメタデータを書ける

ObsidianにはYAML形式[2]を用いたメタデータの設定方法があります。この機能は「YAML front matter」といい、mdファイル毎に個別のメタデータを記述できます。

YAML front matterは以下のように書き、ファイルの先頭に挿入します。

---
aliases: [AI, artificial intelligence]
tags: [TODO, WIP, important]
cssclass: code-page
publish: false
---

メタデータはプレビュー画面にも反映され、上の例だとこのように表示されます。
プレビュー画面での見え方

メタデータの種類と役割

2021年8月現在、Obsidianではaliases, tags, cssclass, publishの4種のキーに対応しています[3][4]。

それぞれのキーには以下のような役割があります。

  • aliases：エイリアスを設定できます。エイリアスを設定すると、例えば「人工知能.md」に対し「AI」や「artificial intelligence」という名前でもリンクを作ることができます[5]。
  • tags：タグを設定できます。タグは検索でき、同じタグがついたファイルを一覧表示できます。
  • cssclass：任意のcssクラスを追加することができます。
  • publish：Obsidian Publishを利用している場合、trueと記述されたファイルは自動で公開され、falseだと非公開になります[6]。

複数の値があるキーの書き方

tagsなど複数の値が代入できるキーは、以下のいずれの書き方でも同じように認識されます。

tags: tag1, tag2
tags: [tag1, tag2]
tags: 
- tag1
- tag2

mdファイル毎にCSSクラスを設定する

ObsidianではカスタムCSSやCSSスニペットを使って、自分でカスタマイズしたスタイルを当てることができます[7]。プレビュー画面はもちろん、編集画面のスタイルの調整も可能です。Markdownの見た目にこだわる人には有難いですね。

ただ、カスタムCSSやCSSスニペットで記述したスタイルは、基本的に保管庫（プロジェクト）全体に適応されます。ファイル毎に違ったスタイルを当てるには、上述のcssclassを使う必要があります。

例えば以下のようにして index.md と code.md に、それぞれ別のCSSクラスを追加したとします。

index.md
#.index-pageクラスが追加される
cssclass: index-page
code.md
#.code-pageクラスが追加される
cssclass: code-page

cssclassで追加されたCSSクラスは、 .markdown-preview-view と同じdivタグに挿入されます。ですので、例えば以下のようにcssに記述すれば、それぞれのmdファイルのh1タグに対し、個別にスタイルを当てることができます。

/* index.mdでは、h1タグの文字色が赤くなります */
.markdown-preview-view.index-page h1{
  color:red;
}

/* code.mdでは、h1タグの文字色が青くなります */
.markdown-preview-view.code-page h1{
  color:blue;
}

/* 擬似クラス「:not」を使う場合には、以下のように書きます */
.markdown-preview-view:not(.code-page) h1{
  color:green;
}

CSSクラスはプレビューにしか反映されない

なお、cssclassで追加されたCSSクラスはプレビューにのみ反映され、編集画面には反映されません。つまり、以下のようなスタイルシートを書いても編集画面の見出しは赤くなりません。

.code-page pre.HyperMD-header-1{
  color:red;
}

複数のCSSクラスを設定する方法

場合によっては1つのmdファイルに、複数のCSSクラスを付与したい場合もあるかと思います。その場合は、cssclassキーの値を以下のように記述することで対応できます。

# こう書くと、.code-pageクラスと、.index-pageクラスが付与されます。
cssclass: [index-page, code-page]

最後に

Obsidianはまだ正式リリース前の段階で、YAML front matterのキーも少しずつ追加されてきているようです。もしかしたら、今後メタデータがより充実するかもしれません。

実際に今後のロードマップ[8]にも「YAML frontmatter improvements」という記載があります。いちユーザーとして、今後Obsidianがどう進化するのか楽しみです。

脚注

  1. 一般的なYAML front matterと比較して、Obsidianではネイティブで対応しているキーが限られています。そのことについて解説している日本語の記事は、記事執筆時点ではほとんどありませんでした。 ↩︎

  2. YAMLとは、CSVやJSON、XMLのようにデータをテキスト形式で記述できるデータ記述言語です。類似した構造を持つJSONよりも、（人間にとって）読み書きしやすいのが特徴です。YAMLについては、フロントエンド・エンジニアのためのYAML入門というページで分かりやすくまとめられています。 ↩︎

  3. Obsidianのヘルプページには、「ネイティブで tags, alias, cssclass の3種のキーに対応」 と書いてありますが、2021年7月のアップデート（v0.12.12）からはpublishも使えるようになりました。もし他に使えるキーがあれば、教えてください。 ↩︎

  4. 実はtags, aliasesは、単数系のtagやalias表記でも大丈夫だったりします。逆にcssclassは、複数形のcssclassesでも動きます。 ↩︎

  5. 出典：Add aliases to note ↩︎

  6. 出典：v0.12.12のリリースノート ↩︎

  7. カスタムCSSについてはこのページ、CSSスニペットについてはこのページが詳しいです。 ↩︎

  8. なんとTrelloでロードマップを公開していますね。Trelloもおすすめのツールです。 ↩︎

Discussion