クオリアさんが見ているUserCSS
style.css:root {
--qualia-san-text: "ようこそ愚かなホモサピエンス"; /* */
--qualia-san-text-color: gray; /* */
--qualia-san-background-color: transparent; /* */
--qualia-san-image: url('/api/pages/villagepump/Qualia-san/icon');
--qualia-san-size: 300px;
--qualia-san-opacity: 1;
}style.css@media only screen and (min-width: 480px) {
a[type="hashTag"][href="/villagepump/%E3%82%AF%E3%82%AA%E3%83%AA%E3%82%A2%E3%81%95%E3%82%93"]::after {
/* --size: 300px; */
position: fixed;
right: 0;
bottom: 0;
display: block;
/* width: var(--size); */
/* height: var(--size); */
width: var(--qualia-san-size);
height: calc(var(--qualia-san-size) + 2vw); /**/
/* content: ""; */
/* background-image: url("/api/pages/villagepump/Qualia-san/icon"); */
/* background-size: var(--size) var(--size); */
content: var(--qualia-san-text);
color: var(--qualia-san-text-color);
background-color: var(--qualia-san-background-color);
font-weight: bold;
white-space: pre; /* */
font-size: 1.2em; /* */
border-radius: 10px; /*角丸*/
background-image: var(--qualia-san-image);
background-size: var(--qualia-san-size) calc(var(--qualia-san-size) + 2vw) ;/* */
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
opacity: var(--qualia-san-opacity);
}
}
✅アルファチャネルがほしい
透過されました
Just Monika 元ネタ
APIから
/api/pages/villagepump/Qualia-san/icon の画像を引っ張ってくる結果、Qualia-san
の画像が表示される
Qualia-sanのページタイトル画像を変更すれば、表示される画像も変更される
2024-02-23
変数を使うようにした
lintとformatをした
2024/05/06
CSS変数を外出しして、ユーザーによるカスタマイズを容易にした
テキスト表示を追加
テキスト色、背景色を追加
画像をCSS変数にして差し替え可能にした
透明度（opacity）を追加