UserCSS:箇条書きのビュレットに画像を使う
画像をさがすのが大変
あ
か
さ
た
な
ビュレットを画像にする
code:style.css
root{
--eye-chacher: url("https://openclipart.org/download/213934/1423572083.svg"); /* */
}
code:stylexx.css
.line .indent-mark .dot::before {
content: ''; /* */
width: 14px;
height: 14px;
padding: 14px;
/*position: absolute;*/
/*position: right bottom;*/
position: left center;
/*ここに画像へのリンクを貼る*/
background-image: var(--eye-chacher); /* */
background-size: cover;
border-radius: 4px;
}
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
code:style.css
.line .indent-mark .dot::before {
content: ''; /* */
width: 1em;
height: 1em;
/*width: 10px;*/
/* height: 10px;*/
padding: 12px;
position: absolute; /* */
/*position: right bottom;*/
/*position: left center;*/
right: -5px;
top: -10px;
/*ここに画像へのリンクを貼る*/
background-image: var(--eye-chacher); /* */
background-size: cover; /* */
/* background-size: contain; /* */
border-radius: 4px;
}
code:style.css
.line .indent-mark .c-0 + .dot::before {
background-color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
background-color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
background-color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
background-color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
background-color: var(--li-color-5);
}
すべての階層に画像を割り当てる
画像をさがすのが大変
code:stylexx.css
:root {
--lv0: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
/*　--lv1: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
--lv1: url(https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png); /* ビーバー君 */
--lv2: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
--lv3: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
--lv4: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
/* --lv5: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
--lv5: url(https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png); /* ビーバー君 */
}
.line .indent-mark .dot::before {
content: '';
width: 18px;
height: 18px;
padding: 18px;
/*position: absolute;*/
position: left center;
background-image: var(--lv5);
background-size: cover;
border-radius: 4px
}
.line .indent-mark .c-0 + .dot::before {
background-image: var(--lv0);
background-color: var(--li-color-def);
}
.line .indent-mark .c-1 + .dot::before {
background-image: var(--lv1);
background-color: var(--li-color-1);
}
.line .indent-mark .c-2 + .dot::before {
background-image: var(--lv2);
background-color: var(--li-color-2);
}
.line .indent-mark .c-3 + .dot::before {
background-image: var(--lv3);
background-color: var(--li-color-3);
}
.line .indent-mark .c-4 + .dot::before {
background-image: var(--lv4);
background-color: var(--li-color-4);
}
UserCSS:箇条書き
箇条書き
ビュレット
Web素材 - フリー素材
UserCSS.icon
https://img.shields.io/badge/UserCSS-箇条書きのビュレットに画像を使う-1572B6.svg?logo=css3&style=for-the-badge