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 {
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.06)
}
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;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
中央寄せ
shinyaoguri.icon
右寄せ
shinyaoguri.icon
左寄せ
shinyaoguri.icon
吹き出し記法
吹き出しのようになるよ
長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。
文字のサイズも変更できる
ユニティちゃん.iconアイコンと組み合わせると
会話みたいな感じで面白いよねshinyaoguri.icon
ユニティちゃん.icon実は両方でもいける
ユニティちゃん.iconいいねshinyaoguri.icon
ユニティちゃん.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;;
}
強調記法
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
}
文中で何かを引用するときに引用みたいな感じで書くことができる
hr.icon
表の見た目を調整する
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-block .table-block-start a
table:sample-table
あいうえお AIUEO 表
AAA BBB CCC
DDD EEE FFF
/icons/hr.icon
見出しを認識する
H1あああ
H2あああ
H3あああ
H4 あああ
H5 あああ
hr.icon
settingsとプロフィールページ，202か.が先頭にあるページを非表示にする
code:style.css
.page-list-itemdata-page-title="settings",
.page-list-itemdata-page-title="shinyaoguri",
.page-list-itemdata-page-title^="202",
.page-list-itemdata-page-title^="."
{
display: none;
}
hr.icon
プレゼンテーションモードの時のデザインを修正する
code:style.css
.app.presentation .line.section-title {
font-size: 4vw;
}
.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;
}
カーソル行を点滅
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
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;
}