「Obsidianを、自分らしい空間に。」カスタムテーマを作りたい話
既存テーマのアレンジ、そしてその先へ
Obsidianを使い始めてしばらく経ち、デフォルトのテーマにも、コミュニティが作った素敵なテーマにもずいぶんお世話になった。色々使用してみて、現在はAnuPpuccinを使っている。
https://github.com/AnubisNekhet/AnuPpuccin
けれど使い込むほどに、「あともう一歩、自分好みに仕上げたい」「ここがもう少しこうだったら完璧なのに」という気持ちが強くなってきた。あるとき、その欲求が頂点に達し、「よし、カスタムCSS を使って既存テーマをアレンジしてみよう」と行動に移すことを決めた。
既存テーマのアレンジ、楽しいけど難しい
最初は、サイドバーの背景色を変えてみたり、ノート上のフォントをちょっとおしゃれにしてみたりと、ごく単純な変更に着手してみた。でも、いざコードを開いてみると、Obsidianの内部は思っていた以上に細かくクラスやセレクタが設定されている。
同じ背景色の変更でも、「プレビュー画面」「エディタ画面」「サイドバー」など、それぞれの要素のクラス名を突き止めなければならない。一括りで済むだろうと思い込んでいたら、別々のセレクタに分かれていたりして、少しずつ試しては「違う、ここじゃない…」と試行錯誤を繰り返した。
しかも、既存テーマの作者さんが設定しているCSSを見てみると、かなりの行数があり、レイアウトや配色、ホバーエフェクトなどが多層的に定義されていることに驚いた。全体のつながりを把握するのはなかなか骨が折れるけれど、ちょっとした書き換えが画面の雰囲気をガラッと変えてくれる瞬間は、思った以上に爽快だった。
こだわりが生まれてくる
「色を変えるくらいなら簡単だろう」と踏み込んだカスタムCSSだったが、変更を加えていくうちに、どうしても 「もっとこうしたい」 という欲が止まらなくなってくる。
「サイドバーのフォルダ、もう少し間隔を詰めて、一覧性を高められないかな？」
「見出しは現状でも十分目立つけど、自分はもっと大きくしたいなぁ」
「リストの行間が狭いせいで読み返しづらい…もう少し間隔を広げたい」
こうしたニーズが次々と湧いてきて、気づけばちょっとずつCSSを書き足していく日々。最初にダウンロードした既存テーマは、その下地を残しつつも、全く別物といっていいほどにアレンジが進んでいく。とはいえ、もともとのテーマの配色やレイアウトの良さを活かしながら改変するのは、まるで料理のアレンジのような楽しさがある。
試行錯誤の先にある発見
アレンジを続けるうちに気づいたのは、「小さな修正が全体のバランスに大きく影響する」 ということ。たとえばリンクの色を少し鮮やかにしただけで、今まで心地よいと思っていた背景色が突然浮いてしまったり、一覧が見づらくなったりもする。
そういうときは、仕方がないので背景色やフォント、サイズを見直してみる。すると今度は、サイドバーの色とのコントラストが微妙に変化してしまい、また別の部分が気になってくる…。延々と芋づる式にやることが増えていく感覚は大変だけど、同時にパズルのような面白さもある。
「うまくいった！」と思ってObsidianに切り替える瞬間のワクワクは格別だ。画面に反映された自分だけのカスタマイズに、一種の愛着が湧いてくる。同じ機能性でも、見た目に満足できると、使うたびに少し嬉しい気持ちになれるのは不思議だ。
そして、自作テーマへの憧れ
そうやって試行錯誤をしていると、当然のように「いっそ自作テーマを作ったほうが早いかも」という気持ちに至る。既存テーマのコードを追いかけるよりも、ゼロから自分の理想に合わせて組み立てたほうが理解しやすいし、カスタマイズの自由度も高いはず。
とはいえ、自作となるとあらゆる部分を自分で決めなければならない。背景色からテキストの大きさ、マージンの広さ、サイドバーの配置、さらにはアイコンやアニメーションの設定まで…。
しかも、ObsidianのCSSは意外と奥が深く、シチュエーションに応じたクラスの切り替えやレスポンシブ表示の扱いなど、学ぶべきことが山のようにある。最初のうちはそうした複雑さに圧倒されるかもしれないけれど、いま触っている既存テーマのカスタマイズ経験が必ずや活きるだろう、と信じている。
それに、自作テーマを完成させた暁には「こんな素敵なアプリを、より使いやすく、より自分らしくしてみせた」という達成感があるに違いない。カスタムCSSの学習としても大きなステップアップになるし、Obsidianのユーザーフォーラムにアップして、同じテーマを使いたいという人と交流できるかもしれない。
まだ道半ばだけど
現在のところは 「既存テーマをベースに、自分なりのアレンジを加えている」 段階だ。少しずつ修正を重ね、プレビュー画面とエディタ画面のデザインを調整し、アイコンや行間を変更して、どこまで自分好みに近づけられるかを試し続けている。
大規模な変更をした際には何度も見た目が崩れたり、誤って意図せぬ部分まで色が変わってしまったりと、苦労が絶えないのも事実。でも、それらをひとつひとつクリアしていく過程で、確実に自分自身のスキルは上がっていると感じる。そして何より、仕上がりを見るたびに心地よい達成感を味わえるのが魅力だ。
カスタムCSSでのアレンジを続ける中で、着実に「自分だけのObsidian」が形作られている。それがなんだか、とても心地いい。いつの日か、この経験をフルに活かして、ゼロから自作テーマを生み出してみたい。その時には、いま体感している“迷い”や“発見”がきっと、大きな力になってくれるだろう。