settings
! 注意
このページにあるJavaScript / CSSは全員に適用されます。
自分の書いているコードが何をするかを理解した上で書き込んでください。
hr.icon
参考
/scrasobox/Bullet Journal をやってみる
scrapboxをカスタマイズしてみよう！ #userscript - Qiita
/customize/外部リンクを区別するUserCSS
hr.icon
CSS
code:style.css
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font: normal 110%/normal "Font Awesome 5 Free"; text-align: center }
/* ここから各アイコンの設定 */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon)::after { content: '\f06a'; color: #F6AE2D; font-weight:bold; }
/* ? */
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon)::after { content: '\f059'; color: #758E4F; font-weight:bold; }
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon)::after { content: '\f069'; color: #F26419; font-weight:bold; }
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon)::after { content: '\f0c8'; color: #666; font-weight: 400; }
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon)::after { content: '\f14a'; color: #069; font-weight:400; }
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon)::after { content: '\f111'; color: #F26419; font-weight: 400; }
/* > */
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400; }
/* < */
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400; }
/* インデントの装飾 */
.line .indent-mark .dot {
}
.line .indent-mark .c-1 + .dot {
background-color: #fc034a;
}
.line .indent-mark .c-2 + .dot {
background-color: #00c96f;
}
.line .indent-mark .c-3 + .dot {
background-color: #fcc603;
}
/* 外部リンクにアイコンを付加する */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
/* 背景色調整関係 */
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
/* タグを四角で囲む */
atype="hashTag" {
padding: 2px 4px;
border-radius: 2px;
margin: 0 4px;
border: 1px solid #000000;
}
.line atype="hashTag".empty-page-link {
color: #bf7254;
}
/* hr.icon の誤クリックを防ぐ */
.line a.iconhref$="/hr" {
pointer-events: none;
}
/* ピン留めされたページを独立した行にする */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}