settings
https://gyazo.com/2b64335d2d5068a4c2b8db07b5604d68
/ci7lus
スマホ向けのバーがかっこいい
吹き出し記法
code:style.css
@import '/api/code/motoso/吹き出し記法/style.css';
本文のフォントを変更 via /masui/settings#5eb740908ee92a00000ba104
Scrapboxの本文フォントをNoto Sansに変更した
https://googlefonts.github.io/japanese/
このstyle.cssはこのページのトップにないと有効にならない
@importがあるからだね
abc 太字にならない...
abcいやちょっと太いな?
abc
なぜ?
mac Chromeだと太字にならない
iOSでは太字になる
太字になるフォントとならないフォントがある
太字になる
https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c
太字にならない
https://fonts.googleapis.com/css?family=Noto+Sans+JP
https://fonts.googleapis.com/css?family=Sawarabi+Gothic
太字ががたがたになる
https://fonts.googleapis.com/earlyaccess/kokoro.css
https://fonts.googleapis.com/earlyaccess/hannari.css
code:style.css.disable
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
html, body, #editor, .grid li {
font-family: helvetica, arial, "Noto Sans JP", sans-serif ;
}
インライン引用記法
/villagepump/インライン引用記法
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
/* font-style: italic; */
}
.line:not(.cursor-line) .deco-\"::before {
color: #a0a0a0;
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
ScrapCalc
code:style.css
.deco-\% {
color: #393a4a;
background-color: rgba(120, 172, 255, 0.15);
padding: 0.1em 0.2em 0.1em 0.2em;
}
.scrapcalc_result {
font-style:italic;
font-weight:bold;
background-color:yellow;
}
/villagepump/検索結果で❌から始まる候補を区別するUserCSS
code:style.css
.search-form .dropdown-menu .dropdown-item>ahref^="/motoso/%E2%9D%8C" {
color: gray;
}
.search-form .dropdown-menu .dropdown-item>ahref^="/motoso/%E2%9D%8C"::before {
content: "(表記ゆれ)";
font-size: 10px;
vertical-align: bottom;
}
via /takker/settings
privateのScrapboxのリンクを張っておきたいときに使う
https://gyazo.com/6a2dfd0d7ed019ccb7e549f168beaa2a
code:style.css
.page-linkhref^="/motosoh":before{content:"\1f512"}
.page-linkhref^="/motoso-law":before{content:"\1f512"}
/takker/リンクを出典アイコンにするUserCSS
/villagepump/リンクを出典アイコンにするUserCSS
[./ [/takker/リンクを出典アイコンにするUserCSS]]
code:style.css
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}
プロジェクトタイトル
via /nwtgck/settings#5d2ad4d5d08a040000bb8a64
2024-04-17にCSSが変更されて壊れた
code:style.css
/* Project description */
.project-home > .title:after {
content: " - Long-term greedy";
white-space: pre;
font-size: 0.7em;
}
背景の画像を変える
https://www.transparenttextures.com/
code:style.css
body {
background-color: #cfd1e8;
background-image: url("https://i.gyazo.com/8d65198f72652e8887d2c941f39805b4.png");
}
/* 付箋の折返しを背景と同色に */
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, var(--card-backside, #aaa), var(--card-backside, #aaa) 50%, #cfd1e8 50%, #cfd1e8)
}
PC版ブランドアイコンの変更
/nwtgck/settings#5d2ad4ffd08a040000bb8a67
code:style.css
/* Overwrite the brand icon */
.brand-icon {
--logo-url: url("https://i.gyazo.com/c7a4f6f00515ecf3b5a7c7e1088c9562.png");
width: 36px;
height: 36px;
background-color: white;
background-position: center;
background-size: cover;
border: 4px solid transparent;
border-radius: 50%;
}
.brand-icon {
background-image: var(--logo-url);
background-repeat: no-repeat;
}
.brand-icon svg {
display: none;
}
運用停止中
/scrasobox/のびのびドロップダウン
[* ]<-これに蛍光のラインを足す
settings - ???? - Scrapbox
文字装飾記法 - Scrapbox ヘルプ - Scrapbox
ナビゲーションの色を変える
/miyamonz/settings
code:style.css
.navbar {
/* #78ACFF #816BFF #6172E8*/
background: linear-gradient(90deg, rgba(120, 172, 255, 0.7), rgba(97, 114, 232, 0.7) 20% 40%, rgba(129, 107, 255, 0.7) 60%);
}
テロメアの色を変更
code:style.css
.line .telomere .telomere-border.unread {
border-color: #78ACFF;
}
#で始まるタグをラベル風にする
/memooooo/settings#58dbc7d56596a40000c7f7e2
Scrapboxがラベル風になっていないのは、おそらく文脈の中の単語をハッシュタグにすることが価値がある使い方だと想定しているから
HashTagでも関係性を表現したほうがいい
code:style.css
/* #で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 4px;
background-color: rgba(12, 12, 13, 0.1);
color: #090909;
font-size: 0.8em;
/* border: 1px solid #61B8E8; */
border-radius: 3px;
transition: .1s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
background: rgba(97, 114, 232, 0.3);
/* border: 1px solid #6172E8; */
}
atype="hashTag":active{
background: rgba(97, 114, 232, 0.4);
/* border: 1px solid #6172E8; */
}
行頭のドットを薄く
/masui/settings#5ac538a38ee92a00007536d2
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #6172E8;
}