Settings
https://scrapbox.io/files/68b03676ca8382ddb28a427f.gif
---
フォント変更
from /work4ai/settings
IBM Plex Sans JP
code:style.css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;700&display=swap');
html, body, #editor, .grid li {
font-family: 'IBM Plex Sans JP', 'calibri', 'Zen Kaku Gothic New', "YuGothic", 'Yu Gothic', "Font Awesome 5 Free", "Font Awesome 5 Brands", "Roboto", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.project-home {
font-family: 'IBM Plex Sans JP';
font-weight: 500 !important;
font-size: 12px;
}
/villagepump/borderでインデントに縦線を表示するUserCSS
/Mijinko/インデントに縦線を表示するUserCSS
code:style.css
.lines .line{
.indent-mark{height: 100%}
.table-block .indent-mark{height: auto}/*tableは除外する*/
}
.indent-mark{
.pad{
height: 100% !important;
overflow: unset !important;
}
span:not(:nth-last-child(-n+2)) .pad{
border-right: 1px solid #DADADA;
}
}
背景色・ボックスシャドウ消し・ドロップシャドウ
code:style.css
body{
background-color: #EEF3F3;
}
code:style.css
/* ドロップシャドウ */
.grid li.page-list-item a {
box-shadow:none;
padding: 0 5%;
filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
}
/* ページ設定 */
.page {
box-shadow:none;
background-color: #FFFFFF;
}
/* グリッド小さく */
.page-list ul.grid {
display: grid
gap: clamp(2px, 1.5px, 4px);
}
カーソルを点滅させる
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor {
animation: blink 1s infinite
}
スクロールバー
code:style.css
::-webkit-scrollbar-track{
background-color: white;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-thumb{
background-color: #cccccc;
border-radius: 0px;
}
テロメアの色
code:style.css
--telomere-updated: var(--accent-color);
navbar透明・検索周り
/onmk/Settings
code:style.css
.navbar {
background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
backdrop-filter: none;
border-bottom: 0px solid var(--navbar-border-color, transparent);
}
.search-form .form-group input {
border-radius: 100vh;
padding: 0 20px;
backdrop-filter: blur(4px);
webkit-backdrop-filter: blur(4px);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.search-form .form-group button {
right: 8px;
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, var(--card-backside, transparent), var(--card-backside, transparent) 50%, var(--body-bg, #dcdde0) 50%, var(--body-bg, #dcdde0));
}
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
overscroll-behavior: none;
}
/yozba/ピン止めとピン止めしてない.page-list-itemの間に線を引く
code:style.css
.page-list .grid {
position: relative;
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
position: static;
&:before{
content: "";
position: absolute;
border-top: solid 2px #6f92a1;
width: 100%;
margin-top: -22px;
}
}
li.pin:not(:has(~ li.pin)) {
margin-bottom: 30px;
}
画像サイズ
code:style.css
.line .image {
max-height: 90% !important;
max-width: 90% !important;
}
サムネイル画像
code:style.css
.grid li.page-list-item a .content .icon {
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
img {
width: auto;
max-width: 90%;
max-height: none;
border-radius: 8px;
object-fit: contain;
}
}
ピンされたページの次の非ピンページの配置調整
code:style.css
/* ピンされたページの次の非ピンページの配置調整 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
ピン止めページのピン
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 20px;
color: #9CDB2E;
bottom: -20px;
position: absolute;
left: -10px;
transform: rotate(35deg);
}
カードデザイン
from /kyre/settings#67515f3392b6b6000070e80e
一部変更
code:style.css
.page-list {
.grid {
li.pin {
a {
width: 100%;
outline: none;
.content {
height: 100%;
flex-direction: row-reverse;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
.header.pinned {
position: absolute;
bottom: 5px;
right: 0;
padding: 0;
width: auto;
display: block;
background-color: #fff;
z-index: 1;
.title {
color: transparent;
font-weight: 500;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #272822 50%, #272822 50%);
background-size: 200% 100%;
background-position-x: 0;
padding: 0 5px 0 7px;
width: auto;
}
}
.description {
display: none;
}
}
}
/* a */
&:first-of-type {
grid-column-start: span 2;
grid-row-start: span 2;
}
}
}
}
.page-list,
.related-page-list {
.grid {
li {
aspect-ratio: 1/1;
&.pin+li:not(.pin) {
grid-column-start: 1;
}
a {
box-shadow: none;
border-radius: 0px;
overflow: visible;
.content {
height: 100%;
.header {
border-top: none;
.title {
text-align: center;
}
}
}
}
}
}
}
テーブルデザイン
/customize/テーブルを派手めに表示するUserCSS
/customize/テーブルの見た目をカスタマイズ
上を参考にコード変更
code:style.css
.table-block .table-block-start {
background-color: transparent;
}
.table-block .table-block-start a {
color: var(--accent-color);
}
.table-block .cell {
border-right: solid 3px #FFFFFF;
border-bottom: solid 3px #FFFFFF;
}
/*1列目*/
.table-block .cell:nth-child(1) {
background-color: #daf2d0;
}
/*1行目*/
.line:has( .table-block-start ) + .line .table-block .cell:nth-child(n+1) {
background-color: #daf2d0;
}
.table-block .cell:nth-child(2n+3){
background-color: #f2f2f2;
}
.table-block .cell:nth-child(2n+2){
background-color: #f2f2f2;
}
/*1番左上が0文字でないならば、1行目を灰色に塗る*/
/*ただし、1番左上は灰色に塗らない*/
.line:has( .table-block-start ) + .line .table-block:not(:has(spandata-char-index="1"data-char=" ")) .cell:nth-child(n+2) {
background-color: #f2f2f2;
}
左上のセルに注目
表（2要素）
table:test
1 2 3 4 5
A a b c d e
B b c d e f
C c d e f g
D d e f g h
表（1要素）
table:test
S 1 2 3 4 5
A a b c d e
B b c d e f
C c d e f g
D d e f g h
table:test
Alice a b c d e
Bob b c d e f
Carol c d e f g
Dave d e f g h
左上のロゴ変更
https://scrapbox.io/files/68b15ccfe94d23bc141af28e.png
from /InterestingProjects/settings
code:style.css
.brand-icon {
--logo-url: url('https://scrapbox.io/files/68b15ccfe94d23bc141af28e.png');
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-color: #d1d3d7;
background-size:cover;
background-repeat:no-repeat;
border-radius: 5%;
svg {display: none;}
}
記事タイトルの設定
from /customize/Dark Theme CSS
code:style.css
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-left: solid 7.5px #999;
border-bottom: solid 2px #BBB !important;
font-weight: normal;
font-size: 30px;
position: relative; left: -15px;
}
ハッシュタグの見た目をよくする
code:style.css
atype="hashTag" {
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: 0.9em;
}
#settings
コードの行番号を表示する
/scrasobox/コードの行番号を表示する
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline }
.code-block code > span:not(class)::before {
content: counter(codeline);
position: absolute; display: inline-block; left: -4em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 }
.cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } }
行頭に---を入れるだけでセパレーターになるUserCSS
from: /yozba/行頭に---を入れるだけでセパレーターになるUserCSS
code:style.css
.line:has(span.char-index.c-0data-char="-"):has(span.char-index.c-1data-char="-"):has(span.char-index.c-2data-char="-"){
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
border-top: 1px solid #afafaf;
}
&:not(.cursor-line){
height:28px;
}
}
.line:not(.cursor-line):has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-") span.char-index{
&.c-0data-char="-",
&.c-1data-char="-",
&.c-2data-char="-"{
display:none;
}
}
---
参考文献：
Scrapboxカスタマイズコレクション
/customize