箇条書きのバレットをFontAwesomeにするUserCSS
suto3.iconこんなのはどうかな？ 2020/09/01 17:35:27
1
2
3
4
5
6
7
1.
2.
3.
4.
5.
6.
7.
これはちょっと派手すぎないかなyuta0801.icon
色が明るすぎて見づらいのもあるから、せめてもう少し暗くした方がよくなりそう
✓マークはTODOリストみたいに見えるので避けてほしいですtakker.icon
後いくらなんでも原色は見づらい
彩度を落とす必要があります
変えてみました 2020-09-02 09:12:34
番号なしリストは/rashitamemo/rashita.iconさんのprojectから丸パクリ
彩度を落としてみた
https://gyazo.com/c86ece5afa998cddcc4928b8e8645921
番号なしリストの階層の色分け表示が完全に潰されとる。いいのか、それで。suto3.icon
一画面に収まらないような箇条書きを読むのがつらいので、色分け表示をしようとしたんだけどさ。
直そうとしたけど直し方がわからなかったので保留にしていましたtakker.icon
直った。色や大きさ、位置が変であれば直してください。
修正してみました。こんな感じかな。suto3.icon
なるほどー「minus」で調べればよかったのかーtakker.icon
「hyphen」で探したら出てこなかったので諦めて-を使っていました
少し小さくしましたtakker.icon
2021-07-10 09:55:24 修正しました
2020-10-09 14:57:22 bulletの大きさを控えめにしました
CSS変数定義
カラーセット 1
code:stylexx.css
:root {
}
カラーセット 2
code:style.css
:root {
}
カラーセット 3
code:stylexx.css
:root {
--li-color-1: hsla(288,100%,40%,0.6);
--li-color-2: hsla(216,100%,40%,0.6);
--li-color-3: hsla(144,100%,40%,0.6);
--li-color-4: hsla(72,100%,40%,0.6);
--li-color-5: hsla(0,100%,40%,0.6);
}
code:style.css
:root {
/* 番号なしリストのキャラクター */
/* --ul-bullet: '\f00c'; /* チェックマーク */
--ul-bullet: '\f068'; /* マイナス記号 */
/* --ul-bullet: '\f10c'; /* xまる */
/* --ul-bullet: '\f111'; /* まる */
/* --ul-bullet: '\f0c8'; /* 四角 */
/* --ul-bullet: '\f096'; /*x 四角 */
/* --ul-bullet: '\f580'; /* */
/* --ul-bullet: '\f140'; /* 二重丸*/
/* --ul-bullet: '\f005'; /* スター:クリスマス用 */
/* --ul-bullet: '\f1b2'; /* box */
/* --ul-bullet: '\f599'; /* 顔 */
/* --ul-bullet: '\f1b0'; /* 肉球:猫の日用 */
/* --ul-bullet: '\f6be'; /* ネコ */
/* --ul-bullet: '\f6d3'; /* イヌ */
/* --ul-bullet: '\f1dd'; /* パラグラフ記号 */
/* --ul-bullet: '\f683'; /* 祈り */
/* --ul-bullet: '\f5d7'; /* 骨 */
/* --ul-bullet: '\f004'; /* ハートマーク */
/* 番号つきリストのキャラクター */
/* --ol-bullet: '\f111'; /* 丸 */
--ol-bullet: '\f292'; /* ハッシュ記号 '#' */
/* --ol-bullet: '\f2dc'; /* 雪:クリスマス用 */
}
番号なしリスト
アイコン指定
code:style.css
.line .indent-mark .dot::before {
display: block;
/* position: inherit; */
/* top: -12px;d */
position: absolute;
/* right: -5px; */
top: -10px;
スターはクリスマス仕様だったのか
https://gyazo.com/6822b779cca72688d1e3aa052cd8b3ec
マイナス記号よりスターのほうが見やすいと思うtakker.icon
code:style.css
/* font-family: FontAwesome; /* old */
font-family: 'Font Awesome 5 Free';
font-size: 6px;
/* content: '\f068'; /* マイナス記号:通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
/* content: '\f1fd'; /* バースデーケーキ */
/* content: '\f6be'; /* ネコ */
/* content: '\f6d3'; /* イヌ */
/* content: '\f683'; /* 祈り */
font-weight: 900;
content: var(--ul-bullet, '\f068');
color: var(--li-color-0);
}
クリスマスに作った行だけ星にするテスト
code:style.css
content: '\f005';
}
2021/7/5
なんかwindowsで見ると直ってるけどiphoneとmacで見ると直ってない…imo.icon
自分の環境のwin、mac、iphoneで直りましたimo.icon
既定のbulletを消す
code:style.css
.line .indent-mark .dot { background-color: transparent; } /* */
/* .line .indent-mark .dot { background-color: #EEE; } /* */ フォントサイズ
code:style.css
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}
色
最初は:nth-child(6n+1)ではなく:nth-child(6n+2)を指定する
.c-0のあとに.dotが来る
https://gyazo.com/48b70874e033fa18eda070a107a47cdf
インデントレベル1のdotはspan.indent-markの2番目の子要素なので6n+2にマッチ
よくわからない…順番関係あるんですか？yosider.icon
順番は関係ないけど、わかりやすいように出現する色順に書いているということか
確かにインデントレベル1のdotが6n+2で指定した色になっている
なるほど…
開発コンソールで::beforeを削ってみると違いがわかります
イマイチやり方が分かっていないですyosider.icon
settingで一瞬削ってみてわかりましたyosider.icon
コンソールじゃなくてスタイルエディターでしたtakker.icon
https://gyazo.com/b03e8ec0bde7455238fd6b64de8db20a.mp4
https://gyazo.com/307ed9859249e9791f930627e1fa2c97
style editorから探せませんか？takker.icon
code:style.css
.indent-mark .dot:nth-child(6n+2)::before {
color: var(--li-color-1);
}
.indent-mark .dot:nth-child(6n+3)::before {
color: var(--li-color-2);
}
.indent-mark .dot:nth-child(6n+4)::before {
color: var(--li-color-3);
}
.indent-mark .dot:nth-child(6n+5)::before {
color: var(--li-color-4);
}
.indent-mark .dot:nth-child(6n+6)::before {
color: var(--li-color-5);
}
.indent-mark .dot:nth-child(6n+7)::before {
color: var(--li-color-0);
}
番号つきリスト
code:style.css
.line.number-list .dot { display: list-item; } /* 表示する */
アイコン指定
code:style.css
.line.number-list .dot::before {
position: inherit;
top: -11px;
/* content: '\f292'; /* #:通常 */ /* content: '\f2dc'; /* 雪:クリスマス用 */
content: var(--ol-bullet, '\f292');
font-size: 4px;
}
フォントサイズ
code:style.css
.line.number-list .c-0 + .dot::before { font-size: 8px; }
.line.number-list .c-1 + .dot::before { font-size: 7px; }
.line.number-list .c-2 + .dot::before { font-size: 6px; }
.line.number-list .c-3 + .dot::before { font-size: 5px; }
.line.number-list .c-4 + .dot::before { font-size: 4px; }
Settings.icon
UserCSS.icon