Obsidian – プレビュー表示変更 – 多岐随感

Obsidian では css snippets を利用してプレビュー表示をカスタマイズできます。絵文字を利用して直感的に分かり易い表示にできます。

CSS snippets

外観(Appearance) > CSSスニペット(CSS snippets) フォルダに、cssファイルを登録し、各ファイルを ON にするとプレビュー表示で適用されます。

タグの絵文字表示

#todo や #meeting は選択し易くするため階層化していますが、そのせいで長いタグ名になっています。以下を CSSスニペットに登録すると絵文字などで簡略表示できます。

.tag[href="#todo/next"]::before {
 font-size: x-large;
 content: '❗️';
}
.tag[href^="#todo/next"] {
 font-size: 0;
 content: none;
}

.tag[href="#todo/delegated"]::before {
 font-size: medium;
 content: '➡️委託';
}
.tag[href="#todo/delegated"] {
 font-size: 0;
 content: none;
}

.tag[href="#todo/done"]::before {
 font-size: x-large;
 content: '☑️';
}

.tag[href="#todo/done"] {
 font-size: 0;
 content: none;
}

リンクの簡略表示

リンクは [[ファイル名|別名]] で簡略表示が可能なので、需要は少ないかもしれませんが、以下を CSSスニペットに登録して強制的に簡略表示させることができます。

.internal-link[data-href="My Name"]::before {
font-size: medium;
content: "自分";
}
.internal-link[data-href="My Name"] {
font-size: 0;
content: none;
}

.internal-link[data-href="My Department"]::before {
font-size: medium;
content: "自部署";
}
.internal-link[data-href="My Department"] {
font-size: 0;
content: none;
}