Obsidian：カード・スタイルをもっと活用する

カードごとの文字数を知りたいと思いますよね。

Better Word Count

見出しの横に文字数が出るプラグイン。

Import Obsidian: Better Word Count

設定で「Display Section Word Count」をオンにしてください。

見出しにカウンターを追加します。

cardy.css

これでうまくいくかと思ったら cardyの表示が崩れることに気づきました。文字数表示とバッティングして、見出しを編集するときカーソル位置がずれてしまう。

そこで修正版。

div[data-type="markdown"] {

.cm-line:first-child {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

.cm-line:last-child {
  padding-bottom: 0.5em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.bwc-section-count {
  color: #ccc;
  font-size: 70%;
  background: transparent;
}

.cm-editor {
  background: #eee;
}

.HyperMD-header {
  border-top: 0.2em solid #eee;
  border-top-left-radius: 0.7em;
  border-top-right-radius: 0.7em;
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.cm-line:has(+.HyperMD-header) {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.HyperMD-header-4 {
  color: salmon;
  background: white !important;
  font-size: 90%;
  font-weight: 800;
}

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

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

.cm-quote:before {
 content: "　";
}
  
.cm-line.cm-active:has(br):not(:has(.bwc-section-count)) {
  padding-left: 1ic !important;
}

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

}