テキストエディタObsidianのチェックボックスをカスタマイズして身の丈に合わせる

Obsidianを利用している。シンプルなテキスト編集に特化しているところが気に入っている。日付がタイトルになるデイリーノートというファイルをサッと作れる点がいい。現在時刻をサッと入力できる点も助かる。時刻、改行、メモ、改行、時刻、改行、メモ、改行、と淡々と記入しておくと後日振り返る際の貴重な資料になる。

設定が少ない点も好印象である。選択肢が多いアプリはついつい余計なことに時間を使ってしまいがちである。日常的なテキストファイルの利用であれば、見出し、リスト、太字、リンク、チェックボックス、程度の最小限で事足りるのである。
Obsidianはコミュニティプラグインというカスタムが充実いているが、そこには確実に沼があるので手を出さないようにしている。

とはいえ不便な点があったのでピンポイントでフィッティングしてみた。Obsidianはそういった融通もきくのだ。今回カスタムしたのはチェックボックスの挙動に関して。

ゴール:チェック済みボックスの取り消し線をなくす

純正ではチェックボックスにチェックをすると文字に取り消し線が入る。取り消し線が入ると読みにくいので無くしたいが、設定項目にその機能がない。AIに尋ねながらCSSファイルを適用させることにした。AIとともにプログラムコードを書き換えていくことを、バイブコーディングというそうだ。雰囲気を伝えるだけで使えるコードを出力してくれる。

今回実現したいことはこうだ。
– チェックボックスにチェックを入れた時に取り消し線をつけない。
– 文字を薄くすることでチェックが入った時ことを判別しやすくする。
– ただし閲覧画面では取り消し線を反映させた通常の挙動とする。
こうすることで、編集中は未完了と完了の両方が読みやすい。閲覧時は未完了のものだけに注目できる。

作業手順:専門的なことはAIに尋ねる

【ステップ1】CSSスニペットを作成する

コードはAIに尋ねた、はじめに出力されたコードは一般的なものだったのでObsidianに適さなかった。そこでディベロッパーツールで現物調査してくれと提案された。F12のアレである。しかしObsidianはF12で開かなかった。
これもAIに方法を尋ねたところ、[option + command + i]ショートカットキーで開けるようだ。属性を調べ有効なコードを作成できた。

.HyperMD-task-line[data-task]:not([data-task=" "]) {
    text-decoration: none !important;
}
.HyperMD-task-line[data-task]:not([data-task=" "]) * {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

これをObsidian指定のsnippetsフォルダに保存する
[shift + command + .] で隠しフォルダを表示しコードをCSSファイルとして保存する。
パス例:vault/.obsidian/snippets/obsidian-checkbox-mod.css

【ステップ2】フォルダを反映させ、該当ファイルを有効にする

Obsidianに戻り、(設定 –> 外観 –> CSSスニペット)で上記の[snippets]フォルダのパスを指定する。
フォルダが反映されるとファイル一覧が表示される
該当.cssファイルのチェックをオンにする

結果:十分納得のいくものが得られた

編集画面:すべての文字が読みやすい、完了項目はレ点と薄字で判別できる。
未達部分:今回のコードでは改行部分が薄文字にならなかったが、インデントされ判別しやすいのでよしとする。


閲覧画面:通常のObsidian の挙動なので未完了項目だけに注目できる


分厚いテキストを学ばなくともAIに聞くだけでコードを編集できた。勉強とはなんだったのか。倫理、道徳の転換点に生きていることを考えさせられる現象である。

タイトルとURLをコピーしました