obsidian:フォルダ、ファイルをアイコン表示して見た目を良くしてみる

obsidian

左ペインのフォルダ、ファイルにアイコンを表示する

obsidianの左ペインに表示されている、フォルダ、ファイルにアイコンを表示するcssがありましたので、使ってみました。

https://github.com/kmaasrud/awesome-obsidian
Custom icons differing files and folders

これが、


こうなる。

obsidian.cssに追加する

obsidian.cssはVault(後術)のフォルダに存在しています。

メモ帳などで編集してください。
(.mdファイルでないので、obsidianでは(たぶん)編集できません)

obsidian.cssに追加するコードはこちら。

/* Emoji */
/*.nav-file-title-content::before { content: '🗒 '; }
.nav-folder-title-content::before { content: '📂 '; }*/
/* Flat font /
/ Requires: https://icomoon.io/#icons-icomoon/liga-font */
.nav-folder-children .nav-file-title-content:first-child::before {
content: "\e924  ";
font-family: "IcoMoon-Free";
}
.nav-folder-children .nav-folder-title-content::before {
content: "\e930  ";
font-family: "IcoMoon-Free";
}

アイコンは変更できます

e924 の数字を変えるとアイコンを変更できます。

どんなアイコンが使えるかは、zip内の、Reference.htmlを参考にしてください。

(上の例ではファイルのアイコンをe926に変更しています)

Vaultの場所の確認方法

Vaultというのはobsidianで利用するファイルの格納場所のことです。
どこにファイルがあるのかを確認する方法は次の通りです。

obsidianの左下のこのアイコンをクリック。

Vaultのディレクトリが表示されます。

フォントのダウンロード&インストールが必要

cssを変更しただけだと、なにも起きません。
フォントの追加が必要になります。

こちらからダウンロードしましょう。

フォントのダウンロード

Icon Font & SVG Icon Sets ❍ IcoMoon
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect ico...

次に、フォントをwindowsにインストールします。

フォントのインストール

  1. zipファイルを解凍する
  2. IcoMoon-Free.ttfを右クリックして、インストールをクリック

コメント

タイトルとURLをコピーしました