settings
https://scrapbox.io/files/65640d9264f7bd001b63ca30.png
この記事は何？
様々な設定をする記事です。
Scrapboxでは、settingsという記事にstyle.cssを↓のような感じで書くとCSSカスタマイズができます。
Scrapboxは、最初にピン留めしてある記事に埋め込んだ最初の画像をfaviconにできます。
やってること
フォント
フォントを読み込み
code:style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Kurenaido&display=swap');
@import url('https://use.fontawesome.com/releases/v6.6.0/css/all.css');
色
色の変更
code:style.css
htmldata-project-theme=default-dark {
--color-base: #222244; /* AyaExpTech */
--body-bg: oklch(from var(--color-base) 0.20 0.02 h);
--navbar-bg: oklch(from var(--color-base) 0.30 0.01 h);
--page-bg: oklch(from var(--color-base) 0.30 0.01 h);
--card-bg: oklch(from var(--color-base) 0.30 0.01 h);
--page-text-color: oklch(from var(--color-base) 0.85 0.01 h);
}
記法の追加
角括弧内に> 文字列で黒背景(メンバーが思ったことを"メンバー名「内容」"と書くときに使用) (一部/villagepump/インライン引用記法を参考に修正)
code:style.css
span.deco-\>:not(:is(.deco-\!, .deco-\#, .deco-\%)) {
padding: 0em 0.25rem;
background-color: #222;
}
角括弧内に>! 文字列で赤背景
code:style.css
spanclass*=deco-\>\ deco-\! {
border-bottom: double;
border-color: #844;
border-width: 3px;
background-color: #522;
}
角括弧内に># 文字列で緑背景
code:style.css
spanclass*=deco-\>\ deco-\# {
background-color: #252;
}
角括弧内に"{ 文字列"・"} 文字列"で角括弧エスケープ(自作)
code:style.css
div.line:not(.cursor-line) .deco-\{::before {
content: "[";
}
div.line:not(.cursor-line) .deco-\}::after {
content: "]";
}
[& 〇〇][& 〇〇]ルビ代替記法(自作)
code:style.css
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img)) {
vertical-align: -5%;
font-size: 70%;
}
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img))::before {
content: '(';
margin-left: 0.25rem;
}
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img))::after {
content: ')';
margin-right: 0.25rem;
}
[& [img.png]]画像最大サイズを制限(自作)
code:style.css
.deco-\&:has(img) .image {
max-height: 150px;
max-width: 25%;
}
全般
左上にサブタイトルを追加
code:style.css
.project-home .title {
&::after {
content: " ― Ayasaka-Koto × AyagawaP expresses through techs.";
font: 1.2rem/1.2rem 'M PLUS 1p';
}
}
フォントをM PLUS 1pに変更
code:style.css
* {
font-family: 'M PLUS 1p';
}
Font Awesome 6 Freeを追加
code:style.css
.fontawesome {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
数学ブロックだけフォントを対応できるものに再上書き
code:style.css
.katex * {
font-family: KaTeX_Main;
}
コードブロックのフォントを等幅にするよう明示(自作)
code:style.css
code, code * {
font-family: 'M PLUS 1 Code', monospace;
font-weight: 400;
}
左上のプロジェクト名のフォントをUbuntuにする(自作)
code:style.css
span.title {
font-family: 'Ubuntu', Monospace;
font-weight: 400;
}
ホーム画面のページリストの高さを調整
code:style.css
.page-list .grid li:not(.pin) {
height: 128px;
}
ごく僅かにページのpaddingを減らす + ページの影を少しだけ下以外にも出す
code:style.css
.page {
padding: 40px 49px;
box-shadow: 0 4px 5px rgb(0 0 0 / 17%);
}
@media (max-width: 767px) {
.page {
padding: 26px 21px;
}
}
箇条書きを控えめなものにする (from:/scrasobox/箇条書きを控えめにする, 改変)
code:style.css
.app .line .indent-mark .dot {
height: .1em;
width: .4em;
border-radius: 20%;
background-color: #8b8bb1;
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
番号付きリストで点を薄くする (自作)
code:style.css
.app:not(.presentation) .line.number-list .indent-mark .dot {
background-color: #8b8bb180;
}
カーソルを強調表示・点滅・太く(from : /foldrr/settings, 一部改変)
code:style.css
.cursor-line {
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.1);
}
.cursor {
width: 2px !important;
background-color: rgb(57, 172, 134);
}
.cursor {
color: rgb(57, 172, 134);
border-color: rgb(57, 172, 134);
}
.cursor svg {
display: none;
}
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor { animation: blink .5s infinite }
/* 同時作業中のユーザーのカーソルは点滅させない */
.shared-cursors .cursor {
background-color: #309030;
animation: none;
}
外部リンクにそれっぽいアイコンを付ける(from:/foldrr/settings, 改変)
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(:is(href*=https\:\/\/twitter\.com\/, href*=https\:\/\/x\.com\/)):not(.icon)::after {
margin-left : 4px;
display : inline-block;
font-family : 'Font Awesome 6 Free';
font-weight : 900;
content : '\f35d';
text-decoration: none;
}
streamボタンを表示
code:style.css
.navbar .navbar-menu>li.stream-btn {
display: revert;
& span.kamon {
color: var(--tool-color);
}
}
上部のナビバーに影をつける(自作)
code:style.css
.navbar {
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}
箇条書き内にコードブロックがある場合、箇条書きの点を消す(自作)
code:style.css
.code-block:not(.start):has(.dot) .dot {
display: none;
}
リンクのホバー時の見た目を変える
code:style.css
.page .line:not(.cursor-line) a:is(.link, .page-link):not(:has(>img.icon)) {
display: inline-block;
position: relative;
text-decoration: none;
&::before {
content: '';
position: absolute;
left: 0%;
bottom: 7.5%;
width: 100%;
height: 2px;
background-color: oklch(55% .2 270 / .4);
transition: height 0.2s, background-color 0.2s;
pointer-events: none;
}
&:hover::before {
height: calc(100% - 6px);
background-color: oklch(55% .2 270 / .2);
}
&.big-page-link {
&::before {
background-color: oklch(55% .2 315 / .4);
}
&:hover::before {
background-color: oklch(55% .2 315 / .2);
}
}
&.empty-page-link {
&::before {
background-color: oklch(55% .2 0 / .4);
}
&:hover::before {
background-color: oklch(55% .2 0 / .2);
}
}
}
.line a.big-page-link {
font-weight: inherit;
}
.line:not(.cursor-line) span.deco-- a:is(.link, .page-link):not(:has(>img.icon)) {
text-decoration: line-through;
}
表が含まれるページで横スクロールを有効化する(自作)
code:style.css
.page:has(.table-block-row) {
overflow-y: hidden;
overflow-x: scroll;
}
.page:has(.table-block-row)::-webkit-scrollbar {
display: none;
}
記事の横幅を広げる(自作)
code:style.css
.page-column:has(.page-menu) {
grid-template-columns: minmax(200px, calc(100% - 46px)) 0 min-content;
&:has(div.infobox) {
grid-template-columns: minmax(200px, calc(100% - calc(46px + 36rem))) 36rem min-content;
}
}
.container {
max-width: 90%;
}
[/icons/hr.icon], [/icons/---.icon]を横幅いっぱいに表示する(自作)
code:style.css
a:has(img.icon:is(title="hr", title="---")) {
position: relative;
width: 100%;
}
a:has(img.icon:is(title="hr", title="---"))::before {
display: none;
}
img.icon:is(title="hr", title="---") {
width: 100%;
object-fit: cover;
}
表の色を濃くする(自作)
code:style.css
.table-block .cell:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.6);
}
.table-block .cell:nth-child(even) {
background-color: rgba(0, 0, 0, 0.3);
}
KaTeX記法のサイズを1段階小さく(自作)
code:style.css
.katex-display {
font-size: smaller;
}
KaTeX記法の左右marginを消す
code:style.css
.line .formula {
margin-inline: 0;
}
画像クリックで拡大→モーダルの周りを暗くする
code:style.css
.modal {
transition: background 0.2s;
}
.modal-open .modal {
background: #000000aa;
}
.modal-body {
filter: drop-shadow(0px 2px 8px black);
}
縦に長い行でも箇条書きの点の位置を真ん中に
code:style.css
.line .indent-mark {
height: 100%;
}
.app:not(.presentation) .line .indent-mark .dot {
bottom : 50%;
}
Youtubeプレイヤー埋め込みを見やすい大きさに
code:style.css
.iframe-video-player iframe.youtube {
max-width: 40vw;
max-height: 40vh;
aspect-ratio: 16/9;
}
infoboxの左右paddingを広げておく
code:style.css
.related-page-list.has-literate-database {
padding: 8rem 8rem;
}
.related-page-list.has-literate-database table.literate-database {
width:100%
}
アイコン記法の位置を微妙に調整
code:style.css
.line img.icon {
top: 0;
}
トップページ
1ページあたりの横幅を調整
code:style.css
.page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
ピン留めした記事を独立した段に表示する(from : /customize/ピン留めされたページを独立した段に表示する)
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
ピン留め記事は小さく表示する(from : /arpla/ピン留めを小さなパネルにするUserCSS, 改変)
code:style.css
.grid li.page-list-item {
width: 100%;
}
.grid li.page-list-item.pin {
height: 30px;
}
.grid li.page-list-item.pin .header {
border-top:none;
padding: 5px 10px;
}
.grid li.page-list-item a .pin, .grid li.page-list-item.pin .content :is(.description,.icon) {background: none;}
.grid li.page-list-item.pin .content .header.pinned {
overflow-wrap: break-word;
& .title {
font-weight: 600;
}
}
div.pinned > div.title::before {
content: "\f08d";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 4px;
}
ページアイコンが表示される場合、アイコンを範囲内に抑える
code:style.css
.grid li.page-list-item a .icon img {
height: 100%;
object-fit: contain;
}