settings
https://gyazo.com/641dfa2be02c3674241a26f4d64af4e8
User CSS
色設定
code:style.css
body {
background-color: #000000;
color: #555555;
}
.editor {
/*filter: invert(); */
background-color: #32353B;
color: #FFF;
}
.page {
background-color: #32353B;
border: 5px;
}
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 95%, #2797BB 15%);
color: #17c7eb;
}
Linksのlabelの色をおとなしくする
code:style.css
.grid li.relation-label.links .arrow {
border-left-color: #fff;
}
.grid li.relation-label.links a {
background-color: #FFF;
}
.grid li.relation-label.links a .title {
color: #333;
}
.grid li.relation-label a {
color: #333
}
コードブロックを見やすくする
code:style.css
/* code blockのフォントを小さくする設定 */
.line span.code-block {
/*line-height: 20px;
font-size: 90%;*/
background-color: rgba(30, 20, 10, 0.05);
border-right: solid 1px #66667F ;
border-left: solid 2px #eb3b17 ;
filter: invert();
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: #eb3b17;
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #000; font-weight: bold }
インラインブロックを見やすく
code:style.css
code.code span {
background: #404040;
color: #fa9852;
}
span.formula code {
background: #404040;
color: #fa9852;
}
入力時の文字色と背景色を変更する
code:style.css
textarea#text-input:focus {
background-color: #32353B;
color: #FFF;
}
見出しとタイトルを見やすく
code:style.css
.line.line-title .text {
color: #FFF;
}
カーソルをカスタマイズ
code:style.css
.cursor {
background-color: #eeeeee;
}
テーブルに罫線を追加
table:a
ラベル1 ラベル2 ラベル3
uouo uouo uouo
ouou ouou ouou
テーブルの直前の行が空白でないとおかしくなるので注意
table:b
ラベル1 ラベル2 ラベル3
uouo uouo uouo
ouou ouou ouou
from: /customize/テーブルの見た目をカスタマイズ
code:style.css
/* セル内で改行 */
/* まるでうまく動かない... */
/*
.table-block .cell {
table-layout: fixed;
overflow-wrap : break-word;
word-break : break-all;
overflow-x: scroll;
}
*/
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
UserScriptで追加したボタン用
code:style.css
/*UserScriptで追加したボタン用*/
/*Tex*/
.button-container :nth-of-type(8){
font-style: italic !important;
font-family: KaTeX_Math, KaTeX_Main, "Times New Roman", serif !important;
letter-spacing: 1px;
}
文字の位置揃えをする
[| センタリング]
[> 右寄せ]
[< 左寄せ]
俺がセンタリングだ！
俺が右寄せだ！
俺が左寄せだ...って普通じゃんか！
code:style.css
.line .deco-\|,
.line .deco-\>,
.line .deco-\< {
border-left: none !important;
}
/* 中央寄せ */
.line:not(.cursor-line) .deco-\| { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.line:not(.cursor-line) .deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.line:not(.cursor-line) .deco-\< { position: absolute; width: 100%; text-align: left }
付箋記法
/scrasobox/付箋記法 より
[~ こんな感じに書くと ] こんな感じに付箋が付けられるぞ！
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid #04B2D9;
background-color: #f9f8f6;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
.presentation .line .deco-\~ { position: static; max-width: 100% }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.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 }
コメントっぽいやつ
[# コメントっぽい]
/scrasobox/拡張記法がきた！
code:style.css
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
バッジっぽいやつ
Ex [! Ex]
Tips [& Tips]
Info [% Info]
code:style.css
.deco-\%,.deco-\!,.deco-\& { display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF;}
.deco-\! {
background-color: #ee6666
}
.deco-\% {
background-color: #08BDBD
}
.deco-\& {
background-color: #FF9914
}
/scrasobox/バッヂになるタグ
赤文字
code:style.css
.deco-\+ { color: red;}
画像を小さくして表示
[* [hoge.png]]で小さく表示できる
gyazoでも適応できます
height: 10emの10emの値を弄れば、画像サイズを変更できる
code:style.css
span.deco strong.level-1 span.modal-image a img.image{
height: 10em;
/*display:none;*/
}
span.deco strong.level-2 span.modal-image a img.image{
width: 15em;
}
上記のCSSだとscrapboxにアップロードした画像のリサイズができなかったので追加
code:style.css
span.deco strong.level-1 span.modal-image a svg {
width: 15em;
height 10em;
}
span.deco strong.level-2 span.modal-image a svg {
width: 20em;
height 15em;
}
画像サイズを割合で小さくするやつ
code:style.css
span.deco strong.level-1 .deco-- span.modal-image a img.image{
zoom: 75%;
height: auto;
width: auto;
}
span.deco strong.level-2 .deco-- span.modal-image a img.image{
zoom: 50%;
height: auto;
width: auto;
}
span.deco strong.level-3 .deco-- span.modal-image a img.image{
zoom: 25%;
height: auto;
width: auto;
}
span.deco strong.level-1 .deco-- span.modal-image a svg {
zoom: 75%;
height: auto;
width: auto;
}
span.deco strong.level-2 .deco-- span.modal-image a svg {
zoom: 50%;
height: auto;
width: auto;
}
span.deco strong.level-3 .deco-- span.modal-image a svg {
zoom: 25%;
height: auto;
width: auto;
}
userScriptで追加したボタン用
code:style.css
/*Stronger*/
.button-container :nth-of-type(6){
font-weight: bold;
}
/*Mark*/
.button-container :nth-of-type(7){
color: #FEFA3A !important;
}
インデックスにも箇条書きの-を付ける
1. いち
2. に
code: style.css
.line.number-list .dot {
display: block;
width: 6px;
height: 4px;
top: 11px;
border-radius: 1px;
}