Settings

https://scrapbox.io/files/68b03676ca8382ddb28a427f.gif

---

code:style.css

:root{

}

code:style.css

font-family: 'IBM Plex Sans JP', 'calibri', 'Zen Kaku Gothic New', "YuGothic", 'Yu Gothic', "Font Awesome 5 Free", "Font Awesome 5 Brands", "Roboto", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

}

.project-home {

font-family: 'IBM Plex Sans JP';

font-weight: 500 !important;

font-size: 12px;

}

コードブロックのフォント

code:style.css

.line code {

font-family: 'Roboto mono', 'M PLUS 1 Code', 'Consolas', sans-serif;

font-weight: 500;

font-size: 85%;

}

code:style.css

.lines .line{

.indent-mark{height: 100%}

.table-block .indent-mark{height: auto}/*tableは除外する*/

}

.indent-mark{

.pad{

height: 100% !important;

overflow: unset !important;

}

span:not(:nth-last-child(-n+2)) .pad{

}

}

背景色・ボックスシャドウ消し・ドロップシャドウ

code:style.css

body{

}

コードブロックの背景色設定

code:style.css

.line span.code-block{

}

code:style.css

/* ドロップシャドウ */

.grid li.page-list-item a {

box-shadow:none;

padding: 0 5%;

filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));

}

/* ページ設定 */

.page {

box-shadow:none;

}

/* グリッド小さく */

.page-list ul.grid {

display: grid

gap: clamp(2px, 1.5px, 4px);

}

カーソルを点滅させる

code:style.css

@keyframes blink {

0% { opacity: 0; }

49% { opacity: 0; }

50% { opacity: 1; }

}

.cursor {

animation: blink 1s infinite

}

スクロールバー

code:style.css

::-webkit-scrollbar-track{

background-color: white;

}

::-webkit-scrollbar{

width: 8px;

}

::-webkit-scrollbar-thumb{

border-radius: 0px;

}

テロメアの色

code:style.css

--telomere-updated: var(--accent-color);

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);

}

.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 {

}

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%;

max-height: calc(100vh - 130px) !important;

overflow-y: auto;

overscroll-behavior: none;

}

code:style.css

.page-list .grid {

position: relative;

}

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

grid-column-start: 1;

position: static;

&:before{

content: "";

position: absolute;

width: 100%;

margin-top: -22px;

}

}

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

margin-bottom: 30px;

}

flex-box画像

https://scrapbox.io/files/68c1c6e5696c4e9a359c4fe3.png

https://scrapbox.io/files/68c280faeff3234ffcb087a5.png

gifアニメーションにしたい

code:style.css

.flex-box{

background-repeat: no-repeat;

background-position: left !important;

background-size: cover;

content: "";

display: block;

height: 100px;

margin-left: -30px;

margin-top: 20px;

width: auto;

top: 100px;

}

flex-box要素の位置調整

無理やり感

code:style.css

.page-list-mode-menu .tool-btn {

padding: 75px 10px 3px;

}

.page-sort-menu .tool-btn {

padding: 75px 10px 3px;

}

.page-filter-menu .tool-btn {

padding: 75px 10px 3px;

}

.page-list-translation-menu .tool-btn {

padding: 75px 10px 3px;

}

画像サイズ

code:style.css

.line .image {

max-height: 100% !important;

max-width: 100% !important;

}

ピンされたページの次の非ピンページの配置調整

code:style.css

/* ピンされたページの次の非ピンページの配置調整 */

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

grid-column-start: 1;

}

ピン止めページのピン

code:style.css

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

background-color: transparent;

background-image: none;

}

.grid li.page-list-item a .pin::after {

content: '';

font-family: 'VL Gothic';

font-weight: 900;

font-size: 20px;

bottom: -20px;

position: absolute;

left: -10px;

transform: rotate(35deg);

}

カードデザイン

https://scrapbox.io/files/68c30ea1d570411765a8f486.png

code:style.css

.page-list {

.grid {

li:not(.pin){

a {

.content {

background-size: cover;

background-position: center;

}

}

}

li.pin {

aspect-ratio: 1/1;

a {

width: 100%;

background-color: white;

/* アニメーションの設定 */

transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;

outline: none;

border: 1px solid transparent;

/* タイトルのスタイル定義 */

.content {

.header.pinned {

.title {

font-size: 14px;

font-weight: normal;

letter-spacing: 1px;

text-align: left;

padding: 0;

-webkit-background-clip: text;

width: auto;

}

}

}

/* ホバー時 */

&:hover {

outline: none;

background-color: white;

/* 左上へ少し移動 */

transform: translate(-4px, -4px);

z-index: 10;

}

}

/* 最初のカード */

&:first-of-type {

grid-column-start: span 2 !important;

grid-row-start: span 2 !important;

}

}

}

}

/* 8番目のカード */

&:nth-of-type(8) {

margin-bottom: 3em;

}

.page-list,

.related-page-list {

.grid {

li:not(.pin) {

aspect-ratio: 1/1;

.content .title{

font-weight: normal;

text-align: right;

}

img {

width: 100%;

height: 100%;

object-fit: cover;

}

}

}

}

日報っぽいタイトルのページカードだけ違うCSSを割り当てる

code:style.css

):is(

) a div.header{

border-color: var(--diary-color)

}

特定のタグが付いているページの表示設定

code:style.css

a {

background-color: rgba(0, 0, 0, 0);

border: none;

}

.header {

display: none;

}

img {

position: absolute;

object-fit: cover; /* 比率を変えずに余す所なく */

/* 画像の中央を表示基準にする */

height: 100%;

inset: 0;

}

}

テーブルデザイン

上を参考にコード変更

エクセル化してるのって少数派？

code:style.css

.table-block .table-block-start {

background-color: transparent;

}

.table-block .table-block-start a {

color: var(--accent-color);

}

.table-block .cell {

}

/*1列目*/

.table-block .cell:nth-child(1) {

}

/*1行目*/

.line:has( .table-block-start ) + .line .table-block .cell:nth-child(n+1) {

}

.table-block .cell:nth-child(2n+3){

}

.table-block .cell:nth-child(2n+2){

}

/*1番左上が0文字でないならば、1行目を灰色に塗る*/

/*ただし、1番左上は灰色に塗らない*/

}

左上のセルに注目

表（2要素）

table:test

1 2 3 4 5

A a b c d e

B b c d e f

C c d e f g

D d e f g h

表（1要素）

table:test

S 1 2 3 4 5

A a b c d e

B b c d e f

C c d e f g

D d e f g h

table:test

Alice a b c d e

Bob b c d e f

Carol c d e f g

Dave d e f g h

左上のロゴ変更

https://scrapbox.io/files/68b15ccfe94d23bc141af28e.png

ハンバーガーメニューといいます

code:style.css

.brand-icon {

width: 30px;

height: 30px;

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

background-size:cover;

background-repeat:no-repeat;

border-radius: 5%;

svg {display: none;}

}

記事タイトルの設定

code:style.css

.line.line-title .text {

width: 100%;

margin: 0.25em 0 0.75em 0;

padding: 0.25em 0.5em 0.25em 0.5em;

font-weight: normal;

font-size: 30px;

position: relative; left: -15px;

}

ハッシュタグの見た目をよくする

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

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.section-title, .code-block-start { counter-reset: codeline }

content: counter(codeline);

position: absolute; display: inline-block; left: -4em; z-index: 10;

min-width: 50px; text-align: right; vertical-align: bottom;

/* ↓行番号のフォントとか色とかの指定はここ */

font-family: 'Roboto mono', 'M PLUS 1 Code', 'Consolas', sans-serif; color: grey }

/* カーソル行の行番号を濃く表示する */

code:style.css

.indent-mark {

height: 100% !important;

}

.indent-mark .pad {

height: 100% !important;

overflow: unset !important;

}

.indent-mark span:nth-child(2n+2) .pad {

}

行頭に---を入れるだけでセパレーターになる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;

}

}

---

参考文献：

Scrapboxカスタマイズコレクション