settings
style.cs@import url('https://scrapbox.io/api/code/arpla/Discord%E5%AE%A3%E4%BC%9D%E3%83%94%E3%83%B3%E7%95%99%E3%82%81%E8%A8%AD%E5%AE%9A/style.css');style.cs/* 初心者向けページに初心者マークを付ける */
.page-list-item a:is( [href="/arpla/%E3%81%93%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"], /* このサイトについて */
[href="/arpla/%E7%B7%B4%E7%BF%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86"], /* 練習してみよう */
[href="/arpla/%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88"], /* 最初のアンケート */
[href="/arpla/Scrapbox%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9"], /* 禁則事項 */
[href="/arpla/%E7%A6%81%E5%89%87%E4%BA%8B%E9%A0%85"], /* Scrapboxの使い方 */
[href="/arpla/%E6%96%B0%E3%81%97%E3%81%8F%E5%8F%82%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F%E6%96%B9%E3%81%B8"])
.title::before {
content: '🔰 ';
}style.css/* スマホで文字が切れてしまうのを微調整 */
.grid li.page-list-item[data-page-title="共同編集しませんか？"] a .title {
font-size: 0.8em !important;
}style.css/* 検索窓サジェストを大きくする */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}from /masui/settings（一部外見変更）
style.css/* Streamボタンを表示させる */
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs {
display: block !important;
margin-right: 10px;
}
/* 文字装飾 */
/* 取り消し装飾のときに文字を見えにくくする */
.deco-\- {
opacity: 0.5;
}
/* 緑色の小文字という文字装飾 */
.deco-\% {
color: #94d6da;
font-size: smaller;
padding: 0 .2em;
}
/* 強調（赤字に白文字） */
.deco-\! {
color: #fff;
background-color: #ee6666;
padding: 0.1em 0.2em 0.1em 0.2em;
}吹き出し記法
吹き出し本体
style.css.deco-\{, .deco-\} {
font-size: 1em;
color: #222;
background-color: #8DE055;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}左吹き出しの角
style.css.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #8DE055 transparent;
}右吹き出しの角
style.css.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #8DE055 transparent;
}吹き出し内のリンク色の調整
style.css.deco-\{ a,
.deco-\} a {
color: hsl(200,80%,43%)!important;
}style.css/* 画像配置のいろいろな設定 */
/* [, 画像]で画像を左寄せにする */
.line .text, .stream .line { clear: both; overflow: hidden; }
.line .deco-\, img.image { float: left; margin-right: .5em; }
.stream .line .deco\, img.image { float: none; margin-right: 0; }
/* [. 画像]で画像を右寄せにする */
.line .text, .stream .line { clear: both; overflow: hidden }
.line .deco-\. img.image { float: right; margin-left: .5em }
.stream .line .deco\. img.image { float: none; margin-left: 0 }
/* 画像のサイズを変える */
.level-1 img {
display: none !important;
}
.level-2 img {
width: 16.7%; max-height: none; }
.level-3 img {
width: 33%; max-height: none; }
.level-4 img {
width: 50%; max-height: none; }
.level-5 img {
width: 83.3%; max-height: none; }
.level-6 img {
width: 100%; max-height: none; }
/* マトリクス記法 */
.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%;
}
/* その他 */style.css/* 水平線画像のリンクを解除する */
.line:not(.cursor-line) a.icon:is(
[href$="/hr"],
[href$="/keisen2"],
[href$="/keisen"]
) {
pointer-events: none;
vertical-align: -20%;
}style.css/* Streamの文字を選択可能にする */
.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}
/* 編集者を非表示にする */
#page-info-menu + ul > li:nth-child(2) {
display: none;
}入力が少し面倒で
[~<Space><Space><Left><C-V> の順番でやるとうまく機能する=
[~ を打った後に半角スペース2回 → 半角一個分左に戻る → コピーアンドペーストでリンクを貼り付けるstyle.css/* [~ リンク]でリンクを出典アイコンにするUserCSS*/
.line .deco-\~ {
font-size: .6em;
/* font-size: .8em; */
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\~ :is(.page-link:not(.icon), .link) span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\~ .page-link:not(.icon) span.empty-char-index ~ span {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line .deco-\~ :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: 'Font Awesome 5 Free';
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}style.css/* 右寄せ */
.deco-\>{position: absolute; width: 100%; text-align: right }style.css/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}style.css .page-list > .grid li.pin {
height: 32px;
width: 100%;
margin-bottom: 5px;
}
@media (hover: none) {
/* ピン留めするカードの数が偶数である限りは秩序が保たれる脆弱なCSS */
.page-list ul.grid {
grid-template-columns: repeat(6, 1Fr);
}
.page-list > .grid li.pin {
grid-column: 2 span;
}
.page-list > .grid li:not(.pin):nth-child(odd) {
grid-column: 1 / 4;
}
.page-list > .grid li:not(.pin):nth-child(even) {
grid-column: 4 / 7;
}
}
.page-list > .grid li.page-list-item.pin a {
background-color: var(--card-bg);
border-radius: 7px;
margin: none;
box-shadow: none;
}
.page-list > .grid li.page-list-item a .header.pinned {
border-top:none;
padding: 6px 5px;
}
.page-list > .grid li.page-list-item.pin a .title {
font-size: 12px;
color: var(--card-title-color);
max-height: 20px;
text-align: center;
}
.page-list > .grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}
.page-list > .grid li.page-list-item a .pin {background: none;}style.css.project-events a[href^="/arpla"] {display: none;}style.css.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
font-style: italic;
}
.deco-\"::before {
color: #a0a0a0;
font-size: 85%;
font-family: 'Font Awesome 5 Free';
content: '\f10d';
font-weight: 900;
vertical-align: super;
}プロジェクトホームにロゴの表示
stylexx.css .quick-launch .project-home .title::after {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
margin: 10px; /* */
padding: 8px 0px 0px 112px; /* */
position: center bottom; /* */
background-image: url('/api/pages/arpla/アープラ/icon'); /* */
background-size: contain; /* */
background-repeat: no-repeat; /* */
}2024/4/19 仕様が変わって表示できなくなりました
style.css:root{
--project-subtitle: " - A.R.P.L.A."; /* */
--project-subtitle-color : white; /* */
--project-subtitle-background-color : transparent; /* */
}style.css /* Project description */
.project-home > .title:after {
content: var(--project-subtitle);
color: var(--project-subtitle-color);
background-color: var(--project-subtitle-background-color);
white-space: pre;
font-size: 0.7em;
}代わりに、" - A.R.P.L.A."のテキストを表示させてみました 
--project-subtitle の値を変更すると、表示するテキストを変更できます
ここにルビ記法cssがあった。
参考サイト