💠

Obsidianの閲覧性を高めるためにやっていること(CSS・プラグイン)

に公開
CSS
Obsidian
idea

はじめに

Obsidianの使用歴は3～4年になりますが（ただのメモにしか使えてなi…）、本記事ではノートやUIの閲覧性を高めるために実践していることの一部を紹介します。
またプラグインを紹介にあたっては、あまり取り上げられているのを見ないプラグイン2つ（Supercharged links、Markmind）を中心に取り上げてみました。

運用方針

  • 1トピック1ノート
  • 作成したノートは基本的にVault直下に配置
    • 以下は例外
      • デイリーノート、Templater、運用ルール、Webクリップした記事、Zettelkastenシステム由来のフォルダなどは別途フォルダ作成して隔離
  • タグ（プロパティ）は極力使用しない
    • といっても基本6個使っている
      • aliases、tags、url、description、created、updated
    • プラグイン依存の場合は除く

ホットキーで「ライト/ダークモード」の切り替え

最近のアップデートで追加
ホットキーで「ライトモード」と「ダークモード」の切り替えができるように

CSSスニペットとは？

Obsidian ではCSSスニペットを適用して見た目を好みにカスタマイズすることができます。

CSSの設定方法は本記事で取り扱わないので、以下ヘルプやよりわかりやすい記事に任せます。

また、見た目を変えるという点においては、CSSスニペットのほかに以下があります。

CSSスニペットやプラグインとテーマの主な違いは、部分的な見た目の変更が可能である点です。

つまり、CSSスニペットやプラグインで微調整する作業が面倒であれば、気に入ったテーマを探す。
お気に入りのテーマだけどちょっと気に入らないところがある・・・といった場合は、テーマ+CSSスニペットやプラグインを併用することになります。

解決策としては、競合しているテーマやプラグインで使用されているCSSファイル(Githubリポジトリなど)を確認して、より強い優先順位のCSSで上書きする。・・・といったことでできるようですが、面倒なのでそこまではしていません。


テーマからGithubリポジトリへの行き方

テーマのリポジトリにいくとCSS とSCSS があるが、基本CSSフォルダ配下にあるファイルでいいと思います。


例：Minimalテーマのリポジトリ

使用中のCSSスニペット

以下に、筆者が使用しているCSSスニペットを紹介します。

  • 作成したスニペットも参考程度に載せていますが、引用・改変など試行錯誤ゆえのコメントアウト部分や汚いまとめかたをしています…
  • ※今後、ObsidianのアプデでCSSが適用されなくなる可能性があります。
目次
  • チェックボックス
  • リボン
  • embed
    • リンク
    • コードブロックを見やすく
    • 特定サイトの外部URLにロゴを付与
  • タブ周辺
  • 多段タブ
  • アクティブなタブの背景に画像を表示

チェックボックス

https://github.com/soiroll/pc_Setup/blob/main/Obsidian/checkbox.css

デフォルト

  • チェックボックスの状態がDone（完了）になると、取り消し線が入り後から見返すときに視認性が悪い。

CSS適用後

  • 取り消し線が入らない
  • 四角の角に丸みを追加

リボン

https://github.com/soiroll/pc_Setup/blob/main/Obsidian/ribbon.css

  • デフォルトのリボンの間隔が広いのを狭くしてスタイリッシュに

embedded

https://github.com/soiroll/pc_Setup/blob/main/Obsidian/embed.css

リンク

  • 内部リンクと外部リンクなのかを明確に
    • デフォルトだと・・・
      • 内部リンクはテーマによっては太字か内部リンクのどちらか判別しづらい
      • 外部リンクはアイコンはあるものの見づらい
    • CSS適用後
      • 内部リンクは 🔗
      • 外部リンクは 🌍
デフォルト

CSS適用後

コード抜粋
コード抜粋
/* 外部リンクのデフォルトアイコンを非表示 */
.external-link {
  background: none !important;
}

/* 外部リンクのアイコンをカスタムアイコンに変更 */
.external-link::after {
  content: "🌍"; /* 好きなUnicode絵文字やアイコンフォントに変更 */
  font-size: 16px; /* アイコンのサイズ調整 */
  margin-left: 4px; /* 文字とアイコンの間隔 */
  margin-right: -10px;
  color: var(--text-muted); /* アイコンの色をテーマに合わせる */
}

/* ------------- 内部リンクのスタイル ------------- */
.cm-s-obsidian span.cm-hmd-internal-link::after {
  content: "🔗"; /* 好きなUnicode絵文字やアイコンフォントに変更 */
  font-size: 10px; /* アイコンのサイズ調整 */
  margin-left: 1px; /* 文字とアイコンの間隔 */
  color: var(--text-muted); /* アイコンの色をテーマに合わせる */
}

.cm-s-obsidian span.cm-hmd-internal-link:hover {
  color: var(--text-accent); /* ホバー時に強調 */
  text-decoration: underline solid var(--text-accent); /* 実線の下線 */
}

コードブロックを見やすく

  • コード背景色を真っ黒に指定
  • ライブプレビュー、リーディングビュー対応
  • 使用テーマによっては視認性が落ちるかもしれません><
該当コード
/* =============================
   True Black Code Background
   ============================= */
:root {
  --myCodeColor: #000000;
}

/* ===== 編集モード（Live Preview / CodeMirror） ===== */

/* コードブロック */
.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: var(--myCodeColor);
}

/* インラインコード */
.cm-s-obsidian span.cm-inline-code {
  background-color: var(--myCodeColor);
}

/* コールアウト  */
.callout-content code {
  background-color: var(--myCodeColor);
}

/* ===== リーディングビュー ===== */

/* コードブロック */
.markdown-preview-view pre,
.markdown-reading-view pre {
  background-color: var(--myCodeColor);
}

/* pre 内の code（テーマ対策） */
.markdown-preview-view pre code,
.markdown-reading-view pre code {
  background-color: var(--myCodeColor);
}

/* インラインコード */
.markdown-preview-view code,
.markdown-reading-view code {
  background-color: var(--myCodeColor);
}

特定サイトの外部URLにロゴを付与

https://minerva.mamansoft.net/Notes/📕Obsidianで特定サイトの外部URLにロゴを付与

  • 外部リンクの文字列に特定の文字列を含む場合、リーディングビュー時にリンクに任意のロゴを付与
  • ライブプレビュー(編集モード)では、URLテキストによるリンクスタイルの設定は不可
    • ライブプレビューでは、セレクタがhref="#" となっているため

タブ周辺

https://github.com/soiroll/pc_Setup/blob/main/Obsidian/tab.css

  • ノートのピン止め、閉じる(×)ボタンをアクティブなノートのみに表示
    • マウスオーバーでボタンが表示されるように

多段タブ化

https://github.com/soiroll/pc_Setup/blob/main/Obsidian/tab_multiple.css

  • 結構気に入っているCSS
  • ブラウザのタブと同様に、たくさんタブを開くと間隔が狭くなり、タイトルや閉じる操作がしにくい
  • それを解決するために多段にするCSS

デフォルト

CSS適用後

アクティブなタブの背景に画像を表示

https://minerva.mamansoft.net/📗Obsidian逆引きレシピ/📗アクティブなタブの背景に画像を表示したい

  • 上記のCSSを以下のようにカスタマイズしている
    • 画像裏にあるテキストやリンクをクリックできるように
  animation: fadeIn 0.5s ease;
  pointer-events: none; //追加
}
@keyframes fadeIn {


プラグイン

次に見た目や閲覧性の向上という点で、便利なコミュニティプラグインを紹介していく。

https://github.com/mdelobelle/obsidian_supercharged_links?tab=readme-ov-file

  • フロントマターに特定のプロパティを持つノートのリンク書式を変更し、目立つようにするプラグイン
    • フォントの色・サイズの変更、先頭・末尾に任意のテキストを設定可能
  • Style settingsプラグインと組み合わせて使うのが必須
    • Style Settingsで見た目の部分を、Supercharged linksの設定項目でどの部分に見た目を反映させるかをON・OFFできる

https://github.com/mgmeyers/obsidian-style-settings

次の動画がこのプラグインで何ができるかが参考になる。
英語だがObsidianの画面を操作しながら説明されているので、感覚的に理解できると思う。

https://www.youtube.com/watch?v=uWyeJLWKXUI

例

以下の画像は、iconプロパティに 「rule」 があるノートの見た目を変更する設定をしたもの。
左カラム一覧の赤枠で囲った部分、📓📓 が2個並んでいるのはノート名にも 📓を書いているためです。

Style Settingsの設定

※ 記事用に強調しています

Supercharged linksの設定

ノート名の先頭にアイコンをつけることについて

https://minerva.mamansoft.net/min-0003

この発想は上記ブログより得たもの。
ノート自体に絵文字を含めるのと違って、以下が挙げられる。

メリット
  • 見た目上のアイコンのため、Vault直下でも絵文字によるファイル順に影響しない
  • CLIやAIエディタなどで絵文字入力の必要がない
  • 内部リンクで絵文字を非表示にできる
    • Supercharged linksのSettings -> Enable Editor をOFFにすれば非表示になる
  • 複数OS間における文字化けが発生しない(?)
デメリット
  • 見た目上のアイコンのため、ディレクトリの最上位にファイルは来ない
  • フロントマターに情報を入力する必要がある
    • tagを追加するのと同じ手順のため、難易度は低
  • 検索時に絵文字で絞り込みができない
    • プロパティ条件で検索する際には、 ["icon":rule] のような記述が必要となり、労力大(´;ω;｀)
      • 絵文字を使うノートは特定のフォルダ別にまとめているので、現在は支障なし
    • 💡Basesプラグイン で該当ファイル一覧を表示する検索設定をすれば、2回目以降はそのBaseファイルを開けばいい
  • プラグイン全般にいえるが、プラグインが動作しなくなった場合やObsidian以外ではアイコンが表示されない
    • 💡その時は、WindowsのPowerRenameでアイコン挿入を一括編集すればいいと思っている

うーん好みの問題なのか

参考リンク

Markmind

https://github.com/MarkMindCkm/obsidian-markmind

  • マインドマップを簡単に描ける
  • 既存のMarkdownファイルをマインドマップに切り替え・編集し、Markdownファイルに戻すことも可能
  • 画像や動画埋め込みなどもいい感じに表示してくれる
    • 画像・動画が多い・階層構造が深かったりすると、フルスクリーン or 4Kモニター以上ないと厳しい
  • CanvasやExcalidrawプラグインとの違いは、経験がないため未回答
    • 現在はMarkdownファイルの閲覧用途に限定
  • 他のマインドマップ系プラグインと違って、現在も更新されている◎
    • Enhancing Mindmap の最終更新日は23年8月

マインドマップソフトとの違い

  • これまでマインドマップ系はSimpleMind Pro（有償）を使用
  • ズームやノード間の移動は、SimpleMind が有利に感じた
    • Markmind を1週間しか触っていないのもある？
  • エクスポート形式の種類や機能の多さとしては、SimpleMind が圧勝

Markmindの良さは、手軽に既存のノートをマインドマップに変換できるところにあると思う。一から作成するなら、別プラグイン・ツールが選択肢に入ってくるだろう。

参考


その他プラグイン

画像系

ノート系

余談

プラグイン名の不一致

こういったプラグイン紹介記事においてプラグイン名が記事公開時と異なることが時々ある。

たとえば以下のようなことがあり、ほかの方のプラグインの使用感や活用術を調べるときに少し困ることもある。特にプラグインを50個以上入れている方々なら共感してくれるはずだ。

  • 2023年ごろに書かれたObsidianプラグイン紹介記事にあるプラグイン名と現在のGithubのリポジトリ名が一致しない
  • 中にはリポジトリ名とプラグイン名（リポジトリ名とObsidianの「オプション」->「コミュニティプラグイン」->「閲覧」から検索する名前）が若干異なることもある


リポジトリ名とプラグイン名が異なる例

まとめ

以上、CSSスニペットを活用すれば、チェックボックスの視認性アップから、内部・外部リンクの明確化、さらにはタブの多段表示やリボンのスタイリッシュなカスタマイズまで、UIの細部にわたる改善が可能です。

そして今回、あまり紹介されていないプラグイン2つを中心に紹介しました。特定のプロパティを持つノートのリンクを視覚的に強調する「Supercharged links」。そして、既存のMarkdownノートを手軽にマインドマップ化できる「Markmind」は、思考の整理や視覚的な情報把握に役立つでしょう。

こんなCSS・Supercharged linksプラグインの使い方しているよーなど反応いただけると嬉しいです！
ありがとうございました。
https://bsky.app/profile/soisoiro.bsky.social





あとがき

コールアウト

本記事で詳しくは紹介はしなかったが、以下の表示はコールアウトと呼ばれるもので、 > [!info] とノート内に入力すれば表示できる。

こちらの記事をおすすめしておく
https://minerva.mamansoft.net/Notes/コールアウト


2026年のObsidian方針

2026年のObsidian方針は次のように考えている


参考にしている発信者一覧(順不同敬称略)

近年AI量産記事で溢れて辟易している方が多く、私もその一人ですがよく参考にしている方々を最後に紹介します。いつもありがとうございます。

研究的な使い方を含む

その他

知的生産系（Visual Zettelkasten）

  • Hiroya Iizuka
    • https://scrapbox.io/evergreens/Visual_Zettelkasten
    • Obsidianの知的生産では日本トップクラスの発信者の1人と思われる
    • コンテンツ生産・マーケティング×Obsidian + Cursor で発信・情報商材販売を生業としている
      • 単にObsidianだけを知りたい人であれば、上記のScrapboxが参考になると思う
  • Shin

Discussion