settings
あらゆる人のCSSを参考にしております。ありがとうございます。
工事中.icon
メインのデザイン
色（ダークテーマ切替対応）
参考: /scrapboxlab/UserCSS_で使える変数
code:style.css
body {
/*メイン*/
--body-bg: #f0f0f3; /*背景*/
--card-bg: 255, 255, 255; /*ページカードの背景*/
--card-backside: #26de41;
--card-box-hover-shadow: transparent;
--card-title-color: #111;
--card-title-bg: #36eb51;
--card-description-color: #b0b0b0;
--card-description-link-color: var(--page-link-color);
/*ヘッダー*/
--navbar-bg: #fff;
--navbar-title-color: #555;
--search-form-bg: #f2f2f2;
/*ページ*/
--page-bg: #fff; /*文字が書いているところの背景*/
--line-title-color: #444;
--page-text-color: #555;
--page-link-color: #6e8af3;
--page-link-hover-color: #3f57b1;
--page-link-color-cursor-line: #6e8af3;
--empty-page-link-color: #a5b5ad;
--empty-page-link-hover-color: #76827C;
/*テロメア*/
--telomere-border: #e8e8e8;
--telomere-unread: #C0ebc7;
--telomere-updated: #000;
/*メニューバー*/
--tool-color: #8a8a8a;
--tool-text-color: #8a8a8a;
--tool-bg: #ddd;
/*関連リンク欄*/
--2hop-search-bg: var(--page-bg);
--relation-label-bg: #a5aecf;
--relation-label-links-bg: var(--page-link-color);
--relation-label-empty-bg: var(--empty-page-link-color);
--relation-label-text: #222;
--relation-label-empty-text: #222;
/*コード*/
--code-bg: #ededed;
--code-coler: #d3d3d3;
--code-number-color: #000;
}
@media (prefers-color-scheme: dark) {
body {
/*メイン*/
--body-bg: #1d1f1d; /*背景*/
--card-bg: 54, 54, 54; /*ページカードの背景*/
--card-backside: #26de41;
--card-box-hover-shadow: transparent;
--card-title-color: #eee;
--card-title-bg: #36eb51;
--card-description-color: #b0b0b0;
--card-description-link-color: var(--page-link-color);
/*ヘッダー*/
--navbar-bg: #222526;
--navbar-title-color: #fff;
--navbar-icon-color: #fff;
--search-form-bg: #3f4142;
--search-form-icon-color: #ddd;
/*ページ*/
--page-bg: #383838; /*文字が書いているところの背景*/
--line-title-color: #e5e5e5;
--page-text-color: #e5e5e5;
--page-link-color: #80c9fe;
--page-link-hover-color: #6a9ec6;
--page-link-color-cursor-line: #80c9fe;
--empty-page-link-color: #a5b5ad;
--empty-page-link-hover-color: #76827C;
--quote-bg-color: #2e2e2e;
/*テロメア*/
--telomere-border: #2e2e2e;
--telomere-unread: #3b573f;
--telomere-updated: #fff;
/*メニューバー*/
--tool-color: #8a8a8a;
--tool-text-color: #dddede;
--tool-bg: #383838;
/*関連リンク欄*/
--2hop-search-bg: var(--page-bg);
--relation-label-bg: #9babc1;
--relation-label-links-bg: var(--page-link-color);
--relation-label-empty-bg: var(--empty-page-link-color);
--relation-label-text:#222;
--relation-label-empty-text: #222;
/*コード*/
--code-bg: #2e2e2e;
--code-coler: #fff;
--code-number-color: #fff;
}
.cursor{
background-color: #ddd;
}
.line code {
color: #ddd;
}
}
ページの表示設定
code:style.css
.page-list-itemdata-page-title="settings", /*settingsを隠す*/
.page-list-itemdata-page-title="himasenpuki", /*UserScript用ページを隠す*/
.page-list-itemdata-page-title*="private"{ /*privateのページを隠す*/
display: none !important;
}
/*検索欄からprivateを隠す*/
.dropdown-menu li > ahref*="private" {
display: none !important;
}
/*何かを関連ページ欄から消す用*/
.related-page-list .grid li.page-list-itemdata-page-title="何か"{
display: none !important;
}
ロゴ変更
/InterestingProjects/settings
code:style.css
.brand-icon {
--logo-url: url('https://scrapbox.io/files/69181c0514e4864b210eab44.png');
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-size:cover;
background-repeat:no-repeat;
border-radius: 50%;
svg {display: none;}
}
ページUI
code:style.css
.grid li.page-list-item a .header {
border: none; /*上の謎の線を消して詰める*/
}
.grid li.page-list-item a {
border: 2px solid rgba(0, 0, 0, 0);
background-color: rgb(var(--card-bg));
border-radius: 5px;
box-shadow: none;
transition: .2s;
}
.grid li.page-list-item a:hover {
border: 2px solid var(--card-title-bg);
}
.grid li {
aspect-ratio: 1 / 1 !important;
}
ページの見出し
code:style.css
.grid li.page-list-item a .header {
z-index: 1;
background: rgba(var(--card-bg), 0.3);
border-top: 1px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(3px);
.title{
text-shadow: 0px 0px 6px var(--body-bg);
}
}
ピン留めページ
参考: /arpla/ピン留めを小さなパネルにするUserCSS
code:style.css
.grid li.pin {
height: 40px;
width: 100%;
margin-bottom: 5px;
}
.grid li.page-list-item a .header.pinned {
border-top:none;
padding: 9px;
background-color: rgba(var(--card-bg), 1.0);
}
.grid li.page-list-item.pin a .title {
font-size: 15px;
color: var(--card-title-color);
text-align: center;
}
.grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}
.grid li.page-list-item a .pin {background: none;}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
サムネ画像を見切れないようにする
code:style.css
.grid li.page-list-item a .icon img {
position: absolute;
top: 0px;
left: 0px;
min-height: 75%;
width: 100%;
height: 100%;
object-fit: cover;
}
各ページのデザイン
タイトルの調節
code:style.css
.line.line-title .text{
text-align: center;/*タイトルを中央に配置*/
font-size: 1.2em;
}
入力のカスタマイズ
空リンクの表示
empty_link
code:style.css
.line a.empty-page-link {
border-bottom: dashed;
}
自動見出し表示
見出し1
見出し2
見出し3
見出し4
code:style.css
/*まだ途中*/
strong.level-2{ /*2段階目*/
border-left: 6px solid var(--card-title-bg);
padding-left: 11px;
}
ハッシュタグの装飾
#settings #empty_link
code:style.css
atype="hashTag"{
padding: 2px 3px;
font-size: 1.1em;
font-weight: 530;
color: white !important;
background: #4899d4;
border: 2px solid #438ec4;
border-radius: 3px;
transition: .1s;
}
atype="hashTag".empty-page-link {
text-decoration:none;
color: var(--empty-page-link-color) !important;
background: none;
border: 2px dashed;
}
atype="hashTag":hover{
color: #fff !important;
background: #336d96;
}
atype="hashTag".empty-page-link:hover{
color: var(--empty-page-link-hover-color) !important;
background: transparent;
}
拡張文字装飾（追加予定）
重要
小声
code:style.css
.deco-\! {
color: #ff0000;
}
.deco-\< { /*小声*/
opacity: 0.7;
font-size: 77%;
}
/yozba/行頭に---を入れるだけでセパレーターになるUserCSS
code:style.css
.line:has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-"){
display: flex;
align-items: center;
&:not(.cursor-line){
height: 28px;
&:after{
flex-grow: 1;
content: "";
border-top: 1px solid #afafaf;
}
.c-0data-char="-",
.c-1data-char="-",
.c-2data-char="-"{
display:none;
}
}
}
/scrasobox/箇条書きを控えめにする
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
外部リンクにアイコンをつける
例: 外部リンク
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
font-size: 0.6em;
display: inline-block;
}
アイコンサイズ調整 ふりふぁん！.icon
code:style.css
.line img.icon { height: 1.4em; top: -0.1em }
/forum-jp/箇条書きの最初に数式がくると中黒が表示されない
code:style.css
.line.formula-line .dot { display: block }
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
/Mijinko/コードブロックの行番号を表示するUserCSS
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px var(--code-number-color);
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--code-accent-color);
}
}
favicon
https://scrapbox.io/files/69181c0514e4864b210eab44.png