Obsidianの背景に画像を表示してテンションを上げる

Obsidianは、みんな大好きMarkdown対応のノートアプリ。NotionUlyssesなどと同じく、書き散らしたメモを階層化したりタグ付けしたりできるだけでなく、メモ同士を有機的にリンクさせてアイデアの整理や発想の苗床として使えるそうです。よくわからないけどなんか便利そう。

Obsidianで作成したすべてのメモはローカルのPC内にテキストファイルとして保管されており、ある日突然サブスク化して月額料金を徴収するようになったり、サービス終了してデータが消えるような心配がありません。また保管庫(Vault)と呼ばれるフォルダをiCloudに置いたりGithubと連携することで、様々なデバイスでデータを同期して使うことができます。

そんな素敵なObsidianですが、デフォルトのテーマがストイックすぎて個人的に今ひとつテンションが上がらないという、(私にとって)わりと致命的な欠点があります。デフォルトで華やかなカバー画像が多数用意されているNotionに比べると素朴に過ぎるという印象は拭えません。


いくらなんでも地味すぎるデフォルトテーマ

一方でObsidianの場合は気に入らなかったら自分でどうにかしろ、というスタンスをとっており、プラグインなどをぶちこんでユーザーが自由にカスタマイズすることが可能です。

そこで少しでも作業のモチベーションを上げるべく、Obsidianの作業画面に好きな画像を表示してみました。

背景全体に透過する画像を表示する

具体的な手順はこちらで紹介されています。

beingpax.medium.com

1. Style Settings プラグインを入れる

設定 > コミュニティプラグイン > 閲覧 でStyle Settingsというプラグインを探してきてインストールする。プラグインの有効化もお忘れなく。

2. CSS snippets を入れる

上記のリンク先から、obsidian-workspace-background(Shiba Uni Theme).css というファイルをダウンロードして、使用する保管庫内の .obsidian/snippetsフォルダ内に置く。*1

3. CSS snippets の有効化

設定>外観>CSSスニペット の項目から、先ほど入れたobsidian-workspace-background.cssを有効化する。

4. Style Settings のオプションから表示する画像を設定する

画像は作業エリア全体に表示するか、ファイルエクスプローラー部分だけに表示するかを選べます。また、エディタ部分の背景を透過させるかどうかも選択可能です。


デスクトップマスコット的な画像を表示する

こちらのサイトで公開されているCSSを使って、エディタ部分にマスコット画像を表示させることができます。

minerva.mamansoft.net

手順としては、

  1. 公開されているCSSに名前をつけて、.obsidian/snippetsフォルダ内に置く。
  2. 設定>外観>CSSスニペット の項目から、CSSを有効化する。

だけです。


バナー画像を表示する

コミュニティプラグインのBannersを使用することで、Notionのようなバナー画像をノートごとに設定できるようになります。

1. Bannersプラグインを入れる

設定 > コミュニティプラグイン > 閲覧 でBanneresというプラグインを探してきてインストールする。プラグインの有効化もお忘れなく。

2. バナー用の画像を用意する。

プラグインのオプションで、バナー用の画像を入れておくローカルのフォルダを指定。使いたい画像を適当に入れておく。*2

3. Add/Change banner with local image コマンドを使用

コマンドパレットからAdd/Change banner with local imageを指定。

4. バナー用の画像を選択する

先ほどフォルダに入れた画像が選択できるようになっている。

5. 別解

バナー画像のURLをYAMLに直接書き込むこともできます。

---
banner: "https://〜"
banner_y: 0.5
---



これでObsidianでの作業中、いつでも推しやペットの姿を愛でられるようになりました。

Obsidianを使うのが楽しくなって、作業効率が上がるといいですね。

*1:デフォルトだと.obsidianは不可視属性になっている可能性があるので、その場合は「command + shift + ピリオド」で表示するなどしてください

*2:今回のサンプル画像では、アイドルマスター シャイニーカラーズ公式が配布しているTwitterヘッダー名刺を流用しました。