Obsidianに壁紙を貼ってみる

ヤチヨさんに来てもらいました。

壁紙

エディタって壁紙があるほうが可愛いのかもしれない。

壁紙作るのが難儀なんだよなあ。 手軽なのは白紙にワンポイントだろうか。 Web画像をちょちょちょとフリーボードで弄って作ってみました。

wallpaper.css

Gyazoあたりに画像をアップロードしておく。

.view-content{background-image: url("画像のURLアドレス")!important;
  background-size: cover;
  background-repeat: no-repeat;
}

基本はこんな感じ。

cssclasses

ノートを限定したいときはcssclasses。

まずcssを用意します。 名前はなんでもOK。

.wallpaper{background-image: url("画像のURLアドレス")!important;
  background-size: cover;
  background-repeat: no-repeat;
}

そしてプロパティに下記項目を追加します。

cssclasses: wallpaper

すると、そのノートだけ壁紙付きになります。

coverなので、キーボードが消えるとサイズが変わるけど。

CSS Editor

cssの書き換えには CSS Editorを使います。

Import Obsidian: CSS Editor

ツールバーに「CSS Editor: Open quick switcher」を追加します。

cssの新規作成や編集ができるようになります。

cssは隠しフォルダに作られるので、iPadではこのプラグインが必須です。 一度作れば「外観」のCSSスニペットでオン／オフできます。

まとめ

これは壁紙を作るアプリがほしくなるなあ。

追記

画像をワンポイントで置くだけなら下記でもいけました。

.markdown-source-view.cm-focused,.markdown-preview-view{background-image: url("画像のURLアドレス");
  background-size: 120px;
  background-position: righttop;
  background-repeat: no-repeat;
}

右上に画像を置く。

.view-contentだとサイドバーの壁紙にもなるので、 上記のようにソース画面とプレビュー画面を設定するのがいいみたいです。

.cm-focusedは編集対象の指定です。 画面分割するとヤチヨさんが分身するので、それを避けたいとき付けてください。 どの画面が編集中かわかりやすい。