settings
https://gyazo.com/988b91f1dc84ca039b327fe79a47f9cc
#Scrapbox ではこの settings という名前のページに以下のように style.css という名前のコードブロックを置くことによってプロジェクト全体に適用されるCSSを定義することができます。 code:style.css
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
メニューバー：Scrapboxアイコンをバーガーアイコンに置き換え
code:style.css
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before { content: '\f0c9'; font-family: FontAwesome; font-size: 28px }
メニューバー：プロジェクト名を表示
code:style.css
.col-brand { display: flex !important }
.col-brand::after { content: 'BeXide Tech Blog'; color: white;
margin: 10px 0 0 28px; font-size: 24px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
display: inline-block; max-width: calc(100% - 80px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
code:style.css
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline } body:not(.presentation) .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute; display: inline-block; left: -3em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
black; }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } コードブロックの行間
code:style.css
.line span.code-block { line-height: 1.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(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
code:style.css
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } } /* 太字記法との組み合わせでスタイルを変える場合 */
.line .level-2 .deco-\~ { border-right-color: #009175 } .line .level-3 .deco-\~ { border-right-color: #EFBB33 } .line .level-4 .deco-\~ { border-right-color: #F23E2E } /* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
強調
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:style.css
/* マトリクス記法 */
width: 100%; height: 100%; margin: 0; object-fit: cover }
/* 並べた画像の間にスキマが欲しい場合はこの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
display: inline-block; border-radius: 50%; border: .05em solid #f40; min-width: 1em; padding: .1em; vertical-align: text-bottom;
line-height: 1; color: #f40; font-weight: 600 } code:style.css
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; font-size: small; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85); padding: 3px 4px 2px 5px; margin-left: .6em;
border-radius: .4em; border-bottom-left-radius: 0 }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
Chaola.icon