settings
settings
フォント変更
Zen Maru Gothic - > Zen Kaku Gothic New
code:style.css
.line section-0 line-title section-title{
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
}
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: 400;
}
変数
code:style.css
:root {
--card-hover-bg: rgba(0, 0, 0, 0.02);
--new-button-vertical-color: rgba(0, 0, 0, 0.1);
--new-button-horizontal-color: rgba(0, 0, 0, 0.1);
--new-button-bg: transparent;
--new-button-hover-bg: var(--search-form-bg, rgba(255, 255, 255, 0.15));
--new-button-active-bg: var(--search-form-bg, rgba(255, 255, 255, 0.3));
--telomere-updated: #0f0; }
/yozba/日報っぽいタイトルのページカードだけ違うCSSを割り当てる 参考
code:style.css
box-shadow: 0 0 0 1px var(--person-color);
}
box-shadow: 0 0 0 1px var(--project-color);
}
box-shadow: 0 0 0 1px var(--diary-color);
}
box-shadow: 0 0 0 1px var(--person-color);
}
code:style.css
ul.grid {
& :is(.page-list, .related-page-list) & li.page-list-item {
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 10 / 11;
}
--border-color: black;
--body-bg: white;
/* ページ */
& li.page-list-item a {
position: relative;
/*box-shadow: inset 0 0 0 .5px black; アウトライン */
overflow: visible;
height: 100%;
border-radius: 2px;
&:after {
content: '';
position: absolute;
inset: 0;
background: var(--border-color);
mix-blend-mode: screen;
z-index: 20;
border-radius: 10px;
}
/* ピンの右上 */
& .pin {
right: 0px;
top: 0px;
border-radius: 0 0 0 1px;
z-index: 10;
background: linear-gradient(
45deg,
var(--body-bg) 50%,
var(--border-color) 50%
);
}
& .content {
font-family: var(--text-font);
height: calc(100% - 14px);
border-radius: 3px;
overflow: hidden;
margin: 0 0px 0px;
padding-top: 0px;
}
/* ページの上の部分 */
& .header {
border-top: none;
padding: 12 12 12px;
}
&:hover {
filter: contrast(100%) grayscale(100%);
transition: 0.3s;
border-radius: 0px;
border-top: none;
padding: 12 12 12px;
filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, .1));
}
& .title {
font-weight: 500 !important;
font-size: 14px;
color: black;
}
& .description {
color: black;
font-family: inherit;
}
}
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* Grid icon coloring */
& li.page-list-item {
&:first-child {
--border-color: black !important;
/* タイトルフォント */
& .title {
font-size: 2rem;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 300 !important;
display: block !important;
color: white !important;
background: none !important;
text-align: center;
height: 1.1em;
line-height: 1em;
padding-top: .1em;
}
& .icon img {
filter: none !important;
}
}
&:has(.icon) {
& img {
/*filter: saturate(0);*/
}
}
/*タグに応じた色変更・r18タグのブラー*/
& img {
filter: grayscale(1);
-ms-filter: blur(10px);
filter: blur(10px);
}
}
& img {
-ms-filter: blur(5px);
filter: blur(5px);
}
}
}
}
}
}
}
/* 映像関連 */
}
order: 10000;
}
}
Links周り、右下
code:style.css
.grid li.relation-label.links a, .grid li.relation-label.project-links a {
}
.grid li.relation-label .arrow {
display: none;
}
.status-bar>div {
background-color: rgba(0, 0, 0, 0);
}
code:style.css
.page-list ul.grid {
display: grid
grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
gap: clamp(1px, 1svw, 16px);
}
.related-page-list ul.grid {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
gap: clamp(1px, 0.2svw, 16px);
margin: 0;
}
.grid li.page-list-item.pin::after {
content: none;
}
記述の更新の色を黒に
code:style.css
.line .telomere .telomere-border.updated-after-load {
border-color: var(--telomere-updated, black);
}
code:style.css
.global-menu li a.updated, .global-menu li a.highlight {
border-left: 2px solid black;
padding-left: 14px;
font-weight: 400 !important;
font-size: 14px;
color: black;
}
code:syle.css
/* マトリクス記法 */
.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) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 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
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border: 1px solid currentColor;
border-radius: 100px;
font-size: 0.9em;
}
code:style.css
.line:not(.cursor-line) .deco-\~:not(:hover) { filter: blur(3px); }
変数
code:style.css
:root {
}
newbutton
code:style.css
.new-button {
background-color: var(--new-button-bg);
color: black;
}
.new-button .vertical-line {
position: absolute;
width: 3px;
height: 16px;
border-radius: 2px;
background-color: var(--new-button-vertical-color, #fff); }
背景色・ボックスシャドウ消し・ドロップシャドウ
code:style.css
body{
background-color:#FFFFFF;
}
/* ドロップシャドウ */
.grid li.page-list-item a {
box-shadow:none;
filter:drop-shadow(0px 0px 0px rgba(0, 0, 0));
}
/* ページ設定 */
.page {
box-shadow:none;
background-color:#FFFFFF;
}
/* グリッド小さく */
.page-list ul.grid {
display: grid
gap: clamp(2px, 1.5px, 4px);
}
アイコン変更
code:style.css
.brand-icon {
width: 40px;
height: 40px;
background-color: none;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid transparent;
border-radius: 30%;
svg { display: none; }
}
navbar透明
code:style.css
.navbar {
background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
backdrop-filter: none;
border-bottom: 0px solid var(--navbar-border-color, transparent);
}
code:style.css
.search-form .form-group input {
border-radius: 100vh;
padding: 0 20px;
backdrop-filter: blur(4px);
webkit-backdrop-filter: blur(4px);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.search-form .form-group button {
right: 8px;
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, var(--card-backside, transparent), var(--card-backside, transparent) 50%, var(--body-bg, #dcdde0) 50%, var(--body-bg, #dcdde0)); }
Hide settings page
code:style.css
display: none !important;
}
.page-filter-menu {
display: none;
}
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
display: flex;
align-items: center;
&:not(.cursor-line){
height: var(--cosesnse-default-line-height);
&:after{
flex-grow: 1;
content: "";
}
}
}
display:none;
}
}
サムネイル画像を中央に収める
code:centered thumbnail.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: 3px;
}
}
テンプレート用
code:template.css
button#Templates.tool-btn:hover { text-decoration: none }
button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
button#Templates.tool-btn img { opacity: 0 }
![https://pbs.twimg.com/profile_images/1991351792123494400/e-vrIavt_400x400.jpg");](https://pbs.twimg.com/profile_images/1991351792123494400/e-vrIavt_400x400.jpg");){kind=link}