settings
code:style.css
html, body,
.grid li {
font-family: Arial, "Kosugi Maru", sans-serif ;
}
.quick-launch .project-home .title {
font-size: 28px;
font-weight: bold;
font-family: arial, "Kosugi Maru", sans-serif ;
}
@media (max-width: 767px)
{
.quick-launch .project-home .title {
font-size: 18px;
}
}
.line .quote {
font-style: normal;
}
.line .quote {
font-style: normal;
}
.line .meta {
}
ロゴ上書き
code:style.css
/* ナビゲーションロゴ画像上書き */
a.navbar-brand.dropdown-toggle {
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 38px;
height: 38px;
display: block;
position: absolute;
top: 1px;
left: -1px;
background-size: contain;
background-repeat: no-repeat;
}
suimaさんのやつからパクったやつ
code:style.css
settings
code:style.css
.level-1 img { width: 20%; max-height: none; }
.level-2 img { width: 45%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
チェックボックスになるタグ(V2)
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./o':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='./o':not(.icon)::after, .line:not(.cursor-line) ahref='./v':not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./o':not(.icon)::after { content: '\f0c8'; color: #08BDBD } .line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f14a'; color: #2489C5 } 吹き出し
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.3em 0.2em 0.3em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
左吹き出し
code:style.css
.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;
}
右吹き出し
code:style.css
.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;
}
赤吹き出し
code:style.css
.deco-\! {
}
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色
code:style.css
.deco-\{ a,
.deco-\} a {
}
テーブル
code:style.css
/*table*/
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px; }
.table-block table { text-align: center }
.table-block table {
border-collapse: collapse;
}
.table-block td {
border-width: 2px 0px; /* 上下だけ引く */
border-style: solid; /* 線種:実線 */
padding: 0.2em; /* セル内側の余白 */
}
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.deco-\" {
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\# {
font-size: 0.65em;
line-height: 10px !important;
}
.presentation .line {
font-size: 32px !important; /* フォント小さく */
}
.presentation .line.section-title {
font-size: 40px !important; /* フォント小さく defaultは50pxっぽい */
}
.line strong {
}
特定のタグをバッジ風にするやつ(窓辺さんの)
code:style.css
/* バッヂ風 */
display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF } 付箋記法(窓辺さん)
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 }
WebからコピペしたらScrapBox記法に変換するjs
code:import.js
import '/api/code/scrasobox/WebからコピペしたらSB記法に変換する/script.js'
BuJo
サンプル
e [e] イベント < [<] リスケ済みタスク code:style.css
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) ahref='./!':not(.icon) span, .line:not(.cursor-line) ahref='./*':not(.icon) span, /*.line:not(.cursor-line) ahref='./_':not(.icon) span,*/ /*.line:not(.cursor-line) ahref='./x':not(.icon) span,*/ .line:not(.cursor-line) ahref='./-':not(.icon) span, .line:not(.cursor-line) ahref='./e':not(.icon) span { display: inline-block; width: 0; text-indent: -9999px }
/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) ahref='./!':not(.icon)::after, .line:not(.cursor-line) ahref='./*':not(.icon)::after, /*.line:not(.cursor-line) ahref='./_':not(.icon)::after,*/ /*.line:not(.cursor-line) ahref='./x':not(.icon)::after,*/ .line:not(.cursor-line) ahref='./-':not(.icon)::after, .line:not(.cursor-line) ahref='./e':not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px;
font: 900 110%/normal 'Font Awesome 5 Free'; text-align: center }
/* ここから各アイコンの設定 */
.line:not(.cursor-line) ahref='./!':not(.icon)::after { content: '\f06a'; color: #F6AE2D } .line:not(.cursor-line) ahref='./*':not(.icon)::after { content: '\f069'; color: #F26419 } /*.line:not(.cursor-line) ahref='./_':not(.icon)::after { content: '\f0c8'; color: #08BDBD; font-weight: 400 }*/ /*.line:not(.cursor-line) ahref='./x':not(.icon)::after { content: '\f14a'; color: #2489C5; font-weight: 400 }*/ .line:not(.cursor-line) ahref='./%3E':not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400 } .line:not(.cursor-line) ahref='./%3C':not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400 } .line:not(.cursor-line) ahref='./-':not(.icon)::after { content: '\f146'; color: lightgrey; font-weight: 400 } .line:not(.cursor-line) ahref='./e':not(.icon)::after { content: '\f192'; color: #F26419 } 強調[[こっち]]をマーカーみたいにする
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { /* background: linear-gradient(transparent 5%, #CBCFFF 25%, #CBCFFF 70%, transparent 95%) */ }
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: 'marker',
onClick: text => [[${text}]]
})
code:style.css
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 7em; height: auto }
code:style.css
/* セクション区切りを可視化する (番号) */
.app { counter-reset: section }
.app:not(.presentation) .line.section-title:not(.line-title) { position: relative }
.app:not(.presentation) .line.section-title:not(.line-title):after {
counter-increment: section;
content: counter(section);
display: inline-block; width: 1.6em; height: 1.6em;
position: absolute; top: 5%; left: -10vw;
background-color: #f7ca2a; border-radius: 50%; color: #fff; font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif; text-align: center; white-space: nowrap }
code:style.css
/* page links */
.line:not(.cursor-line) a.page-linkhref*='#':not(.icon) span{ display:none}
.line:not(.cursor-line) a.page-linkhref*='#':not(.icon)::after { font-family:'FontAwesome'; content: ' \f13d'; display: inline-block;} 外部リンクを区別する
code:style.css
/* External links */
.line a.link:not(.icon)::after {
/* font-family:'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: ' \f35d'; /*f08e*/
display: inline-block
}
code: style.css
/* #で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
既定のbulletを消す
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
code:style.css
.line .indent-mark .dot::before {
display: block;
/* position: inherit; */
/* top: -12px; */
position: absolute;
/* right: -5px; */
top: -10px;
/* font-family: FontAwesome; */
/* font-size: 6px; */
/* } */
font-family: 'Font Awesome 5 Free';
font-size: 6px;
content: '\f068'; /* マイナス記号:通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
font-weight: 900;
}
フォントサイズと色
code:style.css
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 6px;
}
code:style.css
a#AutoScroll.tool-btn:hover { text-decoration: none }
a#AutoScroll.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f70e'; font: 900 21px/46px 'Font Awesome 5 Free' }
a#AutoScroll.tool-btn img { opacity: 0 }