settings
code:style.cs
code:style.cs
/* 初心者向けページに初心者マークを付ける */
.title::before {
content: '🔰 ';
}
code:style.css
/* スマホで文字が切れてしまうのを微調整 */
font-size: 0.8em !important;
}
code:style.css
/* 検索窓サジェストを大きくする */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
code: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-\% {
font-size: smaller;
padding: 0 .2em;
}
/* 強調（赤字に白文字） */
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
吹き出し記法
吹き出し本体
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
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;
}
左吹き出しの角
code: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;
}
右吹き出しの角
code: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;
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
color: hsl(200,80%,43%)!important;
}
code: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 .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) }
object-fit: cover;
width: 100%;
height: 100%;
}
/* その他 */
code:style.css
/* 水平線画像のリンクを解除する */
.line:not(.cursor-line) a.icon:is(
) {
pointer-events: none;
vertical-align: -20%;
}
code:style.css
/* Streamの文字を選択可能にする */
.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}
/* 編集者を非表示にする */
display: none;
}
入力が少し面倒で[~<Space><Space><Left><C-V>の順番でやるとうまく機能する
= [~ を打った後に半角スペース2回 → 半角一個分左に戻る → コピーアンドペーストでリンクを貼り付ける
code: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";
}
code:style.css
/* 右寄せ */
.deco-\>{position: absolute; width: 100%; text-align: right }
code:style.css
/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
code: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;}
code:style.css
code:style.css
code: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 {
font-size: 85%;
font-family: 'Font Awesome 5 Free';
content: '\f10d';
font-weight: 900;
vertical-align: super;
}
プロジェクトホームにロゴの表示
code: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; /* */
}
アープラ アープラ.icon がかっこいいロゴだったんで、表示させてみました suto3.icon 2024/4/19 仕様が変わって表示できなくなりました
code:style.css
:root{
--project-subtitle: " - A.R.P.L.A."; /* */
--project-subtitle-color : white; /* */
--project-subtitle-background-color : transparent; /* */
}
code: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."のテキストを表示させてみました suto3.icon
--project-subtitle の値を変更すると、表示するテキストを変更できます
参考サイト