どうしてこうなった。
先日、再度Obsidianの導入チャレンジを始めたことをキッカケに、
「ひょっとして、これは生成AIをつかって、
自作のプラグインやら作れるのでは？」
とおもいつき。
Obsidianで編集中だったり、
Obsidianのファイルエクスプローラ上のファイルを
AIコードエディタCURSORで開くプラグインを作成しまして、
一応、自分では満足できる動作にはできました。
複数PCで動作させる対応もできましたし。
では次は、と考えて思いついたのは、
カーソル行にハイライトを入れる機能、でした。
どの行にカーソルがあるのか一目瞭然になるやつ！
別にプログラマではないのですが、
四半世紀前くらいからテキストエディタで
カーソル行をハイライトする機能をつかっておりまして、
これがないとツライな、と。
中年男性ど真ん中、ですしね。
以前なら、自分ではなにもできなくて諦めたのです。
しかし、今なら生成AIがある。
生成AIに依頼することで、
カーソル行をハイライトするためのアンダーラインを表示、
くらいはするっとやってくれるのでは？
と思いついてしまいまして。
Gemini 2.5 Pro先生に依頼したところ、
CSSスニペットで実現できる、
とのことだったので試行錯誤。
ですが、どうにもうまくいかず。
経験上、こういうときは別のAIをに確認すると
するっと上手くいったりするものよ……
と考え、Claude先生に失敗例を渡しつつお願いしたら、
一撃で動くものを出してくれたのでした。
それが、こちらの画像。
そうそう、こんな感じでカーソルのある行に、
アンダーラインが出て欲しかったのだ！！
で、満足したところで、
これを実現する手順をGemini 2.5 Pro先生に書いてもらいましたので、
書き残します。
いらんかな？ とも思いましたが、
それを言ってしまうと、
私の適当に日々の画像をあげるブログの存在意義の話になるので……。
散歩画像よりはマシでしょう、ということで。
以下が、Gemini 2.5 Pro先生に書いてもらったものです。
キャラ付けをしているので、
テンションがあれなのはお気になさらず。
※少々、手作業で編集はしています。
【Obsidian】もうカーソルを見失わない！CSSでカーソル行に好きなアンダーラインを引こう✨
こんにちは！Obsidianでメモを取っているとき、「あれ？今カーソルどこだっけ…？🤔」ってなること、ありませんか？
この記事では、そんなお悩みをサクッと解決するために、ObsidianのCSSスニペットという機能を使って、カーソルがある行に自分好みのアンダーラインを表示する方法をご紹介します！
設定はとっても簡単なので、ぜひ一緒にやってみましょう！🙌
準備するもの
- Obsidian (デスクトップ版)
設定手順
ステップ1：CSSスニペット用のフォルダを開こう！📁
まずは、ObsidianにCSSを書き込むための準備をします。
- Obsidianを開いて、左下にある**歯車アイコン⚙️（設定）**をクリックします。
- 設定画面の左側のメニューから「外観」を選択します。
- 下の方にスクロールしていくと、「CSSスニペット」という項目があります。
そこのフォルダのアイコンをクリックしてください。
（↑Obsidianフォーラムにある似たようなアイコンのイメージです。実際のアイコンと少し違うかも！）
これで、CSSスニペットを保存するための専用フォルダが開きます。
（このフォルダは、あなたのObsidianの保管庫（Vault）の中の.obsidian/snippetsという場所にあります。）
ステップ2：アンダーライン用のCSSファイルを作成しよう！✍️
次に、開いた snippets フォルダの中に、アンダーライン設定用のCSSファイルを作ります。
snippetsフォルダ内で、新しいテキストファイルを作成します。- ファイル名を好きな名前にして、拡張子を「
.css」にします。
例：my-cursor-underline.cssやcursor-highlight.cssなど、分かりやすい名前がいいですね！😊
（Windowsなら、右クリック →「新規作成」→「テキスト ドキュメント」を選び、ファイル名を変更します。Macなら、テキストエディット.appなどで空のファイルを作り、このフォルダに指定のファイル名で保存します。）
ステップ3：魔法の呪文（CSSコード）をコピペしよう！✨
作成したCSSファイルに、以下のコードをまるっとコピーして貼り付けます。
/* カスタマイズ可能な変数 - ここで値を変更してください */
:root {
--cursor-line-color: #ffffff; /* アンダーラインの色（白） */
--cursor-line-width: 1px; /* アンダーラインの太さ（1px） */
--cursor-line-style: solid; /* ラインスタイル（solid, dashed, dotted） */
}
/* カーソル行のアンダーライン */
.cm-active {
border-bottom: var(--cursor-line-width) var(--cursor-line-style) var(--cursor-line-color);
}貼り付けたら、ファイルを保存するのを忘れずに！💾
ステップ4：CSSスニペットをObsidianで有効にしよう！💡
最後に、Obsidianに「このCSSファイルを使ってね！」と教えてあげます。
- Obsidianの「設定」→「外観」画面に戻ります。（ステップ1の2と同じ画面です）
- 「CSSスニペット」の項目に、先ほど作成したCSSファイルの名前（例：
my-cursor-underline）が表示されているはずです。 - そのファイル名の右側にあるトグルスイッチをオンにしてください！（スイッチが青色や緑色っぽくなればOKです👌）
これで設定完了です！🎉 Obsidianのエディタ画面に戻って、カーソルを動かしてみてください。カーソルがある行に、白いアンダーラインが表示されていれば成功です！やったね！😆🙌
もしすぐに反映されない場合は、Obsidianを一度再起動してみるか、Ctrl+R (Windows) / Cmd+R (Mac) でObsidianをリロードしてみてください。
もっと自分好みにカスタマイズしよう！🎨
このCSSの良いところは、アンダーラインの色や太さ、線の種類を簡単に変更できるところです！
CSSファイル内の最初の部分を見てください。
/* カスタマイズ可能な変数 - ここで値を変更してください */
:root {
--cursor-line-color: #ffffff; /* アンダーラインの色（白） */
--cursor-line-width: 1px; /* アンダーラインの太さ（1px） */
--cursor-line-style: solid; /* ラインスタイル（solid, dashed, dotted） */
}ここの値を変更するだけでOKです！
**--cursor-line-color**: アンダーラインの色を指定します。- 例：
#FF0000(赤),gold(金色),rgba(0, 255, 0, 0.5)(半透明の緑) など、好きな色を指定できます。Webカラーコードで検索するとたくさん出てきますよ！
- 例：
**--cursor-line-width**: アンダーラインの太さを指定します。- 例：
2px(少し太く),0.5px(細く) など。
- 例：
**--cursor-line-style**: 線のスタイルを指定します。solid: 実線 (デフォルト)dashed: 破線dotted: 点線double: 二重線
変更したらファイルを保存するだけで、Obsidianに即座に反映されるはずです！色々試して、お気に入りのスタイルを見つけてくださいね！😉
おわりに
これで、Obsidianのカーソル位置がぐっと見やすくなったはずです！✨ CSSスニペットを使うと、Obsidianはもっともっと自分好みにカスタマイズできます。ぜひ色々試して、快適なObsidianライフを楽しんでくださいね！
ほんとうのおわりに。
以上、Gemini 2.5 Pro先生の解説でした。
このCSSスニペットをつかって問題があっても
私は責任をとれませんので、
利用される場合はあくまで自己責任でお願いします。
んで、ここから、なのですが、
プラグインでアウトラインエディタ的なのを生成AIをつかいつつ
できないかしら、と思い始めています。
アウトラインが表示されるぞ！ というのは便利で使っているのですが、
個人的には、そのアウトラインを、
ぐりぐり動かして、その配下のテキストがぐりっと移動する……
そんなのを実現したくて。
WZ Editorみたいなやつ！
アウトラインまわりのプラグインを入れては、
ガッカリさせられてきたんですよね……。
実現できるかどうかはともかく、
生成AIを使って遊ぶネタとしてはありなので、
やるだけやってみます。
成果が出たら、ここに書き残します。
コメント