チェックボックスになるタグ 2
[o] これが o こうなるよ。
[v] これは v こうなるよ。
Scrapboxって Font Awesome が使えるんじゃん～～～！
さっそくチェックボックス用のスタイルをこさえたよ。前のチェックボックスになるタグよりもだいぶシンプルになった！
新旧並べてみた
[_] _ v1 のチェックボックス
[x] x v1 のチェックボックス（完了）
[o] o v2 のチェックボックス
[v] v v2 のチェックボックス（完了）
お好きなのをどうぞ！
oとかvの部分はお好みで変えてね。
表示サンプル（画像）
https://gyazo.com/0c767b3354200ac9b6fd4937b91c1f69
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref$='/o':not(.icon) span,
.line:not(.cursor-line) ahref$='/v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref$='/o':not(.icon)::after,
.line:not(.cursor-line) ahref$='/v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) ahref$='/v':not(.icon)::after { content: '\f14a'; color: #2489C5 }
インポート構文
code:import.css
@import "https://scrapbox.io/api/code/scrasobox/チェックボックスになるタグ_2/style.css";
#タグとあそぶ #UserCSS #タグスタイル展覧会
初出 2017-09-16
2017-10-24 Bullet Journal をやってみる を書いてるうちにスタイルがシンプルになったので書き換えた
2018-03-27 タグリンクのhref値が変わったぽいので対応
2018-04-01 タグリンクのhref値が変わったぽいので対応
2021-07-06 Font Awesome のアップデートに対応
2022-03-19 タグリンクのhref値が変わったぽいので対応