Obsidanに背景画像を足したい。

皆さんがはメモを取るのにどんなツールを利用していますか？
これまで私は、メモ、リマインダー、カレンダーをそれぞれMacの純正を使ってきました。

しかし、これらを1つのツールにまとめられるということでObsidianを活用しました。

プログラムも書けるし、markdownも使えるし便利です！
使い方の説明は他の方の記事とか見てください

この記事で出来るようになること

１、Obsidianの編集ページと閲覧ページ、さらに全体に背景画像を設置できる！
これで、無機質な壁紙とはおさらば！

できないこと

現状、PCでしか壁紙の設置はできません。
既存のプラグイン（https://github.com/samuelsong70/obsidian-dynamic-background）
を活用すれば、PC,モバイル両方に壁紙を設置できます。(私が作成したプラグインではありません）
しかし今回は、CSSを使って自分で壁紙を設置します。
このほうが細かい設定もできるし、プライベートな画像を壁紙にするのにプラグインを使うのは気が引ける人におすすめです。

手順

１、適当なフォルダに、壁紙に使用したい写真を入れます。
２、python -m http.server 1010　をターミナルで実行
３、http://[::]:1010/　　にアクセス
4、ローカルサーバーが立ち上がり、
このように、フォルダ内にアクセスできるようになる。
５、自分が先ほど作成したフォルダにいくと画像がいる。
6、画像をクリックするとwebページ上に画像が表示される。
7、この画像のURLをコピー（後でCSSで使用）
今回であればこれ　http://[::]:1010/obsidian%20%E5%A3%81%E7%B4%99/IMG_2393.JPG

8、CSSファイルを作成する。


.view-content {
    margin: 0;
    background-image: url('http://localhost:1010/%E5%86%99%E7%9C%9F/37BF9858-F5EE-46BC-A69D-34DF64522457_1_102_o.jpeg');
    background-repeat: repeat; /* 画像をタイル状に繰り返し表示 */
    background-size: 240px 426px; /* タイルのサイズを指定 */
    filter: saturate(0.7); /* 彩度を下げる */
    filter: brightness(0.8); /* 明度を下げる */
  }
  
  body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("http://localhost:1010/%E5%86%99%E7%9C%9F/37BF9858-F5EE-46BC-A69D-34DF64522457_1_102_o.jpeg");
    background-repeat: repeat; /* 画像をタイル状に繰り返し表示 */
    background-size: 240px 426px; /* タイルのサイズを指定 */
    filter: saturate(0.7); /* 彩度を下げる */
    filter: brightness(0.8 ); /* 明度を下げる */
  }

9、作成したCSSは以下の場所に設置する。
9.1 Obsidianを開く
9.2 左したの歯車マークをタップ
9.3 外観をタップ
9.4 外観の一番したのCSSスニペットの横のファイルマークをタップ
9.5 ここにファイル名.css で保存
9.6 ファイルマークの横にある再読み込みボタンを押せばCSSが選択可能
9.7
9.8 選択肢が青くなればOK

Before　After

Before

After

今回は　.view-content と　bodyの両方に同じ画像を使用しましたが、これを変えるとノートの部分の壁紙と、フォルダなどの壁紙は変更できます。
また、今回はタイル状に配置しました。このタイル状も写真のサイズに合わせればより綺麗になります。
もちろんタイル状にせず、1枚の写真で壁紙にすることも可能です。

注意点

CSSに、壁紙にしたい写真のpathを貼り付けても反映されません。
必ず今回のように個人で構わないのでローカルサーバーを立ち上げてください。

また、選んだ壁紙によって、テキストのサイズやフォントを変更してください。
読めなくなります。

今回は画像を壁紙にしましたが、gif画像を自分で作成すれば、１０秒ごとに壁紙を変えることも可能です。色々試してください。

まとめ

今回は、Obsidianでお気にいるの写真を壁紙にする方法を紹介しました。
この方法なら編集画面にも壁紙が設置できるので、試してみてください。

今後時間に余裕があれば、これをプラグインにして、モバイルでも壁紙が設置できるようにしたいです。