Settings
https://scrapbox.io/files/63e800f4b4d155001c8aba13.png
a.css
/icons
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;
background-color: #a1081f;
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
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\| {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
ルビ
[# ベース[ふりがな]]でベースの文字にふりがなをつける
code:style.css
/* <ruby>相当 */
.line:not(.cursor-line) .deco-\# {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom; /* Chrome 108で表示が乱れる場合の対応 */
}
/* <rb>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) {
line-height: 0;
font-size: 50%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
pointer-events: none;
color: var(--page-text-color, #4a4a4a);
}
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;
}
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% }
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.table-block .cell {
font-weight: bolder;
text-align: center;
}
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; 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; }
code:style.css
:root {
--bg-color: #FFFFFF;
--fg-color: #252525;
--highlight: #6BA6DE;
--default: #999999;
}
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}
Pinのスタイル変更
code:style.css
.grid li.page-list-item a .pin {
background: linear-gradient(
45deg,
rgba(128, 128, 128, 0.5),
rgba(128, 128, 128, 0.5) 50%,
var(--bg-color) 50%,
var(--bg-color)
)
}
テロメアをおとなしくする
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 3px !important;
border-color: var(--default);
width: 0;
}
.line .telomere .telomere-border.unread { border-color: var(--highlight) !important }
homeのgridを見やすくする
code:style.css
.page-list .grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding-left: 3%;
}
.page-list .grid li {
margin: 5px 5px;
}
.grid li.page-list-item a {
background-color: var(--bg-color);
box-shadow: none !important;
}
.grid li.page-list-item a .content {
border: solid var(--default) 1px;
}
関連リンクを左側に表示する
code:style.css
@media (min-width: 1050px) {
.row-flex .col-page { max-width: 960px }
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center
}
.page-wrapper .page { width: 700px }
.page-wrapper .related-page-list { max-width: 260px }
.related-page-list .grid .splitter:first-child { display: none }
.related-page-list .relation-label { height: 50px !important; margin-bottom: 10px !important }
.related-page-list .page-list-item { height: 50px !important; margin-bottom: 10px !important }
.related-page-list .grid li.page-list-item a { background-color: rgba(0, 0, 0, 0.45); border-radius: 3px }
.related-page-list .grid li.relation-label { width: 200px; display: inline-table }
.related-page-list .grid li.page-list-item { width: 200px; height: 70px !important; padding: 0 }
.related-page-list .grid .page-list-item .content .title {
color: #FFFFFF;
font-size: 15px;
background-color: rgba(0, 0, 0, 0);
}
.related-page-list .grid .page-list-item .description { display: none }
.related-page-list .grid .page-list-item .hover { display: none }
.related-page-list .grid li.page-list-item a .icon { position: absolute; padding: 0 }
.related-page-list .grid li.page-list-item a .icon img {
width: 200px;
z-index: -1;
}
}
.grid li.splitter.splitter { width: 45px }
バックグラウンドの色を変える
code:style.css
body { background-color: var(--bg-color) !important }
ページ内スタイル
code:style.css
.page {
background-color: rgba(230, 235, 255, 0.05);
box-shadow: none;
border: var(--default) solid 0.5px;
border-radius: 5px;
}
status-barのスタイル変更
code:style.css
.status-bar {
background-color: rgba(255, 255, 255, 0);
color: var(--fg-color);
border-top-left-radius: 15px;
border-top-color: var(--default);
border-left-color: var(--default);
}
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
display: inline;
margin: 0 3px;
text-decoration: underline;
}
dropdown menuの高さを制限する
code:style.css
.page-menu .dropdown.open .dropdown-menu {
max-height: 389px; /* 15行 * 25px + 14px(padding, margin) */
}
Free planの文字を隠す
code:style.css
.quick-launch .plan-badge { display: none }
パーマリンクの範囲のスタイル
code:style.css
.line.permalink {
background: var(--highlight);
opacity: 0.6;
}
水平線を押せなくする
/icons/hr.icon
code:style.css
.line:not(.cursor-line) a.iconhref$="/hr" {
pointer-events: none;
}
ヘッダーメニューを固定する
code:style.css
/* はりつくメニューバー */
body:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset;
border-bottom: solid #666 0.5px;
background-color: var(--bg-color);
}
.dropdown.open .dropdown-menu {
position: absolute;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.page-menu {
top: 64px;
}
.page-menu .dropdown.open .dropdown-menu {
position: absolute;
top: 0
}
/* } */
.search-form .form-group input {
background-color: var(--default);
border: solid var(--default) 0.5px;
}
.new-button {
background-color: var(--bg-color);
border: solid var(--default) 0.5px;
}
.new-button .vertical-line,
.new-button .horizontal-line {
background-color: var(--default);
}
.new-button:hover {
background-color: var(--highlight);
border: none;
}
.new-button:hover .vertical-line,
.new-button:hover .horizontal-line {
background-color: var(--bg-color);
}
a.mobile-pagemenu-toggle {
display: none !important
}
a.mobile-search-toggle {
color: var(--bg-color) !important
}
navbarのScrapboxアイコンを非表示にする
code:style.css
.navbar .navbar-brand img {
display: none;
}
.icon-arrow-down:before {
color: var(--fg-color);
}
画像を大きくする
[[https://image/url.png]]で横幅を100%まで広げる
code:style.css
.strong-image {
width: 100%;
}
選択範囲
code:style.css
.selection {
background: var(--highlight);
}
fontを変更する
code:style.css
body {
background-color: #ffffff;
font-family: '游明朝体','YuMincho','游明朝','Yu Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro',serif;
}
.editor, .stream, li.page-list-item {font-family: unset !important;}
見出しとタイトルをかっこよく
code:style.css
.line strong {
display: inline-block;
}
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-left: solid 7.5px var(--default);
border-bottom: solid 2px var(--default) !important;
font-weight: bold;
font-size: 35px;
position: relative;
left: -15px;
}
カーソルをカスタマイズ
code:style.css
.cursor {
width: 3px;
background-color: rgba(255, 255, 255,.6);
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1;}
}
.cursor-line.with-image {
animation-name: none;
}
mobile用UserCSS
code:style.css
@media (max-width: 420px) {
.page-list .grid {
padding-left: 0;
}
li.page-list-item.grid-style-item {
margin: 0 0 10px 0;
}
li.page-list-item.grid-style-item:nth-child(2n+1) {
margin-right: 10px;
}
}
カーソル行ハイライト
code:style.css
.cursor-line {
border-right: 3px solid var(--default);
border-bottom: 0.5px dashed var(--default);
box-sizing: border-box;
}
popup menuのボタンを減らす
code:style.css
.popup-menu .button-container .copy-button,
.popup-menu .button-container .strong-button,
.popup-menu .button-container .italic-button,
.popup-menu .button-container .strike-button,
.popup-menu .button-container .delete-button,
.popup-menu .button-container .new-page-button,
.popup-menu .button-container .link-button {
display: none;
border: none;
}
.popup-menu .button-container .copy-plain-button {
border: none !important;
}
related page sort menuを非表示にする
code:style.css
.related-page-sort-menu {
display: none;
}
code:style.css
.grid li.relation-label.links a,
.grid li.relation-label.empty-links a,
.grid li.relation-label a {
background-color: var(--bg-color);
border: solid var(--fg-color) 0.5px;
color: var(--fg-color);
}
.grid li.relation-label.links .arrow,
.grid li.relation-label.empty-links .arrow,
.grid li.relation-label .arrow {
border-left-color: var(--fg-color);
｝