settings

https://scrapbox.io/files/6132f90e461a9b002302a2cd.png

いろんな方々の個人Scrapboxを参考に見よう見まねで作ったCSSです

ところでCSSって何ですか

背景画像

code:style.css

/* 背景画像選択 */

body {

background-attachment: fixed;

background-size: cover;

}

li.page-list-item {font-family: unset !important;}

プロジェクト名を上のバーの中に埋め込むやつ（多分）

code:style.css

.navbar .row {

height: 55px;

}

.navbar-brand{

height: 55px;

}

/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */

/* ※次のはりつくnavbarと同時に使う必要がある */

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

.quick-launch .project-home .title{

/* ↑ここのカラーコードがプロジェクト名の文字色になるっぽい */

.quick-launch .project-home {

position: fixed; top:7px; left: calc((100% - 1080px)/2); z-index: 990}

.quick-launch .project-home:hover,.quick-launch .project-home:focus, .quick-launch .project-home:active {

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

.quick-launch .project-home { left: 85px } }

@media screen and (min-width: 992px) and (max-width: 1260px) {

.quick-launch .project-home { left: 100px } }

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

.quick-launch .project-home { left: calc((100% - 1260px)/2 + 100px) } }

/* はりつくnavbar */

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

.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }

.app:not(.presentation) .page-menu { position: fixed; top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu {

position: absolute; left: auto; top: auto;

max-height: calc(100vh - 100px); overflow-y: auto }

.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }

.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 }

}

ピン留めしたページを段分けするやつ

code:style.css

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

clear: both;

}

画像サイズを［** ［画像URL］］で指定できるようになるやつ

code:style.css

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }