settings

フォント変更

code:style.css

/*

body{

font-family: 'M PLUS 1 Code';

}

.editor {

font-family: 'M PLUS 1 Code';

}

.grid li {

font-family: 'M PLUS 1 Code';

}

*/

カラーテーマ変更

code:style.css

:root {

}

body {

--body-bg: var(--dark);

--navbar-bg: rgba(175,85,120, 0.8);

--search-form-icon-color: var(--white);

--search-form-bg: rgba(239, 239, 239, 0.3);

--search-form-icon-focus-color: var(--pink);

--navbar-icon-color: var(--white);

--navbar-icon-active-color: var(--pink);

--navbar-icon-hovered-color: var(--pink);

--new-button-bg: var(--pink);

--new-button-hover-bg: var(--pink);

--new-button-active-bg: var(--pink);

--telomere-border: var(--pink);

--telomere-unread: var(--pink);

background-image: url("/files/6034ed69b2c0bd001ccd1e54.svg");

}

.page{

}

color: var(--pink);

}

/* TOPページ画面右下の「〇〇pages」を非表示 */

.status-bar{

visibility: hidden;

}

リンクの色

code:style.css

}

}

画像のサイズ調整

code:style.css

img.strong-image { width: 100%; max-height: none; !important; }

.level-1 img.image { width: 40%; max-height: none; !important; }

.level-2 img.image { width: 50%; max-height: none; !important; }

.level-3 img.image { width: 60%; max-height: none; !important; }

.level-4 img.image { width: 70%; max-height: none; !important; }

.level-5 img.image { width: 80%; max-height: none; !important; }

.level-6 img.image { width: 90%; max-height: none; !important; }

アイコンのサイズ調整

code:style.css

@media screen and (max-width: 767px) {

.line img.icon { width: 7%; max-height: none; height: auto; vertical-align: text-bottom;}

}

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

.line img.icon { width: 4%; max-height: none; height: auto; vertical-align: text-bottom;}

}

.line img.strong-icon { width: 100%; max-height: none; height: auto; }

.level-1 img.icon { width: 10%; max-height: none; height: auto; }

.level-2 img.icon { width: 20%; max-height: none; height: auto; }

.level-3 img.icon { width: 30%; max-height: none; height: auto; }

.level-4 img.icon { width: 40%; max-height: none; height: auto; }

.level-5 img.icon { width: 50%; max-height: none; height: auto; }

.level-6 img.icon { width: 60%; max-height: none; height: auto; }

リストからsettingsを消す（検索して表示は可能）

code:style.css

/* ピンを付けたカードの3番目(ここにsettingsが居る)を非表示にする */

.page-list-item.grid-style-item.pin:nth-child(3) {

display: none;

}

リストのカード内のサムネ画像を枠内に納める

code:style.css

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

position: relative;

padding: 0;

margin: auto;

}

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

max-height: 100px;

max-width: 100%;

vertical-align: middle;

border-radius: 3px;

}

@media screen and (max-width: 767px) {

.grid li.page-list-item a .icon img {

max-height: 120px;

}

}

インラインコードには色をつけない

code:style.css

code.code span {

color: inherit !important;

}

ハッシュタグをラベル風にする

code:style.css

display: inline-block;

padding: 0px 8px;

margin: 0 8px 10px 0;

font-size: 0.8em;

border-radius: 3px;

transition: .3s;

-webkit-transform: scale(1);

transform: scale(1);

}

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

動画埋め込み時のサイズを調整

code:style.css

@media screen and (max-width: 767px) {

.iframe-video-player iframe{

width: 100%;

}

}

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

.iframe-video-player iframe{

width: 400px;

height: 300px;

}

}

コードブロック

code:style.css

.line span.code-block {

/* background-color: pink; */

}

ホームボタンをロゴに差し替え

code:style.css

/* ロゴマークの導入 */

.project-home {

width: 100px;

height: 38px;

z-index: 1000;

}

.project-home:hover {

opacity: 0.5;

}

/* 元の家アイコンとテキストを隠す*/

.quick-launch .project-home > .icon.icon-home {

color: transparent !important;

display: none;

}

.quick-launch .project-home > .title {

color: transparent !important;

display: none;

}

ホームボタンをナビゲーションバー上に移動

code:style.css

.title {

}

.project-home {

position: fixed;

top: 6px;

z-index: 1000;

}

.navbar {

height: 53px;

padding-top: 6px;

padding-bottom: 6px;

}

.navbar .row .col-search {

width: 50%;

}

.navbar .row .col-search > .navbar-form > a.new-button {

position: absolute;

position: absolute;

left: -80px;

}

.navbar .row .col-search > .navbar-form > form.search-form {

margin-left: 247px;

}

.mobile-search-toggle {

margin-left: 247px

}

Scrapboxのロゴを右端に移動

code:style.css

.navbar > .container > .row {

position: relative;

}

.navbar > .container > .row > .col-brand {

width: 75px;

flex-grow: 0;

position: absolute;

top: 0;

right: 0;

}

ピン止めマークを変更

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: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;

こんな感じでネストされたコードブロックの左側の余白の色を変える

code:style.css

.line span.code-block .code-block-margin {

}

ピン留めされたページリンクを独立した段に表示する

code:style.css

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

clear: both;

}

リンクリストのLinksの色

code:style.css

.grid li.relation-label.links a {

border-radius: 10px;

}

.grid li.relation-label.links .arrow {

}

角丸

code:style.css

img {

border-radius: 10px;

}

.grid li.relation-label a {

border-radius: 10px;

}

.grid li.page-list-item a {

border-radius: 10px;

}

https://scrapbox.io/files/62f284aaaeca3e0020948510.svg