「Obsidian、毎日使ってるんだけど、なんかちょっとUIが物足りないな…」 「もっと自分好みの見た目にしたいけど、どうすればいいんだろう？」
もしあなたがそう感じたことがあるなら、大丈夫。今日の話は、まさにそんなあなたのためのものです。
Obsidianのテーマって、世の中に本当にたくさんありますよね。探すだけでも楽しいんだけど、なかなか「これだ！」っていう完璧なものに出会うのって難しい。フォントは好きだけど色がイマイチだったり、全体のバランスはいいのに、たった一つの要素が気になったり…。
そう、既存のテーマはどれも「あと一歩」足りない。僕もよく、その一歩に悶々としていました。
でも、CSSスニペットを使えば、既存のテーマをちょこっと修正するだけでなく、ゼロから自分だけのオリジナルテーマだって作れます。「CSSなんて難しそう…」って思ったあなたも、安心してして下さい。実は僕も最初はそうでした。でも、ちょっとしたコツさえ掴めば、想像以上に楽しくObsidianの見た目を変えられるようなります。
今回は、初心者から経験者まで、あなたのObsidianを「理想のメモツール」にするための手順と、僕が実際に作ってみたオリジナルテーマを公開。
なぜObsidianをカスタマイズするのか？
Obsidianを使い始める人って、きっと「自分の情報を自由自在に扱いたい」って思っているはず。その情報と向き合う場所が、もし最高に心地よい空間だったら……作業効率は上がるし、何より毎日アプリを開くのが楽しみになりますよね。
この「情報を自由自在に扱う」という点では、思考の断片から記事を生成するObsidian活用術も人気です。
koheifukushi-kuih-creative.com
さらに、もしブログを執筆されているなら、Obsidianからはてなブログへの投稿をスムーズにする方法もきっと役立つでしょう。
koheifukushi-kuih-creative.com
既存テーマの「あと一歩」を解消したい
多くの人が、まずは既存のテーマを試すと思います。でも、残念ながら「完璧な既製品」ってなかなか見つからない。 例えば、すごくクールなダークテーマを見つけたとする。だけど、見出しの色が読みにくかったり、リンクの色が目に優しくなかったり。「あと、ここだけこうだったら最高なのに！」という違和感。
この「あと一歩」を解消できるのが、CSSカスタマイズの醍醐味です。既成の服を自分サイズに仕立て直すみたいに、Obsidianをあなた専用にフィットさせられる。
集中力・生産性への影響
画面のUIがごちゃごちゃしていたり、目に優しくない色使いだったりすると、無意識のうちに集中力が削がれるんですよね。
僕なんかは、特定の情報に集中したい時、それ以外の要素はできるだけ視界に入れたくないタイプ。サイドバーを一時的に消したり、エディタの余白を広げたり。こういう細かな調整が、長時間作業を続けるための「小さな助け」になる。自分の脳が一番スムーズに動けるデザインを自分で作れる、というのは大きな強みです。
Obsidian CSSスニペットの基本の"き"
いよいよ実践。 「CSSスニペット」って聞くと難しそうですが、要は「見た目を上書きするメモ書き」だと思ってください。
スニペットファイルの作成と有効化
これは本当に簡単なので、今すぐ一緒にやってみましょう。
設定を開く: 左下の歯車アイコンをクリック。
「外観」へ: サイドバーの「外観」を選択。
フォルダを開く: 「CSSスニペット」の右側にあるフォルダアイコンをクリック。ここでエクスプローラー（Finder）が開きます。
ファイルを作る: そのフォルダ内に、新しく
my-style.cssみたいな名前のファイルを作ります。有効化: Obsidianに戻ると、今作ったファイル名が表示されているはず。スイッチをオンにすれば準備完了！
※設定上、「snippets」フォルダが隠しファイルになっている場合は、Windowsではエクスプローラーの「表示」タブから隠しファイルにチェック、MacではFinder上で「Command + Shift + .（ドット）」を押すと、それぞれ隠しファイルの表示・非表示を切り替えられます。
開発者ツールで場所（クラス名）を特定
CSSでどこを変えればいいか調べるには、「開発者ツール」を使います。 Ctrl + Shift + I（Macは Cmd + Option + I）を押してみてください。
ツール左上の矢印アイコンをクリックしてから、Obsidian内の変えたい場所をカチッと押す。すると、その場所を司る「名前（クラス名）」がわかります。これさえ分かれば、あとはそこに色を指定するだけ。慣れると結構ハマりますよ。
僕が作ってみたオリジナルテーマを2つ公開します
理屈だけだとイメージしづらいと思うので、僕が実際に作って使っているテーマを2つ紹介します。 コピペするだけでガラッと雰囲気が変わるので、ぜひ試してみてください。 ※warpターミナルの人気のテーマを参考にしています。
1. 深海のような没入感「Deep Developer」
デフォルトのダークモードって、なんか「グレーの塊」みたいで味気ないなと思ってたんです。 そこで、背景を深いグラデーションにして、余計な枠線（ボーダー）を全部消してみました。フォントもプログラミング用の等幅フォントにして、エディタとしての「道具感」を強めています。
/* --- 1. アプリ全体の背景を一枚のグラデーションに固定 --- */
body, .app-container {
background: linear-gradient(180deg, #0d1b22 0%, #050a0e 100%) !important;
background-attachment: fixed !important;
}
/* --- 2. 邪魔な中間レイヤーの背景色をすべて「完全に透明」にする --- */
.horizontal-main-container,
.workspace,
.workspace-split,
.workspace-tabs,
.workspace-leaf,
.workspace-leaf-content,
.view-content,
.markdown-source-view,
.markdown-rendered,
.cm-scroller,
.workspace-drawer.mod-left,
.workspace-drawer.mod-right,
.titlebar,
.status-bar {
background-color: transparent !important;
background: transparent !important;
}
/* --- 3. サイドバーとエディタの境界線（ボーダー）を極限まで薄くする --- */
.workspace-leaf, .workspace-tabs, .workspace-split {
border: none !important;
}
.workspace-ribbon.mod-left {
background-color: rgba(0, 0, 0, 0.2) !important;
border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* --- 4. フォント：画像のようなシャープな等幅フォントへ --- */
body {
--font-monospace: "JetBrains Mono", "Fira Code", "Menlo", "Consolas", monospace;
--text-normal: #d1d9e0;
--text-muted: #62727e;
}
/* エディタの文字（画像2枚目のREADMEのような見た目） */
.cm-content, .cm-line {
font-family: var(--font-monospace) !important;
font-size: 14px !important;
letter-spacing: 0.01em;
}
/* 見出しの色 (画像内の明るいシアン) */
h1, h2, h3, .cm-header {
color: #56c2d6 !important;
font-weight: 600 !important;
}
/* インラインコード (npm install のオレンジ色) */
code, .cm-inline-code {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #e06c75 !important;
border-radius: 4px;
padding: 0.1em 0.3em;
}
/* --- 5. ファイルエクスプローラー（左側）の調整 --- */
.nav-folder-title, .nav-file-title {
color: #9da5b4 !important;
font-family: var(--font-monospace);
font-size: 13px;
}
/* 選択されているファイルのハイライト */
.nav-file-title.is-active {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
これを適用すると、アプリ全体が一枚の板のようになって、すごく没入感が出るんですよ。夜中に作業する時とか、最高に落ち着きます。
2. 癒やしの「グラスモーフィズム・フォレスト」
こっちは打って変わって、「自然を感じたい」気分の時に作ったやつです。 背景に好きな画像（今回は植物）を敷いて、その上にすりガラス（グラスモーフィズム）を乗せたようなデザインです。
/* --- 1. 背景画像の設定 --- */
body {
/* ここにお好きな画像のURLを貼ってください（現在は画像のイメージに近い緑の植物系） */
--wallpaper-url: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?q=80&w=2000&auto=format&fit=crop');
background-image: var(--wallpaper-url) !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* --- 2. 各パーツを半透明（グラス風）にする --- */
.app-container,
.horizontal-main-container,
.workspace,
.workspace-split,
.workspace-leaf,
.view-content,
.markdown-source-view,
.markdown-rendered,
.cm-scroller {
background-color: transparent !important;
}
/* サイドバーと中央エディタに「薄暗い半透明」を重ねて文字を読みやすくする */
.workspace-leaf-content {
background-color: rgba(0, 0, 0, 0.45) !important; /* 透明度45%の黒 */
backdrop-filter: blur(10px); /* 背景を少しぼかすと高級感が出ます */
}
/* 左右のサイドバーを少しだけ暗めにする */
.mod-left-split, .mod-right-split {
background-color: rgba(0, 0, 0, 0.2) !important;
}
/* --- 3. UIの境界線を消す --- */
.workspace-leaf, .workspace-tabs, .workspace-split {
border: none !important;
}
/* --- 4. フォントと配色の調整 (コードエディタ風) --- */
body {
--text-normal: #e0e0e0;
--text-muted: #a0a0a0;
--font-monospace: "JetBrains Mono", "Fira Code", monospace;
}
.cm-content, .cm-line {
font-family: var(--font-monospace) !important;
font-size: 13.5px !important;
line-height: 1.6;
}
/* 選択行のハイライト（画像のような緑のアクセント） */
.cm-activeLine {
background-color: rgba(46, 160, 67, 0.15) !important;
}
/* ファイルツリーの文字 */
.nav-file-title, .nav-folder-title {
font-size: 12px;
color: #c9d1d9;
}
ポイントは backdrop-filter: blur(10px); ですね。これで背景がボケて、手前の文字が浮き上がって見える。まるで森の中でガラスのタブレットを使っているような感覚になれて、意外と書く手が進みます。
おわりに
CSSは、一度に全部覚える必要はありません。「ここを変えたい」と思った時に、その部分だけ調べて、一行ずつ書き足していく。その積み重ねが、あなたにとって最高の「メモツール」を作り上げます。
僕も最初は右も左も分からなかったけど、こうして自分でテーマを作れるようになると、Obsidianへの愛着が段違いになります。
ぜひ、紹介したコードをベースに、あなただけの色や画像に変えて遊んでみてください。
追記
フォントのJetBrains Mono (無料) などをインストールすると、より画像のイメージ（IDEっぽさ）に近づきます。
