settings
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./_':not(.icon) span, .line:not(.cursor-line) ahref='./x':not(.icon) span, .line:not(.cursor-line) ahref='./v':not(.icon) span { display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref='./_':not(.icon)::after, .line:not(.cursor-line) ahref='./x':not(.icon)::after, .line:not(.cursor-line) ahref='./v':not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: FontAwesome; font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./_':not(.icon)::after { content: '\f096'; color: #08BDBD } .line:not(.cursor-line) ahref='./%3C':not(.icon)::after { content: '\f08b'; color: #999; transform: scaleX(-1);} .line:not(.cursor-line) ahref='./%3C%3C':not(.icon)::after { content: '\f090'; color: #666; transform: scaleX(-1);} .line:not(.cursor-line) ahref='./%5E':not(.icon)::after { content: '\f0c1'; color: #0099FF; transform: scaleX(-1); } .line:not(.cursor-line) ahref='./x':not(.icon)::after { content: '\f2d3'; color: #FF0000 } .line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f046'; color: #2489C5 } code:style.css
/* バッヂ風 */
/* 文字色:白 */
display: inline-block; min-width: 10em; min-height: 1.1em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF } /* 文字色:黒 */
display: inline-block; min-width: 10em; min-height: 1.1em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #111111 } /* 背景色:濃い色 */
/* 背景色:薄い色 */
/* 区切り線
display: inline-block; min-width: 30em; max-height: .1em; border-radius: .2em;
text-align: center; vertical-align: middle; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF } code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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 } */ code:style.css
/* テーブルのセルをわかりやすくする */
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td { padding: .1em; background-color: rgba(0,0,0,0.04) }
.table-block table tr:nth-child(odd) td { background-color: rgba(0,0,0,0.10) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr:first-child td { background-color: rgba(0,0,0,0.20) } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
code:style.css
/* Section title */
.app:not(.presentation) .line.section-title:not(.line-title) .text {
border-top: 3px dashed rgba(173,173,173,.5) }
code:script.js
scrapbox.PopupMenu.addButton({
title: '📕',
onClick: text => text.split('\n').map(line => [! ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📙',
onClick: text => text.split('\n').map(line => [& ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📗',
onClick: text => text.split('\n').map(line => [# ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📘',
onClick: text => text.split('\n').map(line => [% ${line}]).join('\n')
})
-
code:style.css
/* 着色部分(赤) */
.deco-\! {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 着色部分(緑) */
.deco-\# {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 着色部分(青) */
.deco-\% {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 着色部分(オレンジ) */
.deco-\& {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 着色部分(灰色) */
.deco-\' {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 着色部分(薄灰色) */
.deco-\" {
font-weight: bold;
padding: 0.1em 0.2em 0.1em 0.2em;
}