UserCSS:補助画像
haku
code:style.css
:root {
--haku-san-text: "💗おはようございます、マスター💗"; /* */
--haku-san-text-color: black; /* */
--haku-san-background-color: transparent; /* */
--haku-san-image: url('https://scrapbox.io/api/pages/suto3/haku/icon#.png');
--haku-san-size: 400px;
}
code:style.css
/* #haku をつけると… */
@media only screen and (min-width: 480px) {
atype="hashTag"href="/suto3/haku"::after {
content: var(--haku-san-text);
color: var(--haku-san-text-color);
background-color: var(--haku-san-background-color);
background-image: var(--haku-san-image);
background-size: var(--haku-san-size) calc(var(--haku-san-size) + 30px) ;/* */
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
display: block;
width: var(--haku-san-size);
height: calc(var(--haku-san-size) + 30px); /* */
position: fixed;
/* right: 0px; /* */
right: 8px; /* */
/* bottom: 0px; /* */
bottom: 30px; /* */
}
}
弱音ハク
code:style.css
@media only screen and (min-width: 480px) {
atype="hashTag"href="/suto3/%E5%BC%B1%E9%9F%B3%E3%83%8F%E3%82%AF"::after {
content: "";
/* background-image: url('https://i.gyazo.com/b127eec709b9e9882e7380073f5e836c.png'); /* */
background-image: url('https://scrapbox.io/api/pages/suto3/弱音ハク/icon#.png');
background-size: 400px 400px; /* */
display: block;
width: 400px;
height: 400px;
position: fixed;
right: 0px;
bottom: 0px;
}
}
たいへんよくできました
code:style.css
:root {
--very-good-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/たいへんよくできました/good.svg');
--very-good-size: 10vw;
--very-good-opacity: 1;
}
code:style.css
@media only screen and (min-width: 480px) {
atype="hashTag"href="/suto3/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F"::after {
content: "";
background-image: var(--very-good-image);
background-size: var(--very-good-size) var(--very-good-size); /* */
opacity: var(--very-good-opacity);
display: block;
width: var(--very-good-size);
height: var(--very-good-size);
position: fixed;
left: 0px;
bottom: 30px;
}
}
code:stylexx.css
@media only screen and (min-width: 480px) {
atype="hashTag"href="/suto3/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F"::after {
position: fixed;
bottom: 30;
left: 0;
display: block;
width: var(--very-good-size);
height: var(--very-good-size);
content: "";
background-image: var(--very-good-image); /* */
background-size: var(--very-good-size) var(--very-good-size);
opacity: var(--very-good-opacity);
}
}
クオリアさん
code:style.css
:root {
--qualia-san-text: "ようこそ愚かなホモサピエンス"; /* */
--qualia-san-text-color: gray; /* */
--qualia-san-background-color: transparent; /* */
--qualia-san-image: url('/api/pages/suto3/クオリアさん/icon');
--qualia-san-size: 255px;
--qualia-san-opacity: 1;
}
code:style.css
@media only screen and (min-width: 960px) {
atype="hashTag"href="/suto3/%E3%82%AF%E3%82%AA%E3%83%AA%E3%82%A2%E3%81%95%E3%82%93"::after {
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);
display: block;
width: var(--qualia-san-size);
/* height: var(--qualia-san-size); /* */
height: calc(var(--qualia-san-size) + 2vw); /**/
position: fixed;
/* right: 0px; /* */
right: 8px; /* */
/* bottom: 0px; /* */
bottom: 1vw; /* */
}
atype="hashTag"href="/suto3/Qualia-san"::after {
content: "";
/* background-image: url('/api/pages/suto3scratchpad/クオリアさん/icon'); */
/* background-image: url('/api/pages/suto3scratchpad/Qualia-san/icon'); /* */
background-image: url('/api/pages/qualia-san/Qualia-san/icon');
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
bottom: 0px;
}
}
天気図
code:style.css
@media only screen and (min-width: 960px) {
atype="hashTag"href="/suto3/%E5%A4%A9%E6%B0%97%E5%9B%B3"::after {
content: "";
background-image: url('https://takker-weather.vercel.app/jma/weather-map/archives/today.png'); /* */
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
top: 40px;
}
}
現場猫
code:style.css
@media only screen and (min-width: 960px) {
atype="hashTag"href="/suto3/%E3%83%A8%E3%82%B7!"::after {
content: ""; /* */
/* content: url("https://www.youtube.com/watch?v=kScZmP2scV4"); */
background-image: url('/api/pages/villagepump/現場猫/icon'); /* */
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
top: 40px;　/* */
/* top: 296px;　/* */
}
Unsplash
code:style.css
@media only screen and (min-width: 960px) {
atype="hashTag"href="/suto3/Unsplash"::after {
content: "";
background-image: url('https://source.unsplash.com/featured/?wallpaper-for-mobile'); /* */
background-size: 255px 383px; /* */
display: block;
width: 255px;
height: 383px;
position: fixed;
right: 0px;
/* top: 40px;　/* */
top: 296px;　/* */
}
cheat-sheet
code:style.css
@media only screen and (min-width: 1366px) {
atype="hashTag"href="/suto3/cheat-sheet"::after {
content: "";
background-image: url('https://plantuml-proxy.vercel.app/svg/https://scrapbox.io/api/code/suto3scratchpad/cheat-sheet/sticky02.pu#.svg'); /* */
/* background-size: 255px 767px; /* */
background-size: 280px 840px; /* */
display: block;
/* width: 255px; /* */
width: 280px; /* */
height: 840px;
position: fixed;
left: 0px;
top: 40px;　/* */
/* top: 120px;　/* */
/* top: 296px;　/* */
}
python-cheat-sheet
code:style.css
@media only screen and (min-width: 1366px) {
atype="hashTag"href="/suto3/python-cheat-sheet"::after {
content: "";
background-image: url('https://plantuml-proxy.vercel.app/svg/https://scrapbox.io/api/code/suto3scratchpad/python-cheat-sheet/cs01.pu#.svg'); /* */
/* background-size: 255px 767px; /* */
background-size: 280px 840px; /* */
display: block;
/* width: 255px; /* */
width: 280px; /* */
height: 840px;
position: fixed;
left: 0px;
top: 40px;　/* */
/* top: 120px;　/* */
/* top: 296px;　/* */
}
}
memo-memo
code:style.css
@media only screen and (min-width: 1366px) {
atype="hashTag"href="/suto3/memo-memo"::after {
content: "";
background-image: url('/api/pages/suto3/memo-memo/icon'); /* */
/* background-size: 255px 767px; /* */
background-size: 255px 255px; /* */
display: block;
/* width: 255px; /* */
width: 255px; /* */
height: 255px;
position: fixed;
left:10px;
top: 40px;　/* */
/* top: 120px;　/* */
/* top: 296px;　/* */
}
}
haku
弱音ハク
Qualia-san
クオリアさん
天気図
ヨシ!
Unsplash
たいへんよくできました
cheat-sheet
python-cheat-sheet
#memo-memo
https://img.shields.io/badge/UserCSS-補助画像-1572B6.svg?logo=css3&style=for-the-badge