【Standard Notes】メモ一覧の行間をぎゅっと調整するCSS
この記事では、PCブラウザ版「Standard Notes」のメモ一覧の行間を調整するCSSを書きます。
PCウェブサイト版「Standard Notes」のデフォルトだと、メモ本文の行間は設定から調整できますが、左側サイドバーのリスト一覧の余白は調整できません。
https://www.naporitansushi.com/standard-notes-line-height-ch...
個人的にはちょっと余白が大きいと感じました。もう少しきゅっと詰めてほしいです。
CSSを使うことで自身の環境上のみの反映で調整できます。他人や他のデバイスには一切影響しません。
本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。
拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールしてCSSを書き込み、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。
前提
「Stylebot」などのCSSを適用できる拡張機能を既に導入している前提です。
「Standard Notes」の一覧の余白（間隔）を調整するCSS
スタイルシートを開く
「Standard Notes」にアクセスしてメモページを開きます。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*メモ一覧左側のアイコン余白*/
#notes-scrollable .content-list-item[role="button"]>div:nth-of-type(1) {
padding: 10px 10px 0px 0px;
}
/*メモ一覧のテキスト余白*/
#notes-scrollable .content-list-item[role="button"]>div:nth-of-type(2) {
padding: 4px 0px !important;
}「padding」の数値を調整することで余白具合を変えられます。上記はあくまで僕好みの間隔なので皆さん好きな数値に色々いじってみてください。
一つ目の「padding」は数字が4つあります。上、右、下、左の余白具合です。
二つ目の「padding」は数字が2つで上下、左右の余白具合です。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
間隔が縮まったか確認する
再度拡張機能ボタンを押して、登録したサイト（例：app.standardnotes.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
メモ一覧の余白がぎゅっと縮まります。一ページに表示される情報量が増えます。
比較画像を貼っておきます。
一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「x.com、www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、PCブラウザ版「Standard Notes」のメモ一覧の行間を調整するCSSでした。
CSSを使うことでフォントも変えられます。
