https://wineroses.hatenablog.com/entry/2025/11/03/115006

もっとカードっぽく。

カード・エディタ

テキストがカードでできている。そう意識させるデザインを考え始めたところですが、いつものことですね。 cardy構想の一環です。むしろなぜ今までObsidianで取り掛かっていなかったのか。

いや、カードっぽくするなんてネタ、もしできるなら誰かが「テーマ」として配布してるだろうと思いました。出てないということは難しいということです。

cardline.css

とりあえずそれっぽく。

.HyperMD-header-4 {
  color: salmon;
  font-size: 20px;
  font-weight: 800;
  border-top: 3px solid #ddd;
  border-top-left-radius: 10px;
}

.cm-editor {
  background: #ddd;
}

.cm-editor .cm-line {
  background: #eee;
}

.cm-editor .cm-line:before {
  content: "　";
}

すると下図のようになります。

レベル4の見出しで「改ページ」っぽく見せる。

たぶん、不具合はあるに違いない。

Zoomと合わせて使う

面白いのはZoomしたときかな。

ほら、カードを1枚取り出したように見える。すると「カードに書くような書式」で書いてしまいます。そういう習性が出来上がっていて「カード」がそのトリガーになる。

これは「習慣づけ」の結果ですから人によって違うでしょう。カードを使う人もいるし使わない人もいる。カードに書く書式も人それぞれである。だから、向いてない人がいても不思議ではありません。

カード表示の利点は、前後の文脈を一時的に「忘れること」ができることだと思います。文脈はテキストの要ではあるけど、同時に発想を狭くしてしまう制約にもなる。それは困ります。

なので「カード」として切り出すことで発想を緩める。「今ここ」の而今から世界を捉え直す。そうした狙いがこのデザインに込められています。

まとめ

実は行頭の余白を作るのにpaddingやtext-indentが使えませんでした。これが気にかかっているかなあ。 beforeで誤魔化しているけど、空行だけカーソルの位置が先頭に行っちゃうんですよね。そこじゃない、と思ってしまいます。

これを解決するにはどうするんだろう？

追記

もうちょっとカードっぽくしました。

.HyperMD-header-4 {
  color: salmon;
  font-size: 20px;
  font-weight: 800;
  border-top: 3px solid #ddd;
  border-bottom: 10px solid whitesmoke;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: whitesmoke !important;
}

.cm-line:has(+.HyperMD-header-4) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cm-editor {
  background: #ddd;
}

.cm-editor .cm-line {
  background: #eee;
}

.cm-editor .cm-line:before {
  content: "　";
}

角に丸みをつけてみた。

見出しも背景色をつけて取っ手っぽくしました。

インデントについて

倉下さんが調べてくれました。ありがとうございます。

たしかにリストとかも揃えるのは面倒そうですね。とりあえず現状で…。

と考えてみたら、問題はカーソル行が空行のときだけなので

.markdown-source-view.mod-cm6 .cm-active:has(br) {
  padding-left: 1ic !important;
}

これを追加したらバッチリでした。うれしい。