settings
from togaminnnn.icon
箇条書きを控えめにする
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
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
Scrapboxデザイン
code:style.css
/* メニューバーの色変更 */
.navbar {
background: linear-gradient(-135deg, #818ffc , #99CFE5);
border: none;
}
/* 背景色の変更 */
body{
#background-color:#777777;
background: linear-gradient(135deg, #525966 , #3b3b3b);
}
/* テロメアのサイズ変更 */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* 新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #dedede; width: 2px }
/* 新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #54c3f1; width: 5px }
/* ページ追加ボタンの色変更 */
.new-button {
background-color: white;
}
.new-button div {
background-color: #777777 !important;
}
.new-button:hover {
background-color: #F5F5F5 !important;}
/* Scrapboxのアイコンを消す */
.navbar .navbar-brand img {
display: none;
}
.icon-arrow-down:before {
color: var(--fg-color);
}
/* 検索ボックスの色変更 */
.search-form .form-group input {
background-color: #f0f0f0;
opacity: 0.3 ;
color: #777777;
}
/* 行番号の色がわからなくならんようにする */
.app:not(.presentation) .line:not(.line-title)::before {
font-family: monospace; color: #B7BDC4 !important ;}
/* プロジェクト名の色変更 */
.quick-launch .project-home, .quick-launch .history-back-button{
color: #B7BDC4;
}
/* 右側メニューの色変更 */
.page-menu .tool-btn{
color: #B7BDC4;
}
アイコンのサイズを大きくする
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.3em; top: -0.2em }
code:style.css
#history-box span {
margin: 0 3px;
}
#history-box span:last-child {
font-weight: bold;
pointer-events: none;
cursor: default;
}
横のバーの色
code:style.css
.line .telomere .telomere-border{
background-color:transparent;
}
.line .telomere .telomere-border.unread{
background-color:#00dd0000
}
吹き出し
togaminnnn.icon 吹き出しテストです！
/help-jp/文字装飾記法
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #637dab;
padding: 0.3em 0.9em 0.3em 0.9em;
border-radius: 0.4em;
margin: auto 0.4em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0.3em 0.8em 0.3em 0.1em;
transform: translateX(-100%) translateY(calc(-1em + 50%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #637dab transparent;
}
付箋記法
付箋をここに貼るテスト
/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) }
.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 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ 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
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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 }