Obsidian の MOC に紐づけたページを見やすくする

　先日、Obsidian の MOC について取り上げた記事をアップしたところ、そこそこの反響をいただきました。ありがとうございます！

　BlueSky でも記事を読んでくださった方からの反応がございまして、その中にはObsidian の MOC を紐づけたページを表示する際に dataviewjs を使っている人がいらっしゃいました。

Tiramister (@tiramister.net)

　もちろんdataviewjsでもいいんだけど、もう少し簡便に一覧性を高めたいので、ここでは僕の記事で取り上げていた dataview のスニペットを CSS とコールアウトを使って改善してみようと思います。

必要なもの

• Cards.css

  • Minimal テーマの Cards を別のテーマでも使えるようにしたもの

  • Sortable プラグインにも対応している模様

• Dataview のテーブルの高さを制限する CSS（後述）

下準備

　Dataview のテーブルの高さを制限する CSS を作って、snippet フォルダに入れて有効化してください。

.block-language-dataview  {
    display: block;
    max-height: 450px;
    overflow: auto;
}

レシピ

　まず MOC をページに紐づけてから、MOC に以下のコードを貼ってください。

> [!example]- MOC
> 
> ```dataview
> TABLE file.mday AS 更新日
> FROM ""
> WHERE contains(MOC, this.file.link)
> SORT file.mtime DESC
> ```

　それで、cssclasses に cards を設定すると、以下のようなビューが得られます。
　デフォルトでは折りたたみ状態で、dataview テーブルはスクロール可能。

こうなります

参考

Obsidianでギャラリービューを作る方法