箇条書きのインデントに縦線を表示するUserCSS(for 箇条書きのバレットをFontAwesomeにするUserCSS)
UserCSS.icon
background で線を引いてあげると右寄りになるのは防げそうです zk_phi.icon
code:例
background: linear-gradient(to right, var(--page-bg) 40%, #000 40%, var(--page-bg) 50%); なお、元のページのタイトル自体に「borderで」という実装指定が含まれているため、もしページごと流用するなら改題を伴うことになるが、それは個人的に心理的抵抗を覚えるので別ページとしておいた
また、「インデントに縦線を表示するようにした」という別のページについては、単に日記ページから上記のUserCSSに関する(当時の)いきさつを切り出して保存したものとみえ、上記のUserCSSを改変したUserCSSを置いておく場所としては適していないと判断した 2026-07-06 CSS変数--indent-bg-alpha:を導入
--indent-bg-alpha: .15;
code:style.css
html {
--indent-bg-alpha: .15;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-of-type(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-1) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%); /* 色の指定 */
}
.indent-mark span:nth-of-type(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-2) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%);
}
.indent-mark span:nth-of-type(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-3) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%);
}
.indent-mark span:nth-of-type(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-4) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%);
}
.indent-mark span:nth-of-type(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-5) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%);
}
.indent-mark span:nth-of-type(6n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: linear-gradient(to right, transparent 40%, hsl(from var(--li-color-0) h s l / var(--indent-bg-alpha, 1)) 40%, transparent 50%);
}