📘【Obsidian】アクティブファイルに枠線をつけるCSSスニペット

はじめに

Obsidianで複数のタブを開いて作業していると、どのノートが現在アクティブなのかわからなくなることがある。Limelightというコミュニティプラグインを使えば非アクティブなノートを薄く表示することができるが、プラグインに頼らずCSSスニペットだけでアクティブなファイルに視覚的な強調を加える方法を紹介する。

CSSスニペット

下記のCSSスニペットをObsidianの設定 > 外観 > CSSスニペットに追加する。

.workspace-leaf-content{
    box-sizing: border-box;
    border: 4px solid transparent;
}
.workspace-leaf.mod-active .workspace-leaf-content {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

4pxは枠線の太さ、border-colorは色を指定している。色にはObsidianのアクセントカラー設定を自動的に参照するCSS変数を使用しているため、テーマに合わせて自動調整される。

↑これが

↑こうなる

おわりに

このCSSスニペットは、わずか数行のコードで視認性を大幅に向上させる。プラグインを追加する必要がなく、軽量で動作も安定している。複数のタブを頻繁に切り替える作業では特に威力を発揮するだろう。