settings
フォントを変更する
code:style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100;200;300;400;500;600;700&display=swap');
/* デフォルトのフォントを「M Plus 1p」に変更．絵文字も「Noto Emoji」を読み込み */
.editor, .stream, li.page-list-item {
font-family: 'M PLUS 1p', 'Noto Color Emoji', sans-serif;
}
彼らの機器や装置はすべて生命体だ。
彼らの機器や装置はすべて生命体だ。
😂❤️😍🤣😊🥺 🙏💕😭😘👍
参考：/dragoon8192-main/setting:コードブロックのフォントを変更
code:style.css
.grid li.page-list-item a {
}
コードブロックの見た目
code:style.css
/* コードブロックのフォントを「M Plus 1 Code」に変更 */
.line span.code-block .code-body {
font-family: 'M PLUS 1 Code';
}
/* コードブロックのファイル名をタブっぽい見た目にする */
.line span.code-block .code-block-start {
background-color: var(--code-bg, rgba(0, 0, 0, 0.1));
border-radius: 5px 5px 0 0;
padding: 5px 5px 6px 10px;
}
.line span.code-block .code-block-start a {
color: #4F4F4F;
text-decoration: none;
font-weight: bold;
}
.line span.code-block .code-block-start a:hover {
color: #4F4F4F;
text-decoration: underline;
font-weight: bold;
}
チェックボックスを実現するUserCSS
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref$='/o':not(.icon) span,
.line:not(.cursor-line) ahref$='/v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px
}
.line:not(.cursor-line) ahref$='/o':not(.icon)::after,
.line:not(.cursor-line) ahref$='/v':not(.icon)::after {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
padding-right: 5px;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-size: 120%;
text-align: center;
vertical-align: middle
}
.line:not(.cursor-line) ahref$='/o':not(.icon)::after {
content: '\f0c8';
color: #616161
}
.line:not(.cursor-line) ahref$='/v':not(.icon)::after {
content: '\f14a';
color: #616161
}
oチェックしてない→[o]
vチェックしてる→[v]
参考：/scrasobox/チェックボックスになるタグ 2
寄せ記法
code:style.css
/* 中央寄せ */
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
right: 15px; /* 右端に配置 */
white-space: nowrap; /* テキストの折り返しを防ぐ */
}
中央寄せ
shinyaoguri.icon
右寄せ
shinyaoguri.iconああ
引用中の寄せ記法
code:style.css
.quote {
display: inline-block;
position: relative;
width: 100%;
}
.line .quote {
border-left: solid 0px #a0a0a0;
padding: 5px 15px 5px 15px;
position: relative;
}
shinyaoguri.icon中央寄せ
shinyaoguri.icon引用の中で右よせ
吹き出し記法
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #37474f;
padding: 0.3em 0.5em 0.3em 0.5em;
border-radius: 0.4em;
margin: 0.2em 0.5em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出し */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-180%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #37474f transparent;
}
/* 右吹き出し */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(80%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #37474f transparent;
}
/* 強調記法との組み合わせ */
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
/* 吹き出し中のリンク文字色 */
.deco-\{ a, .deco-\} a {
color: #87CEEB;;
}
吹き出しのようになるよ
長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。
文字のサイズも変更できる
ユニティちゃん.iconアイコンと組み合わせると
会話みたいな感じで面白いよねshinyaoguri.icon
ユニティちゃん.icon実は両方でもいける
ユニティちゃん.iconいいねshinyaoguri.icon
ユニティちゃん.icon強調記法も使えるよ
強調記法
code:style.css
.deco-\! { /* 重要な部分は!を付ける */
color: #fff;
background-color: #e66; /* 赤背景 */
font-size: 1.0em; /* 重要なので最初から大きな文字にする */
}
文章中の大事な部分を赤くできる
彼らの機器や装置はすべて生命体だ。
彼らの機器や装置はすべて生命体だ。
吹き出し記法と組み合わせて利用可能
文中引用記法
code:style.css
.deco-\" {
border-radius: .2em;
padding: .4em .4em;
background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic
}
.deco-\"::before {
color: #a0a0a0;
font-size:100%;
margin: 0px 5px 0px 5px;
font-family: 'FontAwesome';
content: '\275d';
vertical-align: super
}
.deco-\"::after {
color: #a0a0a0;
font-size:100%;
margin: 0px 5px 0px 5px;
font-family: 'FontAwesome';
content: '\275e';
vertical-align: super
}
文中で何かを引用するときに引用みたいな感じで書くことができる
表の見た目を調整する
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行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
.table-block .table-block-start {
background-color: var(--code-bg, rgba(0, 0, 0, 0.1));
border-radius: 5px 5px 0 0;
padding: 5px 10px;
}
table:sample-table
あいうえお AIUEO 表
AAA BBB CCC
DDD EEE FFF
見出しを認識する
H1あああ
H2あああ
H3あああ
H4 あああ
H5 あああ
画像のサイズを変更できるようにするUserCSS
code:style.css
.level-1 img { width: 15.0%; max-height: none; object-fit: contain;}
.level-2 img { width: 20.0%; max-height: none; object-fit: contain;}
.level-3 img { width: 25.0%; max-height: none; object-fit: contain;}
/customize/画像の表示サイズを［** ］で設定できるようにする
これがデフォルトサイズ
https://i.gyazo.com/e115cbf749d33c779171c4f297d3ee5b.jpg
https://i.gyazo.com/e115cbf749d33c779171c4f297d3ee5b.jpg https://i.gyazo.com/e115cbf749d33c779171c4f297d3ee5b.jpg https://i.gyazo.com/e115cbf749d33c779171c4f297d3ee5b.jpg
特定のタイトル接頭辞のページは一般ユーザからは非表示（消えたわけではない）にして自分には色をつける
🟢settingsとshinyaoguri
🟠「202-」か「.」
🟥「!」
code:style.css
.page-list-itemdata-page-title="shinyaoguri" {
border-top: 4px solid #34C759;
border-radius: 4px;
display: none;
}
.page-list-itemdata-page-title="settings" {
border-top: 4px solid #34C759;
border-radius: 4px;
display: none;
}
.page-list-itemdata-page-title^="202-" {
border-top: 4px solid #FF9500;
border-radius: 4px;
display: none;
}
.page-list-itemdata-page-title^="." {
border-top: 4px solid #8E8E8E;
border-radius: 4px;
display: none;
}
.page-list-itemdata-page-title^="!" {
border-top: 4px solid #E01E5A;
border-radius: 4px;
display: none;
}
.scroll-container a.page-linkhref^="./202-" {
display: none;
}
.scroll-container a.page-linkhref^="./settings" {
display: none;
}
.scroll-container a.page-linkhref^="./shinyaoguri" {
display: none;
}
.scroll-container a.page-linkhref^="./!" {
display: none;
}
プレゼンテーションモードの時のデザインを修正する
code:style.css
.app.presentation .line.section-title {
font-size: 4vw;
font-weight: 500;
}
.app.presentation .line .text:not(.section-title):not(.code-block) {
margin-bottom: 20px;
}
.presentation > .container {
width: 100%;
max-width: 100%;
}
.app.presentation .line img {
zoom: 250%;
display: block;
margin: 0 auto;
}
.app.presentation > .line .image {
max-height: 1000px;
}
.app.presentation .line video {
zoom: 250%;
display: block;
margin: 0 auto;
}
/* プレゼン中、表示されたスライド要素を0.5sでふわっと入場 */
.app.presentation .lines .lineclass*="section-" {
animation: sbx-slide-enter 1s cubic-bezier(.22,.61,.36,1) both;
/* 性能重視（レイアウトせずに済むプロパティだけ） */
will-change: opacity, transform;
}
@keyframes sbx-slide-enter {
from { opacity: 0; transform: translateY(8px) scale(0.995); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* アニメーションが苦手な利用者への配慮（OS設定が「動きを減らす」のときは無効化） */
@media (prefers-reduced-motion: reduce) {
.app.presentation .lines .lineclass*="section-" {
animation: none;
}
}
.iframe-video-player iframe {
display: inline-block;
width: 100%;
/* 横幅から高さを自動算出（16:9） */
aspect-ratio: 16 / 9;
height: auto; /* aspect-ratio に高さ計算を委ねる */
border: 0;
margin: 3px 0;
vertical-align: middle; /* 必要なら残す */
}
/* もし横幅いっぱいに広げたいなら、親にも明示しておくと安定します */
.iframe-video-player {
width: 100%;
max-width: 100%;
}
.page {
background-color: var(--page-bg, #fefefe);
padding: 42px 49px 42px;
box-shadow: var(--card-box-shadow, 0 4px 0 rgba(0, 0, 0, 0.16));
border-top-left-radius: var(--card-border-radius-md, 4px);
border-top-right-radius: var(--card-border-radius-md, 4px);
border-bottom-left-radius: var(--card-border-radius-md, 3px);
border-bottom-right-radius: var(--card-border-radius-md, 3px);
border: none;
}
/* プレゼン以外では非表示（安全側） */
.app:not(.presentation) #sbx-slide-number { display: none; }
カーソル行を点滅
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor {
animation: blink .5s infinite;
background-color: rgba(255, 0, 0, 1);
box-shadow: inset 2px 1px 2px 2px rgba(0, 0, 0, 1);
}
.shared-cursors .cursor { background-color: #309030; animation: none }
数式の行は上下に余白を設ける
code:style.css
.formula-line, .code-block-formula-preview {
margin-top: 10px;
margin-bottom: 10px;
}
.code-block-formula-preview.formula {
margin-top: 10px;
margin-bottom: 10px;
}
$ \frac{P'(X)}{P(X)} = \sum_{i=1}^{n} \frac{1}{f(\varepsilon_i)} \cdot \frac{df(\varepsilon_i)}{dX}
$ \frac{P'(X)}{P(X)} = - \sum_{i=1}^{n} \frac{1}{f(\varepsilon_i)} \cdot \frac{df(\varepsilon_i)}{d\varepsilon_i}
外部リンクのみアイコンを付ける
code:style.css
.link:not(:has(.icon))::after {
content: "";
display: inline-block;
width: 0.7em;
height: 0.7em;
margin: 0 0.5rem 0 0.5rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="rgb(61, 114, 245)" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
code:style.css
body {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #000000, #000066);
animation: skyAnimation 24s infinite;
}
@keyframes skyAnimation {
/* 夜明け */
0% {
background: linear-gradient(to bottom, #000000, #000066);
}
15% {
background: linear-gradient(to bottom, #663399, #ff6600);
}
/* 朝 */
30% {
background: linear-gradient(to bottom, #ffcc66, #87ceeb);
}
/* 日中 */
50% {
background: linear-gradient(to bottom, #87ceeb, #4682b4);
}
/* 夕方 */
70% {
background: linear-gradient(to bottom, #ff4500, #ff6347);
}
/* 日の入り */
85% {
background: linear-gradient(to bottom, #663399, #000066);
}
/* 夜 */
100% {
background: linear-gradient(to bottom, #000000, #000066);
}
}
body {
background-image: URL("https://i.gyazo.com/79499d7318655c780b456b4b10b88209.gif") !important;
background-size: cover;
background-color: rgba(40,40,40,.9) !important;
background-blend-mode: darken;
}