Settings - Blender勉強会会場はこちらです。

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

}