見出し画像

【Obsidian Tips】完了したタスクに取り消し線を引くCSS


概要

完了タスクに取り消し線が引かれなくなるThemeが多かったので。
text-decoration:テキストのスタイルを指定する(取り消し線など)
opacity:透明度の設定(0〜1の間で指定)

/* https://zenn.dev/cat2151/scraps/a7777518246458 */

:is(.markdown-preview-view,.markdown-rendered)  ul>li.task-list-item.is-checked, 
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] {
  text-decoration: line-through;
  opacity: 0.5;
}


CSS適用前(Minimal Theme)
CSS適用後(取り消し線&透明度50%)

参照元

追記

上記のCSSのままだと、Dataview や Query では、完了タスク以外も修飾されてしまう。

それが見づらい場合、:is(.markdown-preview-view,.markdown-rendered) ul>li.task-list-item.is-checked, を削除すると、修飾が消える。

Dataview や Query の中では、タスクは「未チェック」「チェック済」の2種類しか判別されないようで、タスクの Status による細かい修飾はできないよう。


この記事が気に入ったらサポートをしてみませんか?