Obsidianはカード・エディタに進化する

「テキストはカードでできている」を視覚化。

カード・エディタ

Obsidianではできないんだと思ってました。 「見出し（レベル4）＋内容」をカードに見立てる。 そうしたカスタマイズ・スタイル。

Minimalテーマに当ててますが、 他のテーマでもカード化できるようです。

cardy.css

cardy の名前を与えました。 WorkFlowyの頃から模索してきたデザインです。 思い入れがある。 それに応える完成度になりました。

div[data-type="markdown"] {

.cm-line:first-child {
  padding-top: 12px;
  padding-bottom: 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.cm-line:last-child {
  padding-bottom: 6px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.HyperMD-header-4 {
  color: salmon;
  font-size: 90%;
  font-weight: 800;
  border-top: 3px solid #eee;
  border-bottom: 8px solid white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: white !important;
}

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

.cm-editor {
  background: #eee;
}

.cm-line:not(.HyperMD-codeblock) {
  background: whitesmoke ;
}

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

.cm-active:has(br) {
  padding-left: 1ic !important;
}

.cm-editor .cm-active {
  background: ivory;
}

}

見た目が「カードの集まり」になる。

カーソル行も明示することにしました。

前回とどこが違うか

ほぼ同じです。 Thinoなどのプラグインに影響してしまうので、 Markdown画面だけを対象とするようにしました。

また、丸みを文頭・文末の角にも適用しました。 角が尖っていると「カードが重なっている」と見えるんですよね。 丸みを帯びていると「並んでいる」に見えます。 わずかな違いだし、意識しないと気づかない部分です。 でも認識に影響する。

このデザインはプレビューでは消えます。 最終的にブログに投稿したりするし、 ブログではカード型である必要がないからです。 そのときは普通の記事であってほしい。

なので Cardy は「書くためのデザイン」です。 テキストに「区切り」を持ち込む。 文に「句読点」があるように、 文章にも「カード構造」がある。

それを意識するための装置です。

まとめ

このデザインはアウトラインやノートコンポーザーと併用して 意味が生まれます。 Obsidianとの相性がいい。