suto3

https://scrapbox.io/api/pages/suto3/suto3/icon#.png

https://gyazo.com/1e3180e3bcab79cd1187b3c24e0e2758

https://scrapbox.io/files/5f2e340a93343a001e5ec068.svg

どうかよろしく。

code:style.css

/* @import "/api/code/suto3/suto3/style.css"; /* */

/* @import "/api/code/scrapboxlab/レインボー記法/style.css"; /* レインボー記法用 */

@import "/api/code/scrapboxlab/箇条書きのバレットをFontAwesomeにするUserCSS/style.css"; /* */

code:style.css

:root {

--logo-url: url('/api/pages/scrapboxlab/入会手続き/icon'); /* */

/* 背景色 */

--brand-icon-background-color : pink; /* */

/* hover時の画像 */

}

code:style.css

.brand-icon {

display: block;

flex-shrink: 0;

height: 36px;

aspect-ratio: 1; /* */

background-image: var(--logo-url); /* */

background-repeat: no-repeat;

background-size: contain;

background-position: right bottom;

background-color: var(--brand-icon-background-color); /* */

border-radius: 4px; /* 角丸 */

}

.brand-icon svg { display: none; } /* */

/* hover時に画像を切替える */

.brand-icon:hover {

height: 64px;

background-image: var(--brand-icon-hover-image); /* */

}

code:script.js

import '/api/code/suto3/suto3/script.js'