settings
navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS
code:style.css
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
scrapboxのトップページへのリンクをnav barに固定するUserCSS
code:style.css
@media screen {
.quick-launch .project-home {
position: fixed;
top: -2px;
left: 60px;
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 75px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 90px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
/* left: calc((100% - 1280px)/2 + 80px); */
left: calc((100% - 1280px)/2 + 100px);
}
}
.quick-launch .project-home {
--tool-text-color: white;
}
画像の境界線をわかりやすくする
code:style.css
.line img.image {
margin : 0 auto 0.7em;
border-radius: 0.35em;
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.5));
top: 1em;
}
code:style.css
@media (min-width: 768px) {
.related-page-list div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: var(--relation-label-bg);
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: #4D5263;
color: #eee;
}
}
code:style.css
.grid li.page-list-item a{
border-radius: 5px;
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
width: auto;
max-height: 90px;
max-width: 90%;
border-radius: 5px;
}
のびのびドロップダウン(UserCSS)
code:style.css
.navbar-form .dropdown.open ul.dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
外部リンクを区別するUserCSS
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 1.2rem;
content: ' \f35d';
display: inline-block;
}
/takker/外部リンクを区別するUserCSS
箇条書きを控えめにする
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: 10px; bottom: 0 }
インデントの可視化
code:style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #EAEAEA; /* 色の指定 */
}
.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #CCCCCC;
}
.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #EAEAEA;
}
.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #CCCCCC;
}
.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #EAEAEA;
}
.indent-mark span:nth-child(6n+):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #CCCCCC;
}
インデントのドットの色を変える
code:style.css
.line .indent-mark .dot {
background-color: #5FBA98;
margin-top: 4px;
}
.line .indent-mark .c-1 + .dot {
background-color: #BED16A;
}
.line .indent-mark .c-2 + .dot {
background-color: #F0CD34;
}
.line .indent-mark .c-3 + .dot {
background-color: #FF9754;
}
.line .indent-mark .c-4 + .dot {
background-color: #DB4B48;
}
見た目の変更その1
code:style.css
/* テロメアの存在感を薄くする */
.line .telomere .telomere-border:not(:hover) { opacity: .4 }
.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }
/* 本文の最後にテキスト挿入 */
.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: '本文は書かれていない' }
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 120% }
/* 本文のフォント設定: 文字詰め */
.line .text:not(.code-block) { font-feature-settings: "pkna" }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 1.8 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;
border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem } }
/* カード型ページリンクの枠 */
.grid li.page-list-item a { border: 1px solid rgba(0,0,0,.14) }
.grid li.page-list-item a .header { border-top: unset }
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\! { border-left: .6em solid #ffcfc6; padding-left: .7rem }
参考 : /madobes/settings
特定のページの非表示化
code:style.css
/* settingを非表示 */
.page-list-itemdata-page-title="settings" {
display: none !important;
}
/* 絵文字関連ページの非表示化 */
/* AE */
.page-list-itemdata-page-title="AE" {
display: none !important;
}
/* Pr */
.page-list-itemdata-page-title="Pr" {
display: none !important;
}
/* Safari */
.page-list-itemdata-page-title="Safari" {
display: none !important;
}
/* Chrome */
.page-list-itemdata-page-title="Chrome" {
display: none !important;
}
/* Firefox */
.page-list-itemdata-page-title="Firefox" {
display: none !important;
}
/* HTML */
.page-list-itemdata-page-title="HTML" {
display: none !important;
}
/* CSS */
.page-list-itemdata-page-title="CSS" {
display: none !important;
}
サイドメニューのランダムボタンを消す
code:style.css
.random-jump-button {
display:none !important;
}
付箋記法
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 }
校正用のスタイル
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 }
嘘リンク（文字の色をリンクと同じ色にする）
code:style.css
/* 嘘リンク */
.deco-\{ { color: #5E8BB3 }
解説を控えめに挿入
code:style.css
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
文中に引用を挿入
code:style.css
.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:50%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
ピンしたページのスタイル
ソース：/scrasobox/ピンしたページのスタイル
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: var(--card-title-color); bottom: 0; display: inline-block; transform: rotate(35deg);}
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }
チェックボックスになるタグ 2
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 }
参考：/scrasobox/チェックボックスになるタグ_2
画像を並べて表示 兼 ヘッダー画像風の表示
code:style.css
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
.line class^="level" .deco-\| { width: 100%; flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(90%/2); height:80%; }
.line .level-3 .deco-\| > span { width: calc(100%/3); height:80%; }
.line .level-4 .deco-\| > span { width: calc(100%/4); height:80%; }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
参考 : /scrasobox/画像を並べて表示
全体的なデザイン調整
code:style.css
/* ピン留めアイテムとそれ以外を分ける */
.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {
clear: left;
}
/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */
/*li.grid-style-item,
div.related-page-list ul.grid li.relation-label {
width: 154px;
height: 169px;
margin: 0 16.8px 16.8px 0;
}*/
/* ページタイトルのスタイル */
div.line-title .text {
font-size: 28px;
border-bottom: 2px solid var(--line-title-color);
padding-left: 0.25em;
padding-bottom: 9px !important;
margin-bottom: 21px;
}
/* コードブロックのタイトル行のスタイル */
.line span.code-block .code-block-start {
display: inline-block;
font-size: 14px;
margin-left: 0.5px;
padding: 2px 4px;
color: var(--page-text-color);
background-color: var(--accent-color);
filter: brightness(90%);
--code-start-border: solid 1px #7f7f7f;
border-right: var(--code-start-border);
border-bottom: var(--code-start-border);
}
.line span.code-block .code-block-start a {
color: var(--page-text-color);
}
code:記法まとめ
強調
小見出し
見出し
マーカーを引いて強調
解説を挿入
付箋記法
見出しっぽい太字テキスト
引用文が書ける
アンダーライン引ける
取り消し線引ける
挿入
挿入取り消し
引用文
嘘リンク