generated at
Bullet Journal をやってみる
最近ツイッターを始めたおかげで Bullet Journal (BuJo) を知ったよ！（遅まきながら）
元々アナログノート派だったし、このコンセプトめっちゃ好き！
Scrapboxで同じことやってみたかったので、各bulletを「アイコンになるタグ」のやりかたで書いてみた。

! [!] ひらめき _ [_] タスク
? [?] 疑問 x [x] 完了タスク
* [*] 重要 > [>] 先送りタスク
e [e] イベント < [<] リスケ済みタスク

注意
このサイトでは [_] と [x] に旧版のスタイル（Font Awesome不使用）が適用されてるので、上のサンプルじゃなく下の画像を見てね。

（画像サンプル）
BuJoユーザーはみんな思い思いのbulletを使ってるっていうし、その都度カスタムしていくつもりでやってます！


んでUserCSSなんだけど、アイコンの数だけ伸びるもんだからすごい長い。
プロジェクト名の置換もしなくちゃならないし、
エンコード必要かどうか調べたり、エンコードしたりするのめんどいし、
でも中身は単純なので、
これをなるべく簡単に半自動生成するUserScriptを書きました。そっちも次に書く。
書いた→ 量産型タグアイコン（おひとり様向け）

style.css
/* タグアイコンの共通スタイル (1) */ .line:not(.cursor-line) a[href$='/!']:not(.icon) span, .line:not(.cursor-line) a[href$='/%3F']:not(.icon) span, .line:not(.cursor-line) a[href$='/*']:not(.icon) span, .line:not(.cursor-line) a[href$='/_']:not(.icon) span, .line:not(.cursor-line) a[href$='/x']:not(.icon) span, .line:not(.cursor-line) a[href$='/%3E']:not(.icon) span, .line:not(.cursor-line) a[href$='/%3C']:not(.icon) span, .line:not(.cursor-line) a[href$='/e']:not(.icon) span { display: inline-block; width: 0; text-indent: -9999px } /* タグアイコンの共通スタイル (2) */ .line:not(.cursor-line) a[href$='/!']:not(.icon)::after, .line:not(.cursor-line) a[href$='/%3F']:not(.icon)::after, .line:not(.cursor-line) a[href$='/*']:not(.icon)::after, .line:not(.cursor-line) a[href$='/_']:not(.icon)::after, .line:not(.cursor-line) a[href$='/x']:not(.icon)::after, .line:not(.cursor-line) a[href$='/%3E']:not(.icon)::after, .line:not(.cursor-line) a[href$='/%3C']:not(.icon)::after, .line:not(.cursor-line) a[href$='/e']:not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px; font: normal 110%/normal FontAwesome; text-align: center } /* ここから各アイコンの設定 */ .line:not(.cursor-line) a[href$='/!']:not(.icon)::after { content: '\f06a'; color: #F6AE2D } .line:not(.cursor-line) a[href$='/%3F']:not(.icon)::after { content: '\f059'; color: #758E4F } .line:not(.cursor-line) a[href$='/*']:not(.icon)::after { content: '\f069'; color: #F26419 } .line:not(.cursor-line) a[href$='/_']:not(.icon)::after { content: '\f0c8'; color: #08BDBD; font-weight: 400 } .line:not(.cursor-line) a[href$='/x']:not(.icon)::after { content: '\f14a'; color: #2489C5; font-weight: 400 } .line:not(.cursor-line) a[href$='/%3E']:not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400 } .line:not(.cursor-line) a[href$='/%3C']:not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400 } .line:not(.cursor-line) a[href$='/e']:not(.icon)::after { content: '\f192'; color: #F26419 }

インポート構文
import.css
@import "https://scrapbox.io/api/code/scrasobox/Bullet_Journal_をやってみる/style.css";

#タグとあそぶ #タグスタイル展覧会
初出 2017-10-22
2017-10-24 スタイルの微調整
2017-11-26 スタイルの微調整
2017-12-02 スタイルの微調整
2018-03-27 タグリンクのhref値が変わったぽいので対応
2018-04-01 タグリンクのhref値が変わったぽいので対応
2021-07-06 Font Awesome のアップデートに対応
2022-03-19 タグリンクのhref値が変わったぽいので対応