settings
#非表示ページ
フォント変更 (BIZ UDP Gothic)
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=M+PLUS+1:wght@100..900&display=swap');
html, body, #editor, .grid li {
font-family: "M PLUS 1","Klee One",sans-serif;
}
strong.level.level-1 {
font-weight: bold;
}
strong.deco-\* {
font-weight: 400;
}
strong.level {
font-weight: bold;
}
色つける
赤青緑
色混ぜ
>をつけて背景濃いめ
# で小さく目立たなくして
'をつけて上付き
,をつけて下付き
【 /forum-jp/文字色 】よりどうにか改造
code:style.css
.deco-\! {color: #f66;} /* ! := red */
.deco-\. {color: #39f;} /* . := blue */
.deco-\~ {color: #6c3;} /* ~ := green */
.deco-\!.deco-\. {color: #c9f;} /* !. := purple */
.deco-\!.deco-\~ {color: #fc0;} /* !~ := yellow */
.deco-\..deco-\~ {color: #396;} /* .~ := blue-green */
.deco-\!.deco-\..deco-\~ {color: #aaa;} /* !.~ := grey */
.deco-\> { /* > := black background */
background-color: #333;
padding: 0.15em 0.3em 0.15em 0.3em;
}
.deco-\, { /* , := subscript */
font-size: 0.8em;
vertical-align: sub;
}
.deco-\' { /* ' := superscript */
font-size: 0.8em;
vertical-align: super;
}
.deco-\# {font-size: 0.9em; /* # := make smaller */
color: #aaa;
}
アスタリスクで太くしない
その代わりにアスタリスク一個ですこし大きくなる
+で少し太く
ひとつ上を改造
code:style.css
.deco-\* {
font-weight: normal; /* disable bold */
font-size: 1.15em; /* make bigger little bit when one asterisk */
}
.deco-\+ {
font-weight: 600;
}
インデントのバレットをカスタム
code:style.css
.app .line .indent-mark .dot {
height: .2em;
width: .2em;
border-radius: 100%; /* make it circle */
opacity: .6; /* make color liter */
background-color: #fff } /* color = white */
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
文字数カウンタ
【 /arpla/文字数カウンター 】より
code:style.css
/* style of counter */
#__charCounter__ span {
cursor: pointer; font: 88%/1 monospace;
opacity: .35; /* if no mouseover, opacity is 35% */
transition: opacity .2s ease-out }
#__charCounter__ span:hover { opacity: 1 } /* if mouseover, opacity is full */
#__charCounter__ { z-index: 30; position: sticky; bottom: 0; text-align: right }
/* style of popup */
#__charCounterPopup__ {
z-index: 30; position: absolute; bottom: 2em; right: -1em;
border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1);
padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace;
transition: opacity .3s ease-out }
/* in presentation mode, disable counter */
.presentation #__charCounter__,
.presentation #__charCounterPopup__ { display: none }
区切り線の非リンク化
例 ↓
/icons/hr.icon
【 /noratetsu/●iconのページにクリックでジャンプできないようにする 】より引用・改造
code:style.css
a.link.icon:is(
href="/icons/hr", /* select hr */
href="/icons/-", /* select - */
href="/icons/---", /* select --- */
href="/icons/hrd" /* select hrd */
) { pointer-events: none; }
settings, akky_1023 ホームと Stream から消す
【 /villagepump/特定のページを非表示にするUserCSS 】より引用
code:style.css
:is(.page-list-item, .stream .page):is(
data-page-title="settings", /* select this page */
data-page-title="akky_1023" /* select my user page */
) {
display: none !important;
}
大括弧
[(] [)] → ( )
【 /ePi5131/角括弧に展開されるリンク 】より
code:style.css
.line:not(.cursor-line) a:is(
href="/Neomenia/(",
href="/Neomenia/)"
) {
color: var(--page-text-color);
position: static;
line-height: 0;
font-size: 0;
}
.line:not(.cursor-line) ahref="/Neomenia/("::before {
content: "[";
font-size: 15px;
}
.line:not(.cursor-line) ahref="/Neomenia/)"::before {
content: "]";
font-size: 15px;
}
.line span> a:is(
href="/Neomenia/(",
href="/Neomenia/)"
) {
pointer-events: none;
}
/* hide them from links */
.links-2-hop:has(
a:is(
href="/Neomenia/(",
href="/Neomenia/)"
)
) {
display: none !important;
}
マーカー
[[こういうの]] → こういうの
【 /scrasobox/マーカー 】より引用・改造
code:style.css
.line strong:not(class) {
background: linear-gradient(transparent 10%, #c03 25%, #c03 70%, transparent 90%);
padding: 0em 0.2em 0em 0.2em; /* make width bigger */
}
外部リンクにアイコンつける
【 外部リンクのデモ 】
【 /customize/外部リンクを区別するUserCSS 】より引用・改造
code:style.css
/* add icon to external link */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: bold;
display: inline-block;
font-size: .4em;
color: #6cf;
padding-right: 2px;
}
はみ出したらスクロールできるように
【 /opzriv/はみ出たテーブルを横スクロールさせる 】より引用
code:style.css
.page {
overflow-x: auto; /*はみ出ている時スクロールバーをつける*/
overflow-y: hidden; /* これがないとたまに謎の縦のスクロールバーが出現する*/
}