settings

本文のフォントを変更Medium風に変更

code:style.css

/* Apply Charter font to all text*/

body,

.page,

.text,

.line

.line.line-title,

.text-input.line-title,

.grid li,

.list li.page-list-item,

.popup-menu,

.stream,

.editor,

.tooltip

{

font-family: "Charter";

}

/* Apply Kievit font to headings */

h1, h2, h3, h4, h5, h6 {

font-family: "Kievit", sans-serif !important;

}

sectionを水平線で区切る

code:style.css

.app:not(.presentation) .line.section-title:not(.line-title) {

position: relative;

}

.app:not(.presentation) .line.section-title:not(.line-title) .text {

padding-top: 1em;

}

.app:not(.presentation) .line.section-title:not(.line-title):before {

content: "";

display: block;

width: 111%;

position: absolute;

left: -49px;

border-top: 1px lightgray solid;

}

sectionに番号を表示する

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 {

z-index: 1000;

counter-increment: section;

content: counter(section);

display: inline-block;

width: 1.6em;

height: 1.6em;

position: absolute;

top: -10px;

left: -55px;

border-radius: 50%;

font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;

text-align: center;

white-space: nowrap

}

引用表記を目立たなくする

code:style.css

.line .quote {

padding-left: 10px;

}

引用を薄くする

/code:style.css

.line .quote {

padding: 3px 10px;

border-left: none;

}

蛍光ペン

蛍光ペン

code:style.css

.deco-\+ {

background: linear-gradient(transparent 60%, rgb(255 247 57 / 45%) 40%);

}

ワンクリックで引用できるPopupMenuボタン

code:script.js

scrapbox.PopupMenu.addButton({

title: '引用',

}

})

ピン留めされたページを独立した段に表示する

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

検索窓が最高になる

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%;

max-height: calc(100vh - 120px) !important;

overflow-y: auto;

}

外部リンクを区別するUserCSS

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

/* font-family:'FontAwesome'; */

font-family: 'Font Awesome 5 Free';

font-weight: 900;

content: ' \f35d';

display: inline-block;

}

Streamをわかりやすくする

code:style.css

.navbar .navbar-menu>li.stream-btn,

.navbar .navbar-menu>li.stream-btn.hidden-xs

{ display: block !important; }

画像を均等に並べる

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.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) }

文中に引用を挿入

code:style.css

.deco-\" {

border-radius: .2em;

padding: 0 .4em;

background-color: rgba(128,128,128,0.1);

font-size: 95%;

font-style: italic;

}

.line:not(.cursor-line) .deco-\"::before {

font-size: 85%;

/* font-family: 'FontAwesome'; */

font-family: 'Font Awesome 5 Free';

font-weight: 900;

content: '\f10d';

position: relative;

top: -0.5em;

left: -0.2em;

}

テロメアを薄くする

code:style.css

/* テロメアの存在感を薄くする */

.line .telomere .telomere-border:not(:hover) { opacity: .1 }

.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }