settings
https://scrapbox.io/files/65640d9264f7bd001b63ca30.png
この記事は何？
様々な設定をする記事です。
Scrapboxでは、settingsという記事にstyle.cssを↓のような感じで書くとCSSカスタマイズができます。
Scrapboxは、最初にピン留めしてある記事に埋め込んだ最初の画像をfaviconにできます。
やってること
フォントをM PLUS 1pに変更
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=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'M PLUS 1p';
}
コードブロックのフォントを等幅にするよう明示(自作)
code:style.css
code, code * {
font-family: 'Ubuntu Mono', monospace;
font-weight: 400;
}
左上の「AyaExpTech」のフォントをUbuntuにする(自作)
code:style.css
span.title {
font-family: 'Ubuntu', Monospace;
font-weight: 400;
}
色を全体的に調整(自作)
code:style.css
htmldata-project-theme=paper-dark-dark {
--body-bg: #151519;
--navbar-bg: #2e2e3888;
--navbar-icon-color: #5a5a6c;
--navbar-icon-active-color: #434384;
--navbar-icon-hovered-color: #505077;
--search-form-bg: #5a5a6c;
--search-form-icon-color: #e4e4f1;
--search-form-icon-focus-color: #2e2e38;
--page-bg: #2e2e38;
--page-text-color: #ebebebd0;
--code-bg: rgba(0, 0, 0, 0.4);
--card-title-color: #ebebebd0;
--card-title-bg: #5a5a6c88;
--card-bg: #2e2e38;
--card-description-color: #ebebebd0;
--card-description-link-color: #8ba5b1;
--relation-label-links-bg: #223944;
--relation-label-links-text: #ebebebd0;
--telomere-border: #5a5a6c;
--telomere-unread: #2e2e38;
--telomere-updated: #7e7ebe;
--tool-bg: #2e2e38;
--tool-color: #333333;
}
上の検索バーの検索時の背景色を変更(自作)
code:style.css
.search-form .form-group input:focus,
.search-form .form-group input.for-mobile {
background-color: #2e2e38;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6), 0px 2px 3px 0px rgba(0, 0, 0, 0.7);
color: #ebebebd0;
}
.search-form .form-group input {
color: #ebebebe4;
transition: all .1s;
}
ホーム画面のページリストの高さを増やしてPCかつ拡大率が低いときにスクロールしても追加ページ読み込みがされない問題を修正(自作)
code:style.css
@media(min-width: 768px) {
.page-list .grid li:not(.pin) {
height: 200px;
}
}
ごく僅かにページのpaddingを減らす + ページの影を少しだけ下以外にも出す
code:style.css
.page {
padding: 40px 49px;
box-shadow: 0 4px 5px rgb(0 0 0 / 17%);
}
@media (max-width: 767px) {
.page {
padding: 26px 21px;
}
}
角括弧内に> 文字列で黒背景(メンバーが思ったことを"メンバー名「内容」"と書くときに使用)
code:style.css
span.deco-\>:not(:is(.deco-\!, .deco-\#, .deco-\%)) {
padding: 0.1em;
background-color: #171717;
}
角括弧内に>! 文字列で赤背景
code:style.css
spanclass*=deco-\>\ deco-\! {
border-bottom: double;
border-color: #844343;
border-width: 3px;
background-color: #442222;
}
角括弧内に># 文字列で緑背景
code:style.css
spanclass*=deco-\>\ deco-\# {
background-color: #22442d;
}
角括弧内に>% 文字列でFont Awesome 5で表示
code:style.css
spanclass*=deco-\>\ deco-\% {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
なんかiconがずれてるのを仮修正(自作)
code:style.css
.line img.icon { /* 書き方が最悪ですがこれが限界でした */
height: 1.2em;
position: relative;
top: 50%;
transform: translate(-0.1em, -0.15em);
}
箇条書きを控えめなものにする (from:/scrasobox/箇条書きを控えめにする, 改変)
code:style.css
.app .line .indent-mark .dot {
height: .1em;
width: .4em;
border-radius: 20%;
background-color: #8b8bb1;
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
外部リンクにそれっぽいアイコンを付ける(from:/foldrr/settings)
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
margin-left : 4px;
display : inline-block;
font-family : 'Font Awesome 5 Free';
font-weight : bold;
content : '\f35d';
text-decoration: none;
}
アイコンを大きめにする記法(from:/customize/Dark Theme CSS)
code:style.css
.line img.strong-icon {
max-height: 7em;
height: auto;
}
カーソルを強調表示・点滅・太く(from : /foldrr/settings, 一部改変)
code:style.css
.cursor-line {
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.1);
}
.cursor {
width: 2px !important;
background-color: rgb(57, 172, 134);
}
.cursor {
color: rgb(57, 172, 134);
border-color: rgb(57, 172, 134);
}
.cursor svg {
display: none;
}
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor { animation: blink .5s infinite }
/* 同時作業中のユーザーのカーソルは点滅させない */
.shared-cursors .cursor {
background-color: #309030;
animation: none;
}
ピン留めした記事を独立した段に表示する(from : /customize/ピン留めされたページを独立した段に表示する)
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
編集ポップアップメニューをアイコン化(from : /scrasobox/ポップアップメニューをさっぱりさせてみる, 一部改変)
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.selections .popup-menu .button-container .button.link-button,
.selections .popup-menu .button-container .button.new-page-button,
.selections .popup-menu .button-container .button.copy-plain-button {
font-size: 0;
}
.popup-menu .button-container .button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block;
min-width: 11px;
text-align: center
}
.selections .popup-menu .button-container .button.link-button::after {
font-size: 11px;
content: '\f0c1'
}
.selections .popup-menu .button-container .button.strong-button::after {
content: '\f032'
}
.selections .popup-menu .button-container .button.italic-button::after {
content: '\f033'
}
.selections .popup-menu .button-container .button.strike-button::after {
content: '\f0cc'
}
.selections .popup-menu .button-container .button.copy-plain-button::after {
font-size: 11px;
content: '\f0c5'
}
.selections .popup-menu .button-container .button.new-page-button::after {
font-size: 11px;
content: '\f15c'
}
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
ピン留め記事は小さく表示する(from : /arpla/ピン留めを小さなパネルにするUserCSS, 改変)
code:style.css
.grid li.pin {
height: 24px;
}
.grid li.pin .header {
border-top:none !important;
padding: 5px 10px !important;
}
.grid li.pin .title {
font-size: 0.75em !important;
max-height: 16px !important;
line-height: normal !important;
}
.page-list-item a .pin {background: none !important;}
.grid li.pin .content :is(.description,.icon) {display: none !important;}
div.pinned {
overflow-wrap: break-word !important;
}
div.pinned > div.title::before {
content: "\f005";
font: 700 100%/normal 'Font Awesome 5 Free';
margin-right: 2px;
}
フォントをM+にする(自作)
code:style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');
.page .editor {
font-family: 'M PLUS 1p', sans-serif !important;
}
太字と通常文字の太さの調整(自作)
code:style.css
div.lines {
font-weight: 400;
}
.deco-\* {
font-weight: 700;
}
:root {
--page-text-color: #555;
}
角括弧内に"{ 文字列"・"} 文字列"で角括弧エスケープ(自作)
code:style.css
div.line:not(.cursor-line) .deco-\{::before {
content: "[";
}
div.line:not(.cursor-line) .deco-\}::after {
content: "]";
}
画像に影をつける + 画像を少しだけ暗く表示する
code:style.css
.image,
.strong-image {
filter: drop-shadow(0px 0px 4px rgb(0 0 0 / .4)) drop-shadow(0px 2px 3px rgb(0 0 0 / .55)) brightness(0.925);
}
*要検証を小さく表示(自作)
code:style.css
ahref="/AyaExpTech/*%E8%A6%81%E6%A4%9C%E8%A8%BC" {
font-size: smaller;
vertical-align: super;
}
上部の青い部分に影をつける(自作)
code:style.css
.navbar {
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}
箇条書き内にコードブロックがある場合、箇条書きの点を消す(自作)
code:style.css
.code-block:has(.dot) .dot,
.text:has(.quote) .dot {
display: none;
}
コードブロック/インラインコード内のトロイの木馬系文字(？)の背景を少し目に優しくする(自作)
code:style.css
.line code .trojan-source {
background-color: #EEAAAA;
}
[& 〇〇][& 〇〇]ルビ代替記法(自作)
code:style.css
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img)) {
vertical-align: -5%;
font-size: 70%;
}
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img))::before {
content: '“';
margin-left: 0.25rem;
}
span:has(span.deco .deco-\&)+span>span.deco .deco-\&:not(:has(img))::after {
content: '”';
margin-right: 0.25rem;
}
[& [img.png]]画像最大サイズを標準の60%に制限(自作)
code:style.css
.deco-\&:has(img) .image {
max-height: 180px;
max-width: 33%;
}
KaTeX記法のサイズを1段階小さく(自作)
code:style.css
.katex-display {
font-size: smaller;
}
リンクのホバー時の見た目を変える
code:style.css
.page a:is(.link, .page-link) {
display: inline-block;
color: var(--page-link-color);
position: relative;
text-decoration: none;
}
.page a:is(.link, .page-link)::before {
content: '';
position: absolute;
left: 0%;
bottom: 7.5%;
width: 100%;
height: min(5%, 4px);
background-color: rgba(100, 100, 200, 0.33);
transition: height 0.2s, background-color 0.2s;
pointer-events: none;
}
.page a:is(.link, .page-link):hover::before {
height: 85%;
background-color: rgba(100, 100, 200, 0.15);
}
表が含まれるページで横スクロールを有効化する(自作)
code:style.css
.page:has(.table-block-row) {
overflow-y: hidden;
overflow-x: scroll;
}
.page:has(.table-block-row)::-webkit-scrollbar {
display: none;
}
記事の横幅を広げる(from : /foldrr/scrapbox-page-width, 一部改変)
code:style.css
.col-page {
max-width: 87%;
}
.col-page-side {
width: 0;
}
@media (max-width: 767px) {
.col-page {
max-width: 100%;
}
}
@media screen and (min-width: 992px){
.container {
max-width: none;
}
}
.container {
width: 87%;
}
.left-box {
margin-left: 0;
}
[/icons/hr.icon], [/icons/---.icon]を横幅いっぱいに表示する(自作)
code:style.css
a:has(img.icon:is(title="hr", title="---")) {
position: relative;
width: 100%;
}
a:has(img.icon:is(title="hr", title="---"))::before {
display: none;
}
img.icon:is(title="hr", title="---") {
width: 100%;
object-fit: cover;
}
検索結果の表示が明るすぎるので調整(自作)
code:style.css
.list li.page-list-item {
background-color: #2e2e38;
}
data-hover-visible .list li.page-list-item a:hover {
background-color: #29293d;
}
.list li.page-list-item a {
color: #ebebebd0;
}
.list li.page-list-item a .description {
color: #ebebebb8;
}
.list li.page-list-item a .search-matched {
font-weight: bold;
background-color: #846e43;
}
表の色を濃くする(自作)
code:style.css
.table-block .cell:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.6);
}
.table-block .cell:nth-child(even) {
background-color: rgba(0, 0, 0, 0.3);
}
左上の「AyaExpTech」の色を変える
code:style.css
.quick-launch a.btn.project-home {
background-color: #2e2e38a0;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
scale: 1;
transition: scale 0.1s, box-shadow 0.1s, background-color 0.1s;
}
.quick-launch a.btn.project-home:hover {
background-color: #2e2e38dd;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
scale: 1.03;
}
.quick-launch a.btn.project-home:active {
background-color: #2e2e38bb;
box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.75);
scale: 0.98;
}
ドロップダウンメニューも暗くする
code:style.css
.dropdown-menu {
background-color: var(--card-bg);
}
.page-menu ul>li>div,
.dropdown-menu>li>a {
color: var(--card-description-color);
}
ページ下部の関係ページ検索欄も暗くする
code:style.css
.related-page-list .toolbar .related-page-list-search:focus-within {
background-color: #2e2e38;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6), 0px 2px 3px 0px rgba(0, 0, 0, 0.7);
color: #ebebebd0;
}
.related-page-list .toolbar .related-page-list-search:focus-within input {
color: #ebebebe4;
transition: all .1s;
}
.related-page-list .toolbar .related-page-list-search:focus-within :is(.fa-search, .fa-spinner) {
color: #ebebebcc;
}
メニューバーのプロジェクトリストの表示も調整
code:style.css
.project-list-tab>a {
background: #2e2e38;
color: #ebebebd0;
}
.project-list-tab>a:hover {
background: #5a5a6c;
color: #ebebebd0;
}
.project-list-tab>a.active {
background: #5a5a6c;
}
data-hover-visible .dropdown-menu>li>a:hover{
background: #5a5a6c;
color: #ebebebd0;
}
新規記事作成ボタンの色を調整
code:style.css
.new-button {
background-color: #5a5a6c;
}
data-hover-visible .new-button:hover {
background-color: #505077;
}
画像クリックで拡大→モーダルの周りを暗くする
code:style.css
.modal {
transition: background 0.2s;
}
.modal-open .modal {
background: #000000aa;
}
.modal-body {
filter: drop-shadow(0px 2px 8px black);
}
数式表記$ x = yの横marginを小さく
code:style.css
.line .formula {
margin: auto 3px; // 元は6px
}
.katex {
margin: 2px 0;
}
縦に長い行でも箇条書きの点の位置を真ん中に
code:style.css
.line .indent-mark {
height: 100%;
}
.app:not(.presentation) .line .indent-mark .dot {
bottom : 50%;
}
Youtubeプレイヤー埋め込みを見やすい大きさに
code:style.css
.iframe-video-player iframe {
width: 50%;
max-height: 40vh;
aspect-ratio: 16/9;
}
BudouXを適用して改行位置を自然にする
code:style.css
.lines {
word-break: auto-phrase;
}