Obsidianの編集画面に背景画像を貼ってみた

真っ白な紙よりも、挿絵の入った便箋がいい。夏の終わりを描いた水彩画がいい。

海水浴の客がいない砂浜に波が打ちつける。時間がごろんと横たわっている。

そんな浜辺の便箋がいい。

StylePatch.md

一時的にcssを切り替えるスクリプト。

<%*
s = ".view-content{background-image: url('https://ommwriter.com/wp-content/themes/ommwriter_theme/img/JPG/sea_scapes.jpg');background-size: cover;}"
d = document.getElementById("StylePatch")
if(d){
  new Notice("StylePatch off")
  d.remove()
}else{
  new Notice("StylePatch on")
  e = document.createElement("style")
  e.id = "StylePatch"
  document.body.appendChild(e).innerHTML = s
}
%>

画像はOmmWriterのページから借用しているので、著作権的には問題あり。自分用の画像をGyazoにアップして、それを指定するのでお願いします。

使用例

こんな感じ。

ネット上ではプレビューの背景の話はあるのですが、編集画面が見当たりません。

関連ありそうなのを試していたら、ここあたりかなあ。 .view-content をターゲットにすればいいみたい。これだと編集中でもプレビューでも画像を表示できます。

ただ、サイドパネルの背景にも適用されますね。それはそれで楽しいのですけど。

custom.css

カスタムcssに書き込む場合は自己責任でお願いします。

.view-content {
  background-image: url('https://ommwriter.com/wp-content/themes/ommwriter_theme/img/JPG/sea_scapes.jpg');
  background-size: cover;
}

Obsidian mobileの隠しフォルダにアクセスする方法 - Jazzと読書の日々

dataview

dataviewでスタイルを埋め込む方法も使えます。

```dataviewjs
const g = dv.el("style")
g.innerHTML = ".view-content{background-image: url('https://ommwriter.com/wp-content/themes/ommwriter_theme/img/JPG/sea_scapes.jpg');background-size: cover;}"
```

このスクリプトが書き込まれたページを開いたら、それ以降は背景表示されます。