Settings
https://gyazo.com/47c825de7d9d2c67173757e3a5f3c008
このプロジェクトの設定ページです。
ここにcssを書くとScrapboxのデザインが変わります。
nomadoor.iconがかなりいじってしまっていますが、こんなデザイン嫌だ!自分のデザインがいい!というこだわり派な方。大丈夫です。
自分のべージにcssを書くと、自分だけに適用されるのでぜひやってみてください。
フォント変更
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700;900&display=swap');
html, body, #editor, .grid li{
font-family: "Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", "sans-serif";}
ホーム画面
ピンされたページを独立した段に表示
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
サムネの画像小さく、真ん中に あと文字パディングとサイズ変更
code:style.css
/* サムネ画像をフィットさせる */
/* サムネ画像をフィットさせる */
.grid li.page-list-item a .icon {
position: relative;
}
.grid li.page-list-item a .icon{
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 90px;
max-width: 90%;
vertical-align: middle;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding; 8px 10px;
}
.grid li.page-list-item a .title{
font-size: 13px;
}
四角の下に謎の隙間があったので消す
code:style.css
.grid li.page-list-item a .content{
height: 100%;
}
flexカラム逆に あとページの色
code:style.css
.grid li.page-list-item a .content{
flex-direction: column-reverse;
background: #4dc3fa
}
.grid li.page-list-item a{
background-color: transparent;
}
/* タイトルの背景色 */
.grid li.page-list-item a .header{
background: #22272B;
border-top: 0px;
}
/* 文字色 */
.grid li.page-list-item a .description{
color : rgb(34 39 43);
}
背景色 & 角丸にしてシャドウ
code:style.css
body{
background-color : #3A434C
}
.grid li.page-list-item a .content{
border-radius: 5px;
}
.page-list .grid li{
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
背景色変えたのでピンのはみ出した部分の色変更
code:style.css
.grid li.page-list-item a .pin{
background: linear-gradient(45deg, var(--card-backside, #aaa), var(--card-backside, #aaa) 50%, #3a434b 50%, #3a434b)
}
マウスホバーで影消し
code:style.css
.page-list .grid li:hover{
box-shadow: none;
transition: all 0.3s ease 0s;
}
影
code:style.css
/* 影が飛び出るのでレイヤ―指定して被せる */
.grid li.page-list-item a .header{
z-index: 2;
}
.grid li.page-list-item a .icon img{
box-shadow: 1px 1px 0 #2b8fbe,
2px 2px 0 #2b8fbe ,
3px 3px 0 #2b8fbe ,
4px 4px 0 #2b8fbe ,
5px 5px 0 #2b8fbe ,
6px 6px 0 #2b8fbe ,
7px 7px 0 #2b8fbe ,
8px 8px 0 #2b8fbe ,
9px 9px 0 #2b8fbe ,
10px 10px 0 #2b8fbe ,
11px 11px 0 #2b8fbe ,
12px 12px 0 #2b8fbe ,
13px 13px 0 #2b8fbe ,
14px 14px 0 #2b8fbe ,
15px 15px 0 #2b8fbe ,
16px 16px 0 #2b8fbe ,
17px 17px 0 #2b8fbe ,
18px 18px 0 #2b8fbe ,
19px 19px 0 #2b8fbe ,
20px 20px 0 #2b8fbe ,
21px 21px 0 #2b8fbe ,
22px 22px 0 #2b8fbe ,
23px 23px 0 #2b8fbe ,
24px 24px 0 #2b8fbe ,
25px 25px 0 #2b8fbe ,
26px 26px 0 #2b8fbe ,
27px 27px 0 #2b8fbe ,
28px 28px 0 #2b8fbe ,
29px 29px 0 #2b8fbe ,
30px 30px 0 #2b8fbe ,
31px 31px 0 #2b8fbe ,
32px 32px 0 #2b8fbe,
33px 33px 0 #2b8fbe,
34px 34px 0 #2b8fbe,
35px 35px 0 #2b8fbe,
36px 36px 0 #2b8fbe,
37px 37px 0 #2b8fbe,
38px 38px 0 #2b8fbe,
39px 39px 0 #2b8fbe,
40px 40px 0 #2b8fbe,
41px 41px 0 #2b8fbe,
42px 42px 0 #2b8fbe,
43px 43px 0 #2b8fbe,
44px 44px 0 #2b8fbe,
45px 45px 0 #2b8fbe,
46px 46px 0 #2b8fbe,
47px 47px 0 #2b8fbe,
48px 48px 0 #2b8fbe,
49px 49px 0 #2b8fbe,
50px 50px 0 #2b8fbe;
51px 51px 0 #2b8fbe,
52px 52px 0 #2b8fbe,
53px 53px 0 #2b8fbe,
54px 54px 0 #2b8fbe,
55px 55px 0 #2b8fbe,
56px 56px 0 #2b8fbe,
57px 57px 0 #2b8fbe,
58px 58px 0 #2b8fbe,
59px 59px 0 #2b8fbe,
60px 60px 0 #2b8fbe;
}
ノート
ドットを削除
code:style.css
/* 行頭のドットを薄く */
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}
関連リンクを左側に表示する
code:style.css
@media (min-width: 1050px) {
.row-flex .col-page {
max-width: 960px;
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.page-wrapper .page {
width: 700px;
}
.related-page-sort-menu{
justify-content: normal;
}
.page-wrapper .related-page-list {
max-width: 500px;
}
.related-page-list .grid .splitter:first-child {
display: none;
}
.related-page-list .splitter {
height: 10px!important;
}
.related-page-list .realtion-label {
/* "realtion-label",これはtypo? */
height: 50px!important;
}
.related-page-list .page-list-item {
height: auto!important;
}
.related-page-list .grid li {
width: 200px!important;
padding: 0 0 0 0!important;
margin: 0 0 10px 0!important;
height : auto;
}
.related-page-list .grid .page-list-item .content .title{
font-size: 14px;
}
.related-page-list .icon {
display: none!important;
}
.page-wrapper .grid li.page-list-item a .description{
display: none;
}
画像を並べる[| [画像URL][画像URL][画像URL]…]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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 }
ポップアップ
/scrasobox/ポップアップメニューをさっぱりさせてみる
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: normal 100%/normal FontAwesome;
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }