settings

https://gyazo.com/a323f1cc78d02be1e15b49231a13422c

全体

code:style.css

ページ・テキスト

code:style.css

/* Disable shadow */

.page {

box-shadow: 0 1px 0 rgba(0,0,0,0.16);

column-count: 1;

}

.text {

color: ;

font-size: ;

font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

行間を広くする

code:style.css

.line { line-height: 30px; }

グリッド

code:style.css

.grid li.page-list-item {

margin-bottom: 0.7em ;

font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.grid li.page-list-item a .title { text-align: center; }

.grid li.page-list-item a,

.grid.grid-md li.page-list-item a,

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

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

border-radius: 7px ;

}

.grid li.page-list-item a:hover,

.grid.grid-md li.page-list-item a:hover,

.grid.grid-lg li.page-list-item a:hover {

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

}

.grid li.page-list-item a::before,

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

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}

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

width: 100% ;

height: 100% ;

border-radius: 0px ;

background-image: none ;

}

.grid li.page-list-item a .pin::before,

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

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}

.grid li.page-list-item a .header { border-top: 0 ; }

引用

code:style.css

.line .quote { font-style: normal ; }

文字数表示

code:style.css

/* カウンターのスタイル */

cursor: pointer;

font: 88%/1 monospace;

opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */

transition: opacity .2s ease-out

}

opacity: 1 /* ←マウスを乗せたときの濃さ 100% */

}

z-index: 30;

position: sticky;

bottom: 0;

text-align: right

}

/* ポップアップのスタイル */

z-index: 30;

position: absolute;

bottom: 2em;

right: -1em;

border-radius: .25em;

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

padding: .8em;

background-color: azure;

font: 13.5px/1.4 monospace;

transition: opacity .3s ease-out

}

/* プレゼンモードのときは非表示にする */

一人で使うのでテロメアは消す

code:style.css

/* telomere */

ナビゲーションバー

code:style.css

選択した文字の背景色

code:style.css

.selection {

}

code:style.css

.line .indent-mark .dot {

margin-top: 2px;

}

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

}

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

}

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

}

https://gyazo.com/32b3bb4c8cd951c248fa2efb1351f242

code:style.css

.strong-image { width: 100%; }

code:style.css

/* */

}

https://gyazo.com/a935c1fb17ba8aadce7304e1f77a6d6a

検索ボックスを右寄せにする

code:style.css

.navbar .row .col-menu { width: unset }

プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動

※次のヘッダー固定と同時に使う必要がある

code:style.css

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

.quick-launch {

position: fixed;

top: 5px;

left: calc((100% - 1080px)/2);

z-index: 990

}

.page { padding-top: 0 } }

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

.quick-launch { left: 80px } }

はりつくメニューバー

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

拡張装飾記法で見出し風にしてみる

code:style.css

.level .deco-\# { }

.level .deco-\#:before {

content: '●';

margin-right: 10px;

}

ページタイトルのフォント設定と罫線

code:style.css

.app:not(.presentation) .line.line-title .text {

line-height: 1.2 !important;

border-bottom: 1px solid rgba(0,0,0,.2);

padding-bottom: 1rem

}

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }

https://gyazo.com/c9e702fd0d14a435de7b11ecf6896889

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

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

code:style.css

display: inline-block; min-width: 3.2em; border-radius: .2em;

これは大事！

吹き出し

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0.3em 0.2em 0.3em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

左吹き出し

code:style.css

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

}

右吹き出し

code:style.css

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

}

赤吹き出し

code:style.css

.deco-\! {

color: 000;

}

.deco-\!:before, .deco-\!:after {

}

吹き出し内のリンク色

code:style.css

.deco-\{ a,

.deco-\} a {

color: ;;

}

code:style.css

min-width: 1em; padding: .1em; vertical-align: text-bottom;

ふせんを貼る

これは太字

ちょっと重要

さらに重要

すんごく重要

code:style.css

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

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

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

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

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

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

@media screen and (max-width: 768px) { .line:not(.cursor-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

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

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

.navbar-brand::before {