/suto3/UserCSS:補助画像

generated at 2/11/2025, 10:13:08 AM
UserCSS:補助画像
haku
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;
}

style.css/* #haku をつけると… */
@media only screen and (min-width: 480px) {
  a[type="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; /* */
   }
 }

弱音ハク
style.css @media only screen and (min-width: 480px) {
  a[type="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;
   }
 }

たいへんよくできました
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;
}

style.css@media only screen and (min-width: 480px) {
  a[type="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;
   }
 }

stylexx.css@media only screen and (min-width: 480px) {
  a[type="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);
  }
}

クオリアさん
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;  
}

style.css@media only screen and (min-width: 960px) {
  a[type="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; /* */
   }
  a[type="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;
   }
}

天気図
style.css@media only screen and (min-width: 960px) {
  a[type="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;
   }
}

現場猫
style.css@media only screen and (min-width: 960px) {
  a[type="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
style.css@media only screen and (min-width: 960px) {
  a[type="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
style.css@media only screen and (min-width: 1366px) {
  a[type="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
style.css@media only screen and (min-width: 1366px) {
  a[type="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
style.css@media only screen and (min-width: 1366px) {
  a[type="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