settings

色んな人のプロジェクトを参考にしています

---

全体

code:style.css

色

code:style.css

body {

}

body, .page {

}

スクロールバー

code:style.css

::-webkit-scrollbar{

width: 7px;

}

::-webkit-scrollbar-thumb{

border-radius: 3px;

}

::-webkit-scrollbar-track{

background-color: transparent;

}

navbar

code:style.css

.navbar {

background-color: transparent;

padding-top: 10px;

padding-bottom: 10px;

backdrop-filter: blur(10px);

border-bottom: 0px solid;

}

---

文字

フォント変更

code:style.css

html,

body,

code,

kbd,

pre,

samp,

.tooltip,

.editor,

.grid li,

.list li.page-list-item,

.popup-menu,

.stream {

font-family: "Zen Kaku Gothic New", sans-serif;

font-weight: 500;

font-style: normal;

}

文字色

code:style.css

body {

}

---

pagelist

いらんやつ消す

code:style.css

.grid {

li.page-list-item {

a {

.header {

border-top: none;

}

.pin {

display: none;

}

}

&.pin::after {

display: none;

}

}

}

レイアウト

code:style.css

.container {

max-width: 1116px;

padding: 0 8px;

}

/*カードデザイン基礎*/

.grid li.page-list-item a {

position: relative;

overflow: hidden;

border: none;

border-radius: 10px;

}

.grid li.page-list-item a {

z-index: 0;

.header {

padding: 10px;

.title {

font-size: 13px;

letter-spacing: 0.02em;

line-height: 22px;

background-color: rgba(255, 255, 255, 0.9);

display: inline;

padding: 0 3px 1px;

border-radius: 4px;

}

}

.description {

padding: 0 10px;

}

.icon img {

position: absolute;

inset: 0;

width: 100% !important;

height: 100% !important;

object-fit: cover ;

z-index: -1;

}

}

/*正方形にするやつ */

.grid li {

aspect-ratio: 1 / 1 !important;

}

装飾

code:style.css

.page-list-item.image a::before {

content: '';

position: absolute;

inset: 0;

pointer-events: none;

border-radius: inherit;

box-shadow:

inset 3px 3px 4px hsla(0,0%,100%,.3),

inset -3px 3px 4px hsla(0,0%,100%,.3),

inset 3px -3px 4px hsla(0,0%,100%,.3),

inset -3px -3px 4px hsla(0,0%,100%,.3);

}

タグ別に

code:style.css

li.page-list-item {

.header {

display:none;

}

}

display:none;

}

grid-column: span 2;

aspect-ratio: 178/85 !important;

.header {

display:none;

}

.icon img {

object-fit: contain !important;

}

}

}

code:style.css

ホバー

code:style.css

.grid li.page-list-item a .hover {

background-color: rgba(255, 255, 255, 0.4);

z-index: 1;

transition: background-color .5s;

}

navbar

code:style.css

.navbar {

background-color: transparent;

padding-top: 10px;

padding-bottom: 10px;

backdrop-filter: blur(10px);

border-bottom: 0px solid;

.row {

max-width: 1120px;

padding: 0 8px;

margin-left: auto;

margin-right: auto;

}

.dropdown input {

border-radius: 10px;

padding: 0 10px;

border: 1px solid var(--search-form-border-color, transparent);

font-size: 14px;

color: var(--search-form-text-color, rgba(255, 255, 255, 0.35));

background-color: var(--search-form-bg, rgba(255, 255, 255, 0.15));

}

}

---

ページデザイン

タイトルを中央に

code:style.css

.line.line-title .text{

text-align: center;

letter-spacing: 0.06em;

text-indent: 0.06em;

}

code:style.css

.page-column {

margin-top:32px

}

.page {

border: none;

border-bottom: 1px solid;

border-radius: 0px ;

box-shadow:none;

padding-top: 0px;

.editor {

font-size: 14px;

}

}

.toolbar {

display: none !important;

}

relation lavelを角丸に

code:style.css

.grid li.relation-label a {

border-radius: 10px;

}

テロメアを細く

code:style.css

.line .telomere .telomere-border {

border-width: 0 0 0 2px !important;

}

---

その他レイアウト調整

左上のロゴ変更

code:style.css

.brand-icon {

width: 25px;

height: 25px;

background-size:cover;

background-image:var(--logo-url);

background-repeat:no-repeat;

border-radius: 20%;

svg {display: none;}

}

code:style.css

.list li.page-list-item {

list-style: none;

margin: 0;

padding: 0;

box-shadow: none!important;

}

---

便利機能群

/yozba/行頭に---を入れるだけでセパレーターになるUserCSS

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

.line:has(.deco-\|) {

font-size: 12px !important;

line-height: 1.5em !important;

padding: 2px 8px 2px 8px;

position: relative;

}

.line:has(.deco-\|)::before {

content: "";

position: absolute;

left: 0;

top: 0;

bottom: 0;

width: 2px;

}

/scrasobox/箇条書きを控えめにする

code:style.css

/* 箇条書きを控えめにする */

.app .line .indent-mark .dot {

height: .2em; width: .4em; border-radius: 25%;

background-color: rgba(173,173,173,.55) }

.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }

サムネイル画像を中央に収める

code:style.css

.grid li.page-list-item a .content .icon {

display: flex;

justify-content: center;

align-items: center;

img {

width: auto;

max-width: 100%;

max-height: 100%;

border-radius: 8px;

}

}

画像を100％に

code:style.css

.level-1 img { width: 100%; max-height: none !important; }

タグを目立たせる

code:style.css

border: 1px solid !important;

padding: 0.1em 0.6em !important;

margin: 0 !important;

text-decoration: none !important;

border-radius: 6px !important;

}

/* ホバー時のスタイル */

}

ピン留めで改行

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1 !important ;

}

li.pin:not(:has(~ li.pin)) {

margin-bottom: 3em;

}

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

スマホ比率対応

code:style.css

@media screen and (max-width: 767px) {

.related-page-list ul.grid,

.page-list ul.grid{

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

}

.iframe-video-player iframe {

max-height: 47vw;

}

}

---

https://gyazo.com/85393969344430a71f024bbd6bdefe3d

ギアル　ギギアル　ギギギアル