settings
https://scrapbox.io/files/699d93953583dfb074e0e09d.png
外部インポート
共通項目
/sorutrt/カラースキーム
code:style.css
:root {
--base-color: #2a3843;
--light-color: #ffeb36;
--accent-color: #38b48b;
--page-color: #0f2133;
--bg-color: #0b151a;
}
/sorutrt/navbar透明
code:style.css
.navbar {
background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
backdrop-filter: blur(4px);
border-bottom: 0px solid var(--navbar-border-color, transparent);
}
/work4ai/スクロールバーの見た目をスッキリする
code:style.css
::-webkit-scrollbar{
width: 7px;
}
::-webkit-scrollbar-thumb{
background-color: var(--accent-color);
border-radius: 4px;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
/memooooo/bodyの設定を変更する
code:style.css
body,
.editor{
color: #f3f3f3 !important; /* 全体のフォントカラーを変える */
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif !important; /* フォントを游ゴシック優先にする */
}
/sorutrt/背景の色を変える
code:style.css
body {
background-color: var(--bg-color) !important;
}
リストの見た目
/daiiz/一覧カードをスマホのみ小さくする
code:style.css
@media(max-width:720px){ /* 最大横幅1080px以下 */
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */
gap: clamp(4px, 0.1svw, 12px);
}
.related-page-list ul.grid {
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */;
}
}
記法追加
/memooooo/［* ］に蛍光のラインを足す
code:style.css
/* * <ーこれに蛍光のラインを足す */
.level-1{
background: linear-gradient(transparent 90%, #ffeb36 60%);
}
/memooooo/［** ］を見出し風にする
code:style.css
/* ** <ーこれを見出し風にする */
.line strong.level-2{
display: block;
position: relative;
font-size: 200%;
line-height: 160%;
text-align: center;
margin: 12px auto 18px;
font-weight: 100;
}
.line strong.level-2:after{
position: absolute;
content: '';
border-bottom: 3px solid #ffeb36;
width: 100px;
top: 0;
bottom: -0.5em;
left: 0;
right: 0;
margin: 0 auto;
}
/memooooo/［*** ］を小見出し風にする
code:style.css
/* *** <-これを小見出しに */
.line strong.level-3{
display: block;
position: relative;
padding-left: 16px;
}
.line strong.level-3:before{
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 0;
background: #ffeb36;
}
/customize/警告記法
code:style.css
/* 警告表記を使えるようにする */
.deco-\! {
--warning-text-color: #FFFFFF;
--warning-bg: #FF3838;
--page-link-color: #80c9fe;
--empty-page-link-color: #ffb7b8;
color: var(--warning-text-color);
background-color: var(--warning-bg);
padding: 1px 2px;
border-radius: 1px;
/* 単色の赤色背景に変更 */
background-color: var(--warning-bg);
}
/yamato3010/ネタバレ防止記法
code:style.css
.deco-\~:not(:hover) {
filter: blur(4px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
/customize/センタリング
code:style.css
/* 中央寄せ */
.deco-\| { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.deco-\< { position: absolute; width: 100%; text-align: left }
/sorutrt/行内引用記法
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .25em;
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
font-style: normal;
}
.line:not(.cursor-line) .deco-\"::before {
color: var(--tx-3);
font-size: .65em;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -.75em;
left: -.175em;
}
.line:not(.cursor-line) .deco-\"::after {
color: var(--tx-3);
font-size: .65em;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10e';
position: relative;
top: .25em;
left: .175em;
}
/yozba/セパレータ
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;
}
}
ページの見た目
/memooooo/行間を調節する
code:style.css
/* 行間調整 */
.line .section-0{
line-height: 1.2em !important;
}
/memooooo/imgをセンタリングする
code:style.css
/* imgをセンタリング */
.line img.image{
display: block;
margin: 0 auto;
}
/memooooo/＃で始まるタグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 1px 4px;
margin: 0 4px 5px 0;
background: #0b151a;
color: #0b151a;
font-size: 1em;
border: 0.3px solid #0b151a;
border-radius: 1px;
transition: .1s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/customize/ページ背景の色
code:style.css
.page {
background-color: var(--page-color);
box-shadow: none;
border: #666 solid 0.5px;
border-radius: 5px;
}
/sorutrt/ページ枠の色
code:style.css
.page {
/* border: var(--accent-color) solid 0.5px; */
border: none;
}
/sorutrt/テロメアを消す
code:style.css
.line .telomere .telomere-border {
border-width: 0 0 0 1px !important;
left: -30px;
}
/sorutrt/コードブロックの見た目
code:style.css
/* コードブロック背景 */
.line span.code-block {
/* background-color: var(--bg-color, rgba(0, 0, 0, 0.04)); */
}
/* コードブロックのファイル名など*/
.line span.code-block .code-block-start a {
color: var(--accent-color);
font-size: 1.0em;
text-decoration: none;
}
.line span.code-block .code-block-start {
color: var(--accent-color);
background-color: var(--page-color);
}
/foldrr/ページ横幅を広げる
code:style.css
.col-page {
max-width: none;
}
.col-page-side {
width: 1000px;
}
/sorutrt/アイコンを大きくする
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.2em }
/customize/階層を分かりやすくする
code: style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1px solid var(--light-color);
}
/* インデントカラー（コードブロック） */
span.pad.code-block-margin {
background-color: var(--page-color) !important;
}
/programming-notes/リンク・空リンクの色を変える
code:style.css
body {
/* --page-link-color: #1F75BC; */
/* --page-link-hover-color: #1F75BC; */
/* --empty-page-link-color: #CC2954; */
/* --empty-page-link-hover-color: #CC2954; */
}
.line a:hover {
text-decoration: underline;
}
/* External links (icon)*/
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
font-size: 10px;
}
/sorutrt/テロメアの色変更
code:style.css
line .telomere .telomere-border {
border-color: var(--light-color, #eaebeb);
}
/sorutrt/コードの行番号を表示する
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 } }
/sorutrt/テーブルの色変更
code:style.css
.table-block .cell {
/* background-color: var(--bg-color) !important; */
}
.table-block .table-block-start {
background-color: transparent;
}
.table-block .table-block-start a {
color: var(--accent-color); /* テーブルのタイトル */
}
/scrasobox/箇条書きを控えめにする
code:style.css
.app .line .indent-mark .dot {
height: .2em; width: .5em; border-radius: 100vh;
background-color: #a6a6a6;
display: inline-block;
vertical-align: middle;
margin-top: 1px;
right: 6px;
top: 11px
}
編集時の見た目
/sorutrt/カーソルを太くする
code:style.css
.cursor {
width: 3px !important;
background-color: var(--accent-color);
}
/* 黒い線が気になるのでカーソルと同じ色にする */
.cursor {f
color: var(--accent-color);
border-color: var(--accent-color);
}
.cursor svg {
display: none;
}
/sorutrt/カーソル行ハイライト
code:style.css
.cursor-line {
background-color: var(--base-color);
}
ホームの見た目
/sorutrt/flexbox右側のアレ
code:style.css
.quick-launch .flex-box {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
text-transform: uppercase;
}