settings
thx
color
code:style.css
body {
background-color: #24242f !important; --navbar-title-color: #ffff50; /* プロジェクト名 */ --search-form-icon-color: #ffff50; /* 🔍 */ --search-form-text-color: #24242f; /* 検索の文字 */ --telomere-updated: #6060ff; /* テロメア編集 */ --telomere-unread: #9090ff; /* テロメア未読 */ /* --- 関連ページ ラベルデザイン --- */
--relation-label-text:#ffff50;
}
太字の色
code:style.css
.line strong {
}
デカアイコン
code:style.css
.line img.icon { height: 3.5em; top: 3.2em }
tag
code:style.css
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: 0.9em;
}
code:style.css
/*.deco-\! {*/
.deco-\" {
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
code:style.css
.brand-icon {
--brand-icon-y-color: var(--accent-color);
}
インデントライン
code:style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(7n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #0041FF; /* 色の指定 */ }
.indent-mark span:nth-child(7n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
.indent-mark span:nth-child(7n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
.indent-mark span:nth-child(7n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
.indent-mark span:nth-child(7n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
.indent-mark span:nth-child(7n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
.indent-mark span:nth-child(7n+7):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
}
ページ作成ボタン
code:style.css
.new-button {
}
.new-button .horizontal-line {
}
.new-button .vertical-line {
}
寄せ
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 }
フォント変更
code:style.css
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
font-family:'l-safe' ,'calibri', 'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
/* プロジェクトタイトル */
.project-home {
font-family: "Doto";
font-size: 6;
font-style: italic;
}
スマホだけ小さく
code:style.css
@media(max-width:720px){ /* 最大横幅1080px以下 */
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */
gap: clamp(4px, 0.1svw, 12px);
}
.related-page-list ul.grid {
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */;
}
}
---
code:style.css
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
}
&:not(.cursor-line){
height:28px;
}
}
display:none;
}
}
画像の表示サイズ
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
code:style.css
/* 「アルバム」タグが付いているページの表示設定のみ */
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
}
}
code:style.css
/* 「yara」タグが付いているページの表示設定のみ */
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
}
}
code:style.css
/* 「オオン」タグが付いているページの表示設定のみ */
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
}
}
ネタバレ防止記法
code:style.css
.deco-\~:not(:hover) {
filter: blur(4px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
code:style.css
/* 「artist」タグが付いているページの表示設定のみ */
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
}
}
code:style.css
/* 「songs」タグが付いているページの表示設定のみ */
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
}
}
]
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.2em }
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1 !important;
}
code:style.css
CSS .page-list {
.grid {
li.pin {
a {
width: 100%;
outline: none;
.content {
height: 100%;
flex-direction: row-reverse;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
.header.pinned {
position: absolute;
bottom: 5px;
right: 0;
padding: 0;
width: auto;
display: block;
z-index: 1;
.title {
color: transparent;
font-weight: 500;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #272822 50%, #272822 50%); background-size: 200% 100%;
background-position-x: 0;
padding: 0 5px 0 7px;
width: auto;
}
}
.description {
display: none;
}
}
}
/* a */
&:first-of-type {
grid-column-start: span 2;
grid-row-start: span 2;
}
}
}
}
.page-list,
.related-page-list {
.grid {
li {
aspect-ratio: 1/1;
&.pin+li:not(.pin) {
grid-column-start: 1;
}
a {
box-shadow: none;
border-radius: 0px;
overflow: visible;
.content {
height: 100%;
.header {
border-top: none;
.title {
text-align: center;
}
}
}
}
}
}
}
code:style.css
.navbar .row .project-home::after {
content: "";
display: inline-block; /* 横に並べるために block から変更 */
width: 100px; /* カウンターの幅 */
height: 150px; /* カウンターの高さ */
margin-left: 50px; /* プロジェクト名との隙間 */
background-size: contain; /* 画像が枠内に収まるように */
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; /* 上下の位置を中央に揃える */
}
![https://count.getloli.com/get/@:wakige?name=wakige-scrapbox&theme=asoul&padding=5&offset=0&align=top&scale=0.4&pixelated=1&darkmode=0#.svg");](https://count.getloli.com/get/@:wakige?name=wakige-scrapbox&theme=asoul&padding=5&offset=0&align=top&scale=0.4&pixelated=1&darkmode=0#.svg");){kind=link}