量産型タグアイコン（おひとり様向け）

Bullet Journal をやってみるの続きです。

Font Awesome を使って「アイコンになるタグ」をいくつか作ってたら

「似たようなUserCSSをコピペすんのもうやめたい」と思ったので、楽に量産できるようにしたよ～。

UserScriptを使ってCSSを自動生成するので、タイトルにある通りおひとり様向け！

だから共有/公開プロジェクトでは、普通にCSSを書くか、アイコン記法を使うか、絵文字を使うほうがいいです。

Scrapbox上で使えるアイコン用ノートを集めてるプロジェクトもあるよ→/icons

Bullet Journal をやってみるで作ったこのスタイルは、

https://gyazo.com/d2ad9106f2f17bb7c712b759b248b61d

こういうスクリプトで作ったよ。

出力結果はここ→/scrasobox/Bullet Journal をやってみる#59ed103a96b90400009ef551

違うアイコンを使いたいときはここ見てね→/scrasobox/ピンしたページのスタイル#59bda3af96b90400007bb7a2

code:script.js

// ここからアイコンとスタイルの定義

// - アイコンの名前はエンコードしなくてOK、日本語でもOK

// - スタイル部分は content だけ必須、バックスラッシュ2個必要なので注意、あとはお好みで

const tagIconStyles = {

"!" : "{ content: '\\f06a'; color: #F6AE2D }", /* ひらめき */

"?" : "{ content: '\\f059'; color: #758E4F }", /* 疑問、要調査 */

"*" : "{ content: '\\f069'; color: #F26419 }", /* 重要 */

"_" : "{ content: '\\f0c8'; color: #08BDBD }", /* タスク */

"x" : "{ content: '\\f14a'; color: #2489C5 }", /* 完了タスク */

">" : "{ content: '\\f14d'; color: lightgrey }", /* 先送りしたタスク */

"<" : "{ content: '\\f274'; color: lightgrey }", /* 日付を決めたタスク */

"e" : "{ content: '\\f192'; color: #F26419 }", /* イベント */

"good" : "{ content: '\\f164' }", /* おまけ。下に説明があるよ */

"bad" : "{ content: '\\f165' }",

"good_meal" : "{ content: '\\f087\\f805\\f069'; letter-spacing: .2em }"

};

// ここから下は無視してね ---------------------

(function(m){

let charSelectors = [], afterLinkSelectors = [], iconStyle = ""

const linkSelFmt = ".line:not(.cursor-line) ahref$='/#':not(.icon)"

const charStyle = "{display:inline-block;width:0;text-indent:-9999px}"

const afterLinkStyle = "{display:inline-block;min-width:1.15em;padding-left:1px;font: 900 110%/normal 'Font Awesome 5 Free';text-align:center}"

const a = "::after", f = " span"

const enc = '@$&+=:;", ','@$&+=:;",_'

const encode = tag => Array.from(tag).map(c => {

const i = enc0.indexOf(c)

return -1 < i && enc1i ? enc1i : encodeURIComponent(c) }).join("");

for (var k in m) {

const href = encode(k)

charSelectors.push(linkSelFmt.replace(/#/, href) + f)

afterLinkSelectors.push(linkSelFmt.replace(/#/, href) + a)

iconStyle += linkSelFmt.replace(/#/, href) + a + mk

}

let style = document.createElement('style')

style.appendChild(document.createTextNode(charSelectors.join(",") + charStyle))

style.appendChild(document.createTextNode(afterLinkSelectors.join(",") + afterLinkStyle))

style.appendChild(document.createTextNode(iconStyle))

document.head.appendChild(style)

})(tagIconStyles)

サンプル画像にないけど、タグ名は記号じゃなくて言葉で定義してもいいし、

good [good]

bad [bad]

アイコンを複数並べるスタイルもできる。

good_meal [good_meal]

自分でCSS書くのとJSに設定書き足すのと、どっちが楽かって言ったら

どっちもそんなになんか微妙な出来になったけど、まあいいや！

#楽をしたい

初出 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値が変わったぽいので対応