AIメモ

Obsidianのテーマを見やすくカスタマイズ！CSS、JSON配布

Posted on by Nyagomi

最近のUIって、ダークモードが主流ですが、実はすごく苦手なんですよね。

なので、いま一番使っている【Obsidian】もライトモードを使っているのですが、これはこれでまぶしくて目がすごく疲れちゃう。

テーマをいろいろ試したけど、テーマによって文字が小さかったり、薄く見えたり、行間が詰まってたりするし、チャット欄なんかは、もっと文字が薄く小さいので、ほんとに目がしんどい。

最終的に「AnuPpuccinテーマ」と、Style Settingsプラグインで色を整えたのですが、あと一歩という感じで使っていました。

とにかく、目がしんどくて、Obsidianのライトモードを自分仕様にカスタマイズすることにしました。

ちなみに、にゃごみ処のメインカラーのグリーンを使っているので、目にめっちゃ優しいです。

とはいえ、Obsidianの本質は、もちろんメモを書くこと、自分の思考を残すこと。

Obsidianのホーム画面を、日付やタスク、リンク集などが一目で分かるように、すごく作り込んでいる方もいらっしゃいますよね。

とても便利だと思うのですが、私は目に入ってくる情報をできるだけシンプルにしたいので、機能を増やすというより、「長く見ていてもしんどくない画面」を重視してカスタマイズしています。

その上で、長時間使う画面が見やすくなると、目の負担は減るし、モチベーションもアップします！（特に、AnuPpuccinテーマのレインボーフォルダは可愛い！）

この記事では、カスタマイズの設定とCSSスニペットを無料で配布しています。

もしよろしければお使いください。（サポートはしておりませんので、ご了承ください）

※ 今回配布するCSSは、ライトモード専用です。
ダークモード用の調整は含まれていません。

Contents
  1. 今回カスタマイズしたライトモード
  2. このカスタマイズが向いている人
  3. はじめに確認しておきたいこと
  4. 配布ファイル
  5. 導入前に設定をバックアップする
  6. 導入手順
  7. うまく表示されないときの確認
  8. 元の設定に戻す方法
  9. 注意：ターミナルを使う場合
  10. 対応していない範囲
  11. サポートについて
  12. まとめ
  13. 配布元とクレジット

今回カスタマイズしたライトモード

まず、カスタマイズ前の状態はこちら

これを、今回のカスタマイズでは、にゃごみ処のメインカラーのグリーンとベージュを中心にした配色にしました。
（ちなみにオンラインショップのメインカラーですw）

主に調整したのは、次の部分です。

  • 本文の文字色、行間、背景色
  • H1〜H6の見出し
  • リンク、引用、ハイライト
  • インラインコードとコードブロック
  • コールアウト
  • 左右のサイドバー
  • タブの表示
  • レインボーフォルダ
  • Claudianのチャット表示

AnuPpuccinテーマと、Style Settingsプラグインで全体の土台を作り、その上にCSSスニペットを重ねています。

AD

このカスタマイズが向いている人

  • Obsidianを使い始めたばかりの人
  • ライトモードを中心に使っている人
  • 文字色や背景色を見やすくしたい人
  • CSSを一から書くのは難しいと感じる人
  • グリーンやベージュ系の落ち着いた画面が好きな人
  • 設定を順番に確認しながら導入したい人

反対に、ダークモードを使いたい場合や、AnuPpuccin以外のテーマを使いたい場合には、この配布セットは対応していません。

はじめに確認しておきたいこと

この配布物は、Obsidian、AnuPpuccin、Style Settingsの公式・公認配布物ではありません。

使用には次のものが必要です。

  • Obsidianデスクトップ版
  • ライトモード
  • AnuPpuccinテーマ
  • Style Settingsプラグイン
  • ObsidianのCSSスニペット機能

AnuPpuccinとStyle Settingsの本体は、配布ファイルに含めていません。Obsidianのテーマ・コミュニティプラグイン画面から、ご自身でインストールしてください。

Obsidian本体、テーマ、プラグインの更新によって、将来表示が変わる場合があります。また、すべてのテーマやコミュニティプラグインには対応していません。

AD

配布ファイル

配布するファイルは、次の4点です。
サポートは含まれませんので、READMEを確認し、現在の設定をバックアップしてからご利用ください。

  • nyagomi-obsidian-ui-light.css
    ObsidianのCSSスニペットとして使うファイルです。本文、見出し、リンク、引用、コード、サイドバーなどの表示を調整しています。「Claudian」の表示も対応しています。
  • style-settings.json
    AnuPpuccinテーマの配色、タブ、レインボーフォルダなどを反映する設定ファイルです。
  • obsidian-ui-check-note.md
    見出し、本文、リンク、コード、引用、コールアウトなどを、1ページで確認するためのノートです。
  • README.md
    導入手順、反映されないときの確認項目、元の設定へ戻す方法をまとめています。

こちらからダウンロードしてください。

nyagomi-obsidian-ui-lightダウンロード

導入前に設定をバックアップする

外観を変更する前に、現在の設定を必ずバックアップしておいてください。

  • 使用中のCSSスニペットがある場合は、ファイルをバックアップする
  • Style Settingsをすでに変更している場合は、Export、Download、コピーなどの方法で現在の設定を保存する
  • すでに外観を細かく変更している場合は、テスト用Vaultで先に試す

元の設定を保存しておけば、今回の表示が合わなかった場合にも戻しやすくなります。

導入手順

1．配布ファイルをダウンロードする

下記から配布のZIPファイルをダウンロードし、展開してください。

2．AnuPpuccinテーマをインストールする

  1. Obsidianの「設定」を開く（設定は左下の ⚙️歯車アイコン）
  2. 「外観」を開く
  3. 「テーマ」の「管理」を開く
  4. AnuPpuccin を検索する
  5. 「インストールして使用」を選ぶ

Obsidianのテーマは自動では更新されません。更新を確認するときは、「外観」のテーマ管理画面を開きます。

3．Style Settingsプラグインをインストールする

  1. Obsidianの「設定」を開く
  2. 「コミュニティプラグイン」を開く
  3. コミュニティプラグインを有効にする
  4. 「閲覧」から Style Settings を検索する
  5. インストールする
  6. インストール後、Style Settingsを有効にする

コミュニティプラグインは、第三者が作成したコードをVault内で動かします。必要なプラグインだけを有効にしてください。

4．style-settings.jsonを読み込む

  1. Obsidianの「設定」から「コミュニティプラグイン」からStyle Settingsを開く
  2. 「Import」→「Import from Files」を選択し、 style-settings.json を読み込む。
  3. AnuPpuccinの配色やレイアウトが変わったことを確認する

Style Settingsの画面表示や項目名は、バージョンによって変わる場合があります。

5．CSSスニペットを有効にする

  1. Obsidianの「設定」を開く
  2. 「外観」を開く
  3. 「CSSスニペット」のフォルダアイコンを押す
  4. 開いたフォルダへ nyagomi-obsidian-ui-light.css を入れる
  5. Obsidianに戻り、CSSスニペットを再読み込みする
  6. nyagomi-obsidian-ui-light を有効にする

通常、CSSスニペットはVault内の設定フォルダにある、次の場所へ保存されます。

.obsidian/snippets/

設定フォルダ名を変更している場合もあるため、Obsidianの「外観」からスニペットフォルダを開く方法が確実です。

6．ライトモードに切り替える

  1. Obsidianの「設定」を開く
  2. 「外観」を開く
  3. ベースカラーをライトモードにする
  4. 背景色や文字色を確認する

このCSSはライトモード専用です。ダークモードでは、文字色や背景色が想定どおりに表示されない場合があります。

7．チェック用ノートで表示を確認する

obsidian-ui-check-note.md をVault内へ入れて開きます。

編集画面と閲覧表示の両方で、次の部分を確認してください。

  • 本文が薄すぎないか
  • 見出しの違いが分かるか
  • リンクを見つけやすいか
  • 引用やコールアウトが強すぎないか
  • コード表示が読みやすいか
  • サイドバーやファイル一覧が見づらくないか

うまく表示されないときの確認

CSSスニペットが一覧に出ない

  • ファイル名が .css で終わっているか
  • Obsidianから開いたスニペットフォルダに入っているか
  • CSSスニペットを再読み込みしたか

CSSを入れても表示が変わらない

  • nyagomi-obsidian-ui-light が有効になっているか
  • ライトモードになっているか
  • AnuPpuccinを使用しているか
  • Style Settingsが有効になっているか
  • style-settings.json を読み込んだか

一部だけ想定と違う

ほかのテーマ、プラグイン、CSSスニペットの影響を受けている場合があります。ほかのCSSスニペットを一時的に無効にし、表示を確認してください。

反映されない場合は、Obsidianの再読み込みも確認します。

元の設定に戻す方法

CSSスニペットだけを無効にする場合は、「設定」→「外観」→「CSSスニペット」から nyagomi-obsidian-ui-light をオフにします。

Style Settingsを元へ戻す場合は、導入前に保存した設定を読み込み直してください。

AnuPpuccinの使用をやめる場合は、「設定」→「外観」→「テーマ」から、Obsidianのデフォルトテーマまたは別のテーマへ変更します。

注意：ターミナルを使う場合

Obsidian内でターミナルを使う場合は、ターミナルやプラグイン側の配色設定が表示に影響することがあります。

CSSを反映したあとに、ターミナルの背景色と文字色が近くなり、文字が見づらくなる場合があります。その場合は、ターミナル側のテーマや配色設定も確認してください。

対応していない範囲

  • ダークモード（今後作成する予定）
  • AnuPpuccin以外のテーマ
  • すべてのコミュニティプラグイン
  • ターミナル表示の個別配色
  • 利用環境ごとの個別調整

サポートについて

この配布物には、導入、設定、不具合調査、個別カスタマイズなどのサポートは含まれません。

利用環境ごとの表示調整や、テーマ・プラグインとの競合確認には対応していません。導入前に現在の設定をバックアップし、同梱のREADMEを確認したうえでご利用ください。

まとめ

今回は、Obsidianのライトモードを長時間使いやすくするために、自分が実際に使っている設定とCSSスニペットをまとめました。

こまかい調整は少し大変だったけど、ライトモード派の方で使ってみようかなという方は、ダウンロードして使ってみてください。

テーマやCSSに詳しくなくても、バックアップを取ってから順番に設定すれば、元へ戻せます。まずはチェック用ノートを開き、自分の画面で読みやすいか確認してみてください。

現在の配布版はライトモード専用です。ライト版の公開作業が完了したあと、ダークモード版の調整に取りかかる予定です。

配布元とクレジット

このCSSは、Nyagomi Web Lab用に作成したObsidian外観カスタマイズCSSです。

Obsidian、AnuPpuccin、Style Settingsの公式・公認配布物ではありません。
AnuPpuccinとStyle Settings本体は同梱していません。

AD