settings
! 注意
このページにあるJavaScript / CSSは全員に適用されます。
自分の書いているコードが何をするかを理解した上で書き込んでください。
hr.icon
参考
/scrasobox/Bullet Journal をやってみる
scrapboxをカスタマイズしてみよう！ #userscript - Qiita
/customize/外部リンクを区別するUserCSS
hr.icon
CSS
標語コーナー
code:style.css
.container::before {
content: '背中より成果で語れ';
display: block;
font-family: serif;
font-size: 2rem;
text-align: center;
padding: 1em 0;
}
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;
}
code:style.css
.grid li.page-list-item.pin a {
background-color: #454545;
color: #eee;
}
.grid li.page-list-item:not(.pin) a {
box-shadow: rgba(255,255,255,0.4) 0 5px 10px 2px;
color: #000;
}
.grid li.page-list-item.pin a .title,
.grid li.page-list-item.pin a .description {
color: #eee;
}
.grid li.page-list-item:not(.pin) a .description {
color: #222;
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;700&display=swap');
.section-0.section-title {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 700;
font-style: normal;
}
body, div#editor.editor, .grid li {
font-family: "IBM Plex Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}
htmldata-project-theme=green {
--body-bg: #1d1d1d;
--tool-text-color: #ddd;
}
.container {
max-width: 1600px;
}
.page-column {
grid-template-columns: 46px minmax(200px, 1470px) min-content;
grid-template-areas: "spacer page menu";
}
/* ピン留めされたページを独立した行にする */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}