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, .markdown-preview-view {
  background-image: url("画像のURLアドレス");
  background-size: 120px;
  background-position: right top;
  background-repeat: no-repeat;
}

右上に画像を置く。

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

追記

Thinoにも出現するので画像サイズを相対的にしました。

.markdown-source-view .cm-focused {
  background-image: url("画像のURLアドレス");
  background-size: 10%;
  background-position: right top;
  background-repeat: no-repeat;
}

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