settings
見出しの色を変更
見出しの色を変更
見出し3
見出し2
code:style.css
.line strong.level-2 .deco-\* {
color:#666666
}
.line strong.level-3 .deco-\* {
color:#333333
}
太字記法と組み合わせて列数を変える
code:style.css
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
ヘッダーのアイコンをScrapboxから変更する
code:style.css
/* ロゴ変更 */
.navbar .navbar-brand img {
display: none;
}
.navbar-brand:before {
content: '';
background-size: contain;
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 0%;
}
.brand-icon{
display:none;
}
quoteを見やすく
this is a quote.
code:pre_style.css
/*span.quote {
padding: 16px;
width: 100%;
display: block;
}
行間が広すぎるからなくした
マーカー
[[ moji ]] と [* moji] を区別して、 [[ moji ]]を マーカー にする
code:style.css
.line strong:not(class) { background: linear-gradient(transparent 55%, #FEFA3A 35%) }
拡張記法
TODO TEST test 灰色
見出し
code:style.css
.deco-\! {
display: inline-block; min-width: 3.2em; padding: .2em .3em; border-radius: .2em;
line-height: 1; vertical-align: unset; text-align: center;
font-size: 90%; font-weight: bold; color: #FFF !important; }
.deco-\" {
display: inline-block; min-width: 3.2em; padding: .2em .3em; border-radius: .2em;
line-height: 1; vertical-align: unset; text-align: center;
font-size: 90%; font-weight: bold; color: #FFF !important; }
.deco-\# {
display: inline-block; min-width: 3.2em; padding: .2em .3em; border-radius: .2em;
line-height: 1; vertical-align: unset; text-align: center;
font-size: 90%; font-weight: bold; color: #FFF !important; }
.deco-\% {
display: inline-block; min-width: 3.2em; padding: .2em .3em; border-radius: .2em;
line-height: 1; vertical-align: unset; text-align: center;
font-size: 90%; font-weight: bold; color: #FFF !important; }
.deco-\( {
width: 100%; font-size: 1.5em; display: inline-block; padding: 0.4em;
border-left: 8px #E5864C solid; border-bottom: 2px #C3C3C3 solid; margin: 0.4em 0; }
箇条書きを控えめにする
こんな感じに - になる
code:style.css
/* 箇条書きを控えめにする */
.line .indent-mark .dot { height: 3px; top: 11px; background-color: #AAAAAA } ＃で始まるタグをラベル風にする
code:style.css
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: rgba(0, 0, 0, 0);
font-size: 0.8em;
border-radius: 3px;
}
}
visibility: hidden;
position: absolute;
}
div.cursor-line a.page-linktype=hashTag > span:first-child { visibility: visible;
position: relative;
}
Tableを見やすく
code:style.css
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td { padding: .1em; background-color: rgba(0,0,0,0.04) }
.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
文字を太くさせる
[* bold text] => bold text
code:style.css
.line strong.level {
font-weight: bolder !important;
}
Strikeを暗めにする
strike
code:style.css
strike {
}
水平線を押せなくする
/icons/hr.icon
/icons/---.icon
/icons/-.icon
code:style.css
pointer-events: none;
}
Stream iconを表示する
code:style.css
.navbar .navbar-menu > li.stream-btn {
display: block;
}
ページリストに表示されるアイコンをカード内に収める
code:style.css
.grid li.page-list-item a .header {
padding-bottom: 0;
margin-bottom: 1%;
overflow: visible;
padding: 7px 5px !important;
height: 35%;
}
.grid li.page-list-item a .icon {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
height: 65%;
}
.grid li.page-list-item a .icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
吹き出し
吹き出し
吹き出し本体
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color:#444444;
background-color:#ffd;
padding: 0.1em 0.2em 0.1em 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(calc(0.8em * -1)) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
/* border-color: #717171 transparent; */ }
画像敷き詰め
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 画像を小さくできるように（強調コマンド）する
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
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
margin-top: 20px; /* 適宜値を調整 */
width: 100%;
}
/*.page-list-item.pin + .page-list-item:not(.pin) {*/
/*clear: both;*/
/*}*/
/* ピン留めされたアイテムのコンテナに対して、下マージンを適用 */
.page-list-item.pin {
margin-bottom: 20px; /* 適宜値を調整 */
}
/* ピン留めされていない全てのアイテムが含まれるコンテナに対して、上マージンを適用 */
.page-list-item:not(.pin) {
margin-top: 20px; /* 適宜値を調整 */
}
code:style.css
/*フォントと背景色*/
body {
font-family: '游ゴシック','Yu Gothic',san-serif;
}
.page {
box-shadow: 0 4px 0 rgba(0,0,0,.16);
}
/* 画面上部のバー色かえ */
.navbar-default {
background-color:rgba(100, 100, 100, 0.23);
backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
min-height:47px;
}
.navbar .row {
margin-top:3px;
}
/* 検索ボックス */
form {
border: 0px ;
}
.search-form .form-group .button-container button .kamon,
.search-form .form-group .button-container button.for-mobile .kamon {
fill:var(--search-form-icon-focus-color, #4a4a4a) }
.search-form .form-group input {
background-color: white;
box-shadow: 1px 1px 4px rgba(0,0,0,0.3), -1px -1px 4px rgba(255,255,255,1);
}
/* グリッドリスト */
.grid li.page-list-item a {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3),-2px -2px 5px rgba(255,255,255,0.8);
border-radius: 7px;
}
/* ページ */
.page {
box-shadow: 1px 3px 4px rgba(0,0,0,0.2);
border-radius:12px;
}
.page-list-item .description img.inline-icon {
height: 100%;
width: 100%
}
/*ページのタイトル部分*/
.grid li.page-list-item a .header {
overflow: visible; /* autoからvisibleに変更 */
height: auto;
min-height: 45%; /* 最小の高さを保持 */
padding-bottom: 1px; /* 下部に余白を追加 */
}
/*ページの画像部分*/
.grid li.page-list-item a .icon {
margin-inline: 0px;
padding: 1px 1px 2px 1px; /* 四方向にパディングを追加 */
}
/* ピン留めページの角が折れている表現を切る */
.grid li.page-list-item a .pin {
display: none;
}
/* ピン留めページのタイトル部分 */
.grid li.page-list-item a .header.pinned {
border-top-width: 0;
}
/* グリッド表示、ページの上の線*/
.grid li.page-list-item a .header {
border-top-width: 12px;
border-color:rgba(0,0,0,0.2);
}
.grid li.page-list-item a .header .title {
color:rgb(10,10,10);
}
/* ピン留めページ */
.page-list-item.grid-style-item.pin{
margin-top:1px;
margin-bottom:35px;
}
/* 上部ナビゲーションバーの”ページ作成”ボタン */
.new-button{
box-shadow: 1px 1px 5px rgba(0,0,0,0.15), -1px -1px 4px rgba(255,255,255,1);
background-color:rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.new-button .vertical-line {
background-color: RGBA(255, 255, 255, 1);
}
.new-button .horizontal-line {
background-color: RGBA(255, 255, 255, 1);
}
/* ページ下のリンク一覧アイコン */
.kamon-link-on::before {
display:none;
margin:0px;
width:0px;
height:0px;
}
.grid li.relation-label a .icon-lg {
width: 0px;
height: 0px;
line-height: 0px;
}
/*リンクアイコンの文字を目立たせる*/
.grid li.relation-label a .title {
font-size:22px;
font-weight:bold;
text-shadow: 2px 2px 10px rgba(255,255,255,0.2) ,
-2px 2px 10px rgba(255,255,255,0.2) ,
2px -2px 10px rgba(255,255,255,0.2) ,
-2px -2px 10px rgba(255,255,255,0.2) ;
overflow:visible;
text-align:left;
margin:10px;
margin-bottom:0px;
display:inline
}
/*引用の表示を改善する Notionを参考にした*/
.line .quote {
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.02));
display: block;
padding-left:7px;
}
/*フォント*/
/*フォントのコンフリクトの原因に心当たりがあったのでそこを修正したうえで昔のものを戻した、問題あれば書き直してほしい*/
font-family: 'Noto Sans JP', sans-serif;
letter-spacing:0.3px;
line-height:2.1em;
}
font-weight: 700;
}
}
.body{font-weight:500;}
.line strong.level {
/*フォント変更時に強調の対応*/
font-weight: bold !important;
}
.line .indent-mark .dot {
/*フォント変更時にインデントのドット位置調整*/
top: 13.3px;
}
.line.line-title {
/*各ページのタイトル部フォントウェイト*/
font-weight: 600;
color: var(--line-title-color, rgba(70,70,70));
}
/*読み込みアニメーション*/
a {
animation: fadeIn 0.8s cubic-bezier(.38,-0.01,.22,.99) 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
/* プレゼンモードのCSS */
.app.presentation .line.section-title .text {
text-align: left;
}
.grid li.ellipsis a .circle {
width: 100px;
height: 60px;
border-radius: 30px;
display: inline-flex
;
justify-content: center;
align-items: center;
}
;){kind=link}
![https://i.gyazo.com/60eea9e5992376dd84c1caeddc747f9d.png");](https://i.gyazo.com/60eea9e5992376dd84c1caeddc747f9d.png");){kind=link}