settings

参考になるサイト

code:style.css

/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */

.navbar-brand img, .navbar-brand span { display: none !important }

.navbar-brand::before {

タイトル

code:style.css

.line.line-title {

font-weight: bold;

line-height: 1.4;

}

.line.line-title .text {

font-size: 1.2em;

padding-bottom: .5em;

}

/* スマホ表示用に調整 */

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

.line.line-title .text {

font-size: 1.8rem;

}

}

見出し

code:style.css

.line strong.level-6{

padding-top: 0.2em;

padding-bottom: 0.2em;

padding-left: 15px;

padding-right: 25px;

margin-top: 0.6em;

margin-bottom: 0.6em;

margin-left: 0px;

font-size: 2em;

}

.line strong.level-5{

padding-top: 0.2em;

padding-bottom: 0.2em;

padding-left: 15px;

padding-right: 25px;

margin-top: 0.6em;

margin-bottom: 0.6em;

margin-left: 0px;

font-size: 1.6em

}

.line strong.level-4{

font-size: 1.5em

}

リンク

code:style.css

/* 空のリンクの色を通常リンクと同じにする */

.line a.empty-page-link {

}

/* 別タブ開くリンクをわかりやすくする */

.line a.link:not(.icon)::after {

font-family:'FontAwesome';

content: ' \f08e';

display: inline-block

}

画像の周りに影

code:style.css

.deco-\& img{

}

画像のサイズ調節

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

行間を変える

code:style.css

.line {

line-height: 2.2em;

}

アライン

code:style.css

.deco-\| {

display: inline-block;

width: 100%;

text-align: center;

margin: 0.5em 0;

}

.deco-\> {

display: inline-block;

width: 100%;

text-align: right;

}

.deco-\< {

display: inline-block;

width: 100%;

text-align: left;

}

赤地に白字で強調

code:style.css

.deco-\! {

border-radius: .4em;

padding: 0.3em;

border-bottom: none;

}

引用

code:style.css

.line .quote {

font-style: normal;

font-size: 100%;

padding-left: 15px ;

margin-left: 0px ;

box-shadow: 3px 3px 2px rgba(0,0,0,.1);

}

.line .quote .c-0 {

visibility: hidden ;

}

.line .quote .c-0 + a:last-child {

float: right ;

margin-right: 1em ;

}

.quote .deco-\|{

display: inline-block;

width: 98%;

text-align: center;

margin: 0.25em 0;

}

コードに行数をつける

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: monospace; color: grey }

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

コードブロックを見やすく

code:style.css

/* code blockの頭を静かな色にする */

.line span.code-block .code-block-start {

padding: 2px 5px 2px 5px !important;

}

付箋記法

code:style.css

/* 付箋記法のスタイル例 */

.line:not(.cursor-line) .deco-\~ {

display: inline-block; position: absolute; top: -0.6em; right: -21vw;

min-width: 40%; max-width: 40%; padding: .3rem 1rem;

transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }

@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }

.presentation .line .deco-\~ { position: static; max-width: 100% }

@media print { .line:not(.cursor-line) .deco-\~ {

/* 太字記法との組み合わせでスタイルを変える場合 */

/* 付箋記法内で打消し線記法と下線記法を併用する場合 */

.line .deco-\~.deco-- { text-decoration: line-through }

.line .deco-\~.deco-_ { text-decoration: underline }

ヘッダメニューの固定

code:style.css

/* はりつくメニューバー */

@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 } }

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

/*html, body { -webkit-overflow-scrolling: touch }*/

.app:not(.presentation) { padding-top: 90px }

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

.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto } }

トップページ

code:style.css

/* 不要なメニューを消す */

input.grid-size-range {

display: none;

}

/* タイトル */

.quick-launch .project-home {

border-radius: 0;

}

a.project-home {

}

/* ページカード */

.page-list .grid li {

width: 18rem;

height: 18rem;

margin: 0 2.5rem 2.5rem 0;

}

.grid li.page-list-item a {

border-radius: .5rem;

}

/* ページタイトル */

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

border-top: none;

padding: 1.3rem 1.5rem;

color: white;

}

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

height: 8rem;

font-weight: bold;

}

font-weight: bold;

}

/* サムネ画像をフィットさせる */

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

position: relative;

}

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

position: absolute;

top: calc(50% + 40px);

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

/* スマホ画面 */

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

.page-list .grid li {

width: 15.8rem;

height: 15.8rem;

margin: 0 .7rem 1rem 0;

}

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

padding: 1rem .8rem;

}

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

height: 5.3rem;

line-height: 1.3;

}

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

top: calc(100% + 3.3rem);

}

}

トップページのピン留め

code:style.css

/* ピンしたページのスタイル */

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

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

display: inline-block; transform: rotate(35deg) }

箇条書き記号の変更

code:style.css

.line .indent-mark .dot {

margin-top: 3px;

margin-bottom: 0;

}

.line .indent-mark .c-1 + .dot {

}

.line .indent-mark .c-2 + .dot {

}

.line .indent-mark .c-3 + .dot {

}

.line .indent-mark .c-4 + .dot {

}

画像のサイズ調整

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

マーカー

code:style.css

/* 二重括弧による強調をマーカーっぽくする */

font-weight: bold;

/* 太い下線 */

.deco-\% {

font-weight: bold;

}

＃で始まるタグをラベル風にする

code:style.css

display: inline-block;

padding: 2px 8px;

margin: 0 8px 10px 0;

font-size: 0.8em;

border-radius: 3px;

/* transition: .3s; */

-webkit-transform: scale(1);

transform: scale(1);

}

}