settings
このScrapboxの体裁や見栄えを設定するCSSを書くページです。
フォントを設定する
注意: @import はページのトップに置かないと有効にならない
code:style.css
@import url("https://fonts.googleapis.com/css?family=Lexend:300,600");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900");
html, body, .editor, .stream, .grid li, .list li.page-list-item {
font-family: Lexend, "Noto Sans JP", "Font Awesome 5 Free", "Font Awesome 5 Brands";
}
テーマカラーを設定する
code:style.css
:root {
--red: #D32F2F;
}
Scrapbox アイコンを「sticky-note」に置き換える
出典：/masui/settings を参考に
code:style.css
.brand-icon { display: none !important }
.navbar-brand::before {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-size: 24px;
content: '\f249';
transform: rotateX(180deg);
}
ピン留めされたページを独立した段に表示する
出典：/customize/ピン留めされたページを独立した段に表示する
停止中
code:xxx_style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both !important;
}
ページを隠す
対象：settings, yamnor, favicon
code:style.css
.page-list > .grid > .grid-style-itemdata-page-title="settings",
.page-list > .grid > .grid-style-itemdata-page-title="favicon",
.page-list > .grid > .grid-style-itemdata-page-title="yamnor"
{
display: none;
}
強調をカスタマイズ
level-4
level-3
level-2
level-1
code:style.css
.line strong.level-4 {
font-size: 1.5em !important;
line-height: normal !important;
font-weight: bold !important;
color: var(--red);
}
.line strong.level-3 {
font-size: 1em !important;
line-height: normal !important;
font-weight: bold !important;
color: #D32F2F; /* red */
}
.line strong.level-2 {
font-size: 1em !important;
line-height: normal !important;
font-weight: bold !important;
color: #0277BD; /* blue */
}
.line strong.level-1 {
font-size: 1em !important;;
line-height: normal !important;
font-weight: bold !important;
}
斜体をカスタマイズ
例：斜体
code:style.css
.deco-\/ {
color: #0277BD; /* blue */
}
打ち消し文字をカスタマイズ
例：test
code:style.css
.deco-\- {
color: #cfd8dc; /* black02 */
}
もんたメソッド
例：打ち消し $ test
code:style.css
.deco-\~ {
display: inline-block;
padding: 0 6px;
border: 1px solid #bdbdbd;
border-radius: 5px;
background: #eeeeee;
color: #eeeeee;
text-decoration: none !important;
}
.line.cursor-line .deco-\~ * {
background: #eee !important;
color: #eee !important;
}
.checkanswers .deco-\~ {
background: #fff !important;
color: #D32F2F !important; /* red */
font-weight: bold;
}
.checkanswers .line.cursor-line .deco-\~ * {
background: #fff !important;
color: #263238 !important; /* black */
font-weight: normal !important;
}
二重括弧の強調をカスタマイズ
例：強調
code:style.css
:root {
--marker: rgba(211, 47, 47, 0.3); /* red */
}
.line strong:not(class) {
font-weight: bold !important;
background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 100%);
}
section-title を強調する
level-3 には下線を引く
code:style.css
.section-title {
line-height: 32px;
}
.section-title strong.level-3 {
color: #0277BD; /* blue */
}
@media screen {
.app:not(.presentation) .section-title strong.level-1::before,
.app:not(.presentation) .section-title strong.level-2::before,
.app:not(.presentation) .section-title strong.level-3::before
{
position: absolute;
top: 8px;
left: -1.5em;
content: '\f02e';
font-family: 'Font Awesome 5 Free';
font-size: 1.7rem/1;
}
.app:not(.presentation) .section-title strong.level-1::before {
font-weight: 400;
color: #cfd8dc; /* black02 */
}
.app:not(.presentation) .section-title strong.level-2::before {
font-weight: 400;
color: #0277BD; /* blue */
}
.app:not(.presentation) .section-title strong.level-3::before {
font-weight: 600;
color: #0277BD; /* blue */
}
}
@media screen and (max-width: 990px) {
.app:not(.presentation) .section-title strong.level-1::before,
.app:not(.presentation) .section-title strong.level-2::before,
.app:not(.presentation) .section-title strong.level-3::before,
.app:not(.presentation) .section-title strong.level-4::before {
position: static;
padding-right: .5em
}
}
.app:not(.presentation) .section-title strong.level-3::after {
display: inline-block;
content: '';
width: 100%;
height: 15%;
background-color: #eceff1; /* black01 */
position: absolute;
bottom: 2px;
left: 0;
}
.app:not(.presentation) .section-title strong.level-4 {
position: absolute;
width: 100%;
text-align: center;
background-color: #eceff1; /* black01 */
}
リンクと空ページへのリンクの色を変える
例：yamnor, 空ページ
code:style.css
atype="link".page-link, .line a.link {
text-decoration: none;
color: #AD1457 !important; /* pink */
}
atype="link".empty-page-link {
color: #388E3C !important; /* green */
}
内部リンクにアイコンつける
例：yamnor
停止中
code:xxx_style.css
.line atype="link".page-link::after {
font-family: 'Font Awesome 5 Free';
content: ' \f0c1';
font-weight: 800;
display: inline-block;
opacity: 0.5;
margin-right: 0.25em;
}
.line atype="link".empty-page-link::after {
font-family: 'Font Awesome 5 Free';
content: ' \f127';
font-weight: 800;
display: inline-block;
opacity: 0.5;
margin-right: 0.25em;
}
ページ内リンクをアイコンに変える
例：settings#63daacf0ba691000008f94e1
文末じゃないとレイアウトが崩れる
absolute でレイアウトしない方法を考える
code:style.css
.line:not(.cursor-line) ahref*="#".page-link span.char-index:not(.empty-char-index) {
display: none;
}
.line:not(.cursor-line) ahref*="#".page-link span.empty-char-index {
position: relative;
}
.line:not(.cursor-line) ahref*="#".page-link span.empty-char-index::after {
font-family: 'Font Awesome 5 Free';
content: '\f0c1';
font-weight: 800;
opacity: 0.5;
/* position: absolute; */
top: 0;
left: 0.25em;
}
_:lang(x)::-internal-media-controls-overlay-cast-button, .line:not(.cursor-line) ahref*="#".page-link span.empty-char-index::after {
position: absolute;
}
外部リンクにアイコンつける
例：外部リンク
code:style.css
.line a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 800;
display: inline-block;
opacity: 0.5;
margin-right: 0.25em;
}
タグ をラベル風に
例： #タグ
出典：/nwtgck/settings
code:style.css
atype="hashTag" {
display: inline-block;
margin: 0 4px;
padding: 0 6px;
border-radius: 5px;
border: 1px solid #cfd8dc; /* black02 */
color: #263238 !important;
}
atype="hashTag".page-link {
color: #263238 !important; /* black */
}
atype="hashTag".empty-page-link {
color: #bdbdbd !important; /* grey */
}
atype="hashTag":hover {
border: 1px solid #263238; /* black */
}
atype="hashTag":active {
border: 1px solid #263238; /* black */
}
行頭のドットを薄く
出典：/masui/settings
code:style.css
.line .indent-mark .dot {
top: .6em;
width: .5em;
height: .5em;
background-color: #CFD8DC; /* black02 */
}
テーブルに線を入れる
出典：/customize/テーブルの見た目をカスタマイズ
code:style.css
.table-block .cell {
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
}
table:テーブル
A B C
D E F
チェックボックス
例
_ test1
x test2
出典：/scrasobox/チェックボックスになるタグ 2
code:style.css
.line.cursor-line ahref$='/_':not(.icon) span,
.line.cursor-line ahref$='/x':not(.icon) span
{
background: #eeeeee;
color: #eeeeee;
}
.checkanswers .line.cursor-line ahref$='/_':not(.icon) span,
.checkanswers .line.cursor-line ahref$='/x':not(.icon) span
{
background: #ffffff !important;
color: #263238 !important;
}
.line:not(.cursor-line) ahref$='/_':not(.icon) span,
.line:not(.cursor-line) ahref$='/x':not(.icon) span
{
display: inline-block;
width: 0;
text-indent: -9999px
}
.line:not(.cursor-line) ahref$='/_':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x':not(.icon)::after {
display: inline-block;
min-width: 1.15em;
margin: 0 2px;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-size: 100%;
text-align: center;
vertical-align: middle
}
.line:not(.cursor-line) ahref$='/_':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x':not(.icon)::after
{
content: '\f0c8';
color: #0277BD; /* blue */
}
.checkanswers .line:not(.cursor-line) ahref$='/x':not(.icon)::after {
content: '\f14a' !important;
color: #D32F2F !important; /* red */
}
.checkanswers .line:not(.cursor-line) .text:has(ahref$='/x') {
color: #D32F2F !important; /* red */
}
文字をセンタリング
例：中央に
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
.line:has(.deco-\') .indent-mark {
display: none;
}
インデントしていないときは画像をセンタリング
注意：Firefox には効かない（:hasは未対応）
code:style.css
.line:not(.cursor-line) .text:not(:has(.indent)):has(.image) {
text-align: center;
}
動画をセンタリング
code:style.css
.line:not(.cursor-line) .text:not(:has(.indent)):has(video) {
text-align: center;
}
.video-player video {
max-height: 80vh !important;
}
動画のサイズを変更させる
出典：/customize/画像の表示サイズを［** ］で設定できるようにする
code:style.css
.level-1 .video-player video { width: 20%; max-height: none !important; }
.level-2 .video-player video { width: 40%; max-height: none !important; }
.level-3 .video-player video { width: 60%; max-height: none !important; }
.level-4 .video-player video { width: 80%; max-height: none !important; }
.level-5 .video-player video { width: 100%; max-height: none !important; }
画像のデフォルトサイズ
code:style.css
img { max-height: none !important; }
画像のサイズを変更させる
出典：/customize/画像の表示サイズを［** ］で設定できるようにする
code:style.css
.level-1 img { width: 20%; max-height: none !important; }
.level-2 img { width: 40%; max-height: none !important; }
.level-3 img { width: 60%; max-height: none !important; }
.level-4 img { width: 80%; max-height: none !important; }
.level-5 img { width: 100%; max-height: none !important; }
画像を並べて表示する
出典：/scrasobox/画像を並べて表示
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% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
コードブロックを見やすくする
出典：/prog-exercises/settings
code:style.css
/* code blockのフォントを小さくする設定 */
.line span.code-block {
line-height: 1.4em !important;
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: #cfd8dc !important; /* black02 */
padding: 4px !important;
}
.line span.code-block .code-block-start a {
color: #263238 !important; /* black */
}
/* コードブロックのタブサイズを変更 */
code:style.css
.line span.code-block code {
tab-size: 2;
}
プレゼンモードをカスタマイズ
code:style.css
:root {
--slide-title-font-size: 5vh;
--slide-title-line-height: 10vh;
--slide-title-color: #0277BD; /* blue */
--slide-main-font-size: 4vh;
--slide-main-line-height: 8vh;
--slide-main-color: #263238; /* black */
}
.app.presentation {
padding: 0;
}
.app.presentation .page {
padding: 0;
}
.app.presentation .col-page {
max-width: 100vw;
}
.app.presentation .col-page-side {
width: 0px;
}
.app.presentation #text-input.convert-mode {
font-size: var(--slide-main-font-size);
}
.app.presentation .line:not(.section-title) {
font-size: var(--slide-main-font-size) !important;
line-height: var(--slide-main-line-height) !important;
}
.app.presentation .line:not(.section-title) .text:not(.code-block) {
font-size: var(--slide-main-font-size) !important;
line-height: var(--slide-main-line-height) !important;
color: var(--slide-main-color);
margin: 2vh;
}
.app.presentation .line .code-block {
line-height: 1em !important;
}
.app.presentation .section-title {
font-size: var(--slide-title-font-size) !important;
line-height: var(--slide-title-line-height) !important;
color: var(--slide-title-color) !important;
font-weight: bold;
margin: 0 !important;
}
.app.presentation .section-title strong.level-1::after,
.app.presentation .section-title strong.level-2::after {
display: inline-block;
content: '';
width: 100%;
height: 5%;
background-color: #eceff1; /* black01 */
position: absolute;
bottom: 0;
left: 0;
}
.app.presentation .section-title strong.level-3,
.app.presentation .section-title strong.level-4 {
line-height: 100vh !important;
}
.app.presentation .line.section-title .text {
padding: 10px 0 !important;
margin: 10px 0 !important;
text-align: left;
}
.app.presentation .line .indent-mark .dot {
top: 3vh;
height: 2vh;
width: 2vh;
background-color: #CFD8DC; /* black02 */
}
ブックマークスクリプトメニュー用にアイコンを設定する
UserScript：yamnor
code:style.css
button#Bookmarks.tool-btn:hover {
text-decoration: none;
}
button#Bookmarks.tool-btn::before {
position: absolute;
content: '\f02e';
font: 400 20px/46px 'Font Awesome 5 Free';
}
button#Bookmarks.tool-btn img {
opacity: 0;
}
目次生成スクリプト用にアイコンを設定する
UserScript：yamnor
code:style.css
button#CopyTOC.tool-btn:hover {
text-decoration: none;
}
button#CopyTOC.tool-btn::before {
position: absolute;
content: '\f03a';
font: 900 20px/46px 'Font Awesome 5 Free';
}
button#CopyTOC.tool-btn img {
opacity: 0;
}
CheckAnswersスクリプト用にアイコンを設定する
UserScript：yamnor
code:style.css
button#CheckAnswers.tool-btn:hover {
text-decoration: none;
}
button#CheckAnswers.tool-btn::before {
position: absolute;
content: '\f14a';
font: 400 20px/46px 'Font Awesome 5 Free';
}
.checkanswers button#CheckAnswers.tool-btn::before {
font-weight: 900 !important;
}
button#CheckAnswers.tool-btn img {
opacity: 0;
}