settings
UserScriptはshinyaoguri
フォントを変更する
code:style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1:wght@100..900&family=M+PLUS+2:wght@100..900&family=M+PLUS+Rounded+1c&family=M+PLUS+U:wght@100..900&display=swap');
.editor, .stream, li.page-list-item {
font-family:
'M PLUS 2',
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
'Yu Gothic', YuGothic, 'Meiryo',
sans-serif !important;
}
彼らの機器や装置はすべて生命体だ。
太字彼らの機器や装置はすべて生命体だ。
H4彼らの機器や装置はすべて生命体だ。
H3彼らの機器や装置はすべて生命体だ。
H2彼らの機器や装置はすべて生命体だ。
H1彼らの機器や装置はすべて生命体だ。
😂❤️😍🤣😊🥺 🙏💕😭😘👍
参考：/dragoon8192-main/setting:コードブロックのフォントを変更
コードブロックの見た目を調整する
code:style.css
/* コードブロックのフォントを「M Plus 1 Code」に変更 */
.line span.code-block .code-body {
font-family: 'M PLUS 1 Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* コードブロックのファイル名をタブっぽい見た目にする */
.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引用の中で中央寄せ
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強調記法も使えるよ
shinyaoguri.icon人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、 人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、 人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権を保護することが肝要であるので、 諸国間の友好関係の発展を促進することが肝要であるので、国際連合の諸国民は、国連憲章において、基本的人権、人間の尊厳及び価値並びに男女の同権についての信念を再確認し、かつ、一層大きな自由のうちで社会的進歩と生活水準の向上とを促進することを決意したので、 加盟国は、国際連合と協力して、人権及び基本的自由の普遍的な尊重及び遵守の促進を達成することを誓約したので、 これらの権利及び自由に対する共通の理解は、この誓約を完全にするためにもっとも重要であるので、 よって、ここに、国連総会は、 社会の各個人及び各機関が、この世界人権宣言を常に念頭に置きながら、加盟国自身の人民の間にも、また、加盟国の管轄下にある地域の人民の間にも、これらの権利と自由との尊重を指導及び教育によって促進すること並びにそれらの普遍的措置によって確保することに努力するように、すべての人民とすべての国とが達成すべき共通の基準として、この人権宣言を公布する。
強調記法
code:style.css
.deco-\! { /* 重要な部分は!を付ける */
color: #fff;
background-color: #e66; /* 赤背景 */
font-size: 1.0em; /* 重要なので最初から大きな文字にする */
}
文章中の大事な部分を赤くできる
彼らの機器や装置はすべて生命体だ。
彼らの機器や装置はすべて生命体だ。
吹き出し記法と組み合わせて利用可能
文中引用記法
code:style.css
.deco-\" {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
margin: .25em 0;
padding: .45em .7em;
border-radius: .35em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
font-style: italic;
line-height: 1.55;
white-space: normal;
overflow-wrap: anywhere;
}
.deco-\"::before {
color: #a0a0a0;
font-size: 100%;
margin-right: 5px;
font-family: 'FontAwesome';
content: '\275d';
vertical-align: baseline;
position: relative;
top: -0.25em;
}
.deco-\"::after {
color: #a0a0a0;
font-size: 100%;
margin-left: 5px;
font-family: 'FontAwesome';
content: '\275e';
vertical-align: baseline;
position: relative;
top: -0.25em;
}
文中で何かを引用するときに引用みたいな感じで書くことができる
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
表の見た目を調整する
→表の名前の見た目をキャプションっぽくするのを支援するUserScript
code:style.css
/* 表の各行を内容幅に合わせる */
.table-block {
display: inline-block;
max-width: 100%;
vertical-align: top;
}
/* キャプション行を少し詰める */
.line:has(.table-block-start) {
line-height: 1.2;
margin-bottom: 0em;
}
/* セル間に線を入れる */
.table-block .cell {
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
border-left: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell,
.line:has(.table-block-start) + .line .table-block .cell {
border-top: solid 1px #cccccc;
font-weight: bolder;
text-align: center;
}
/* 表キャプションの前に「表：」を追加 */
.table-block .table-block-start::before {
content: "表: ";
color: #333333;
font-size: 85%;
margin-right: .15em;
text-decoration: none;
flex: 0 0 auto;
}
/* 表のキャプション部分 */
.table-block .table-block-start {
background: none;
background-color: transparent;
border-radius: 0;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: .15em;
box-sizing: border-box;
max-width: 100%;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
/* 表キャプション内の通常リンク */
.table-block .table-block-start a:not(.icon),
.table-block .table-block-start a:not(.icon):visited {
color: #333333;
text-decoration: none;
}
/* 表キャプション内のアイコンリンク・コピーボタン */
.table-block .table-block-start a.icon,
.table-block .table-block-start a.icon:visited,
.table-block .table-block-start .icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
visibility: visible;
opacity: 1;
margin-left: .25em;
vertical-align: middle;
}
table:sample-table
あいうえお AIUEO 表
AAA BBB CCC
DDD EEE FFF
画像のサイズを変更できるようにする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
特定のタイトル接頭辞のページは一般ユーザからは非表示にする
code:style.css
/* === 対象ページの一覧カード／関連リンクを隠す（全員に効く） === */
.page-list-itemdata-page-title="shinyaoguri",
.page-list-itemdata-page-title="settings",
.page-list-itemdata-page-title^="202-",
.page-list-itemdata-page-title^=".",
.page-list-itemdata-page-title^="_",
.page-list-itemdata-page-title^="!" {
display: none !important;
}
.scroll-container a.page-linkhref^="./shinyaoguri",
.scroll-container a.page-linkhref^="./settings",
.scroll-container a.page-linkhref^="./202-",
.scroll-container a.page-linkhref^="./.",
.scroll-container a.page-linkhref^="./!" {
display: none !important;
}
/* === カードの形（自分には UserScript で表示されたとき有効） === */
.page-list-item {
border-radius: 6px;
overflow: hidden;
position: relative;
}
プレゼンテーションモードの時のデザインを修正する
code:style.css
.app.presentation .line.section-title {
font-size: 4vw;
font-weight: 500;
line-height: 1.2;
margin-bottom: calc(4vw * 0.3);
}
.app.presentation .line .text:not(.section-title):not(.code-block) {
margin-bottom: 20px;
}
.presentation > .container {
width: 100%;
max-width: 100%;
}
/* プレゼン時はpageのpaddingを削減し、オーバーフローを抑止 */
.app.presentation .page {
box-shadow: none;
height: 100vh;
max-height: 100vh;
overflow: hidden;
box-sizing: border-box;
padding-top: 21px;
padding-bottom: 28px;
}
.app.presentation .container,
.app.presentation .lines {
max-width: 100vw;
box-sizing: border-box;
}
/* プレゼン中の画像・動画を画面いっぱいにいい感じにフィット表示 */
/* タイトル領域（min(6vw, 100px)）とpage上下padding+キャプション余白(150px)を考慮 */
.app.presentation .line img,
.app.presentation .line .image img {
display: block;
margin: 0 auto;
zoom: 1;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 150px);
width: auto;
height: auto;
object-fit: contain;
}
.app.presentation .line .image {
display: block;
margin: 0 auto;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 150px);
}
.app.presentation .line video {
display: block;
margin: 0 auto;
zoom: 1;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 150px);
width: auto;
height: auto;
object-fit: contain;
}
/* インラインSVG（Mermaid記法含む）を画面いっぱいに表示 */
/* SVG要素は width/height 属性が優先されるため、明示的に上書きが必要 */
.app.presentation .line svg,
.app.presentation .line .image svg {
display: block;
margin: 0 auto;
zoom: 1;
width: auto;
height: auto;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 150px);
}
/* Mermaid専用：親と本体の両方を画面いっぱいに広げる */
.app.presentation .line .mermaid-preview {
display: block;
width: 100%;
max-width: calc(100vw - 120px);
margin: 0 auto;
text-align: center;
box-sizing: border-box;
}
.app.presentation .line .mermaid-preview svg {
display: block;
margin: 0 auto;
zoom: 1;
width: 100%;
height: auto;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 150px);
}
/* プレゼン中、表示されたスライド要素を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); }
}
@media (prefers-reduced-motion: reduce) {
.app.presentation .lines .lineclass*="section-" {
animation: none;
}
}
.iframe-video-player iframe {
display: inline-block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
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; }
.sb-present-figure {
display: inline-block;
max-width: 100%;
text-align: center;
margin: 0.6em auto;
}
.sb-present-figure img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
}
.app.presentation .sb-present-figure {
max-width: calc(100vw - 120px);
}
.app.presentation .sb-present-figure img,
.app.presentation .sb-present-figure svg {
zoom: 1;
max-width: calc(100vw - 120px);
max-height: calc(100vh - min(6vw, 100px) - 170px);
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto;
display: block;
border-radius: 8px;
}
.sb-present-caption {
margin-top: 0.35em;
font-size: 0.9em;
line-height: 1.35;
opacity: 0.88;
letter-spacing: 0.01em;
}
.sb-present-caption-src {
display: none !important;
}
コードブロックの行頭に番号をふる
code:style.css
/* ===== Code block line number settings ===== */
:root {
--code-line-number-color: #3f3f3f;
--cursor-code-line-number-color: #FF00F0;
/* 行番号部分の調整 */
--code-line-number-width: 2.4em; /* 行番号欄の幅 */
--code-line-number-gap: 0.48em; /* 行番号とコードの間隔 */
--code-line-number-font-size: 0.82em; /* 行番号の文字サイズ */
--code-line-number-font-weight: 500;
--code-line-number-opacity: 0.5;
--code-line-number-font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
}
/* dark theme */
htmldata-project-theme="paper-dark-dark",
htmldata-project-theme="default-dark" {
--code-line-number-color: #D181FF;
}
/* indent mark */
.code-block .indent-mark {
height: 100%;
}
.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
/* counter */
.section-title,
.code-block-start {
counter-reset: codeline;
}
.code-block .indent-mark > span.char-index:last-child {
counter-increment: codeline;
position: relative;
}
/* line number */
body:not(.presentation) .code-block .indent-mark > span.char-index:last-child::before {
content: counter(codeline);
position: absolute;
top: 0;
right: calc(100% + var(--code-line-number-gap));
width: var(--code-line-number-width);
text-align: right;
color: var(--code-line-number-color);
font-size: var(--code-line-number-font-size);
font-family: var(--code-line-number-font-family);
font-weight: var(--code-line-number-font-weight);
font-variant-numeric: tabular-nums;
line-height: inherit;
opacity: var(--code-line-number-opacity);
user-select: none;
pointer-events: none;
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark > span.char-index:last-child::before {
color: var(--cursor-code-line-number-color);
font-weight: 700;
opacity: 1;
}
カーソル行を点滅
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;
}