settings
このプロジェクトの設定ファイル
code:import.css
/* インポートもできますよん */
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #FB7476;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #b2bcba transparent;
}
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #b2bcba transparent;
}
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
.deco-\{ a,
.deco-\} a {
color: #66F;
}
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
# で始まるタグをラベル風に
code:style.css
/* これは上のCSSで指定済み
body {
--accent-color: #3d95c9;
}
*/
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: var(--page-bg);
color: #72cafd !important;
font-size: 0.8em;
border: 1px solid #72cafd;
border-radius: 3px;
transition: .2s;
-webkit-transform: scale(1);
transform: scale(1);
}
a.empty-page-linktype="hashTag"{
color: #fb7476 !important;
border-color: #fb7476;
}
atype="hashTag":hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
フォント関連
code:style.css
/* Font Awesomeを常時使えるようにするCSS */
div.editor,
.grid li {
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands","AppIcons",sans-serif;
}
自分であげたwebフォントを使用したかったのだが、許可されているwebフォント(Google Fontsなど)しか使えないようだ→/takker/scrapboxでweb fontは使えない？
code:動作しなかったコード.css
body {
font-family: 'pixelmplus12bold';
src: url(https://scrapbox.io/files/62df8a0909d54a00208df764.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
.editor, .stream, li.page-list-item {font-family: unset !important;}
コードブロックに行番号を表示
code:style.css
body *::before {
--code-number-color: var(--code-color);
/* --code-accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅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 #fff;
/* ↓行番号の色の指定はここ */
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);
}
}
フッター
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: '文章はここで途切れている';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid rgba(0,0,0,.2); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
.app:not(.presentation) .page.not-persistent::after {
content: 'ここには何も書かれていない' }
.drag-and-drop-enter {
padding-bottom: 100px;
background-image: url("https://profile-counter.glitch.me/nineteen-scrapbox/count.svg");
background-position: center bottom 20px;
background-repeat: no-repeat;
background-size: 224px 30px;
}
センタリング用の記法 [' から始めるとセンタリング可能
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
スクロールバー
code:style.css
/* スクロールバー全体の太さを変更 */
html::-webkit-scrollbar, #copy-element::-webkit-scrollbar {
width: 16px;
}
/*スクロールバーのつまみの部分*/
html::-webkit-scrollbar-thumb, #copy-element::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, #ab59ff 0%, #ab59ff 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 10px;
}
/*スクロールバーの背景*/
html::-webkit-scrollbar-track, #copy-element::-webkit-scrollbar-track {
background: var(--navbar-bg, rgba(53, 59, 72, 0.6));
}
テンプレートからページ作成
テンプレートはtemplateにあります。
スクリプトはyamato3010に
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
a#Templates.tool-btn img { opacity: 0 }
箇条書きの記号の変更
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
/* 挿入 */
.deco-\+ { color: blue }
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: 'ｲｷ'; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
ピン止めしたページのアイコン変更
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #A45AFF; bottom: 0; display: inline-block; transform: rotate(35deg) }