Notionの背景画像にお気に入りの画像を設定する

概要

Notionの背景画像に好きな画像を設定します。
↓設定するとこんな感じ

※当記事ではいらすとやの画像を使用して記載しています。

使用するもの

• Stylus(ブラウザ拡張機能)
  • 特定のサイトに対して独自のCSSを適用できる拡張機能です
  • ご使用のブラウザの物をインストールしてください

• Googleドライブ
  • 画像の保存先として利用します

設定方法

Googleドライブから画像URLを取得する

まず好きな画像をGoogleドライブにアップロードします。
次にアップロードした画像を共有(リンクを知っている全員に共有)状態にします。

リンクをコピーすると以下のようなURLになっているので、

https://drive.google.com/open?id={ID}
https://drive.google.com/file/d/{ID}/view?usp=sharing

{ID}の箇所をコピーして

http://drive.google.com/uc?export=view&id={ID}

としてアクセスするとimgタグCSSのbackground-imageとして使用できるので、
これをStylusのCSSで設定します。

Googleドライブにアップロードした画像をURLで取得する方法は以下の記事を参照させていただきました。

Stylusの設定

Notionのページを開いているときに、ブラウザ拡張機能のアイコンの並びにあるSのマークのStylusをクリックすると、現在開いているURLのどのレベル(開いているページに対してなのか、そのサイト全体に対してなのか)に対してCSSを書くか選択できるので、とりあえずnotion.soを選択します。

選択すると別ウィンドウでCSSを記述する画面が開かれるのでそこに対してCSSを記述していきます。

今回は以下のCSSをそのまま適用すれば表示されますが、他のサイト等で設定したい場合
F12でディベロッパーツールを開いてどの要素に対してCSSを適用したらいいか探りながら設定します。

.notion-frame > div {
   /*↓{ID}の部分は書き換えてください*/
   background-image: url(http://drive.google.com/uc?export=view&id={ID})!important; 
   background-repeat: no-repeat!important;
   background-position: bottom right!important;
   background-size: 20%!important;
   background-color:rgba(255,255,255,0.7)!important;
   background-blend-mode:lighten!important;
}

※background-sizeやbackground-colorの透過等はお好みで調整してください。

TIPS

Stylusでnotion.soに対する設定でなく、次で始まるURLで
スペースごとの設定もできるので、自分のページはこの画像、Aさんから共有されているページは別な画像...といった設定もできます。

他備考等

Googleドライブにわざわざ画像を置かなくてもNotion内に画像を置いてそのURLを拾ってくればいいのでは・・・？と思ってやってみたのですが、どうやらURLの期限が24時間しか無いようなのでそれはできませんでした。
(Googleドライブでなくとも画像をURL化できるサービス等使えば何でも良いです。)

参考：