settings

このページだけは編集しないでください

https://scrapbox.io/files/60da9e133dca5e0022212900.png

フォント

code:style.css

/* フォント変更のためのimport */

code:style.css

.grid li ,.quick-launch .project-home .title {

font-family: "UD デジタル 教科書体 NK-B", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;

}

.editor, .stream {

font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;

}

更新ボタン作成（右上にstreamが見られる更新ボタンを作成した）

code:style.css

.navbar .navbar-menu>li.stream-btn,

.navbar .navbar-menu>li.stream-btn.hidden-xs

{ display: block !important; }

画像を大きく表示

code:style.css

.line img.image {

max-height: none !important;

max-width: 100% !important;

}

タイトルをナビバーに

code:style.css

@media screen {

.quick-launch .project-home {

position: fixed;

top: -2px;

left: 60px;

z-index: 1000;

}

}

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

.quick-launch .project-home {

left: 75px;

}

}

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

.quick-launch .project-home {

left: 90px;

}

}

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

.quick-launch .project-home {

/* left: calc((100% - 1280px)/2 + 80px); */

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

}

}

.quick-launch .project-home {

--tool-text-color: white;

}

バレット変更

code:style.css

/* バレットを少し薄くする */

.line .indent-mark .dot {

top: 12px;

width: 6px;

height: 4px;

}

/* バレットの色をだんだん薄くする */

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

background-color: rgba(0,0,0,.6)

}

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

background-color: rgba(0,0,0,.5)

}

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

background-color: rgba(0,0,0,.4)

}

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

background-color: rgba(0,0,0,.3)

}

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

background-color: rgba(0,0,0,.2)

}

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

background-color: rgba(0,0,0,.1)

}

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

background-color: rgba(0,0,0,.05)

}

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

background-color: rgba(0,0,0,.05)

}

タグをラベル風に

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

.navbar-brand::before {

content: '';

width: 50px;

height: 44px;

position: absolute;

background-size: cover;

background-position: center;

border-radius: 6px;

}

@media (prefers-color-scheme: dark) {

.navbar-brand::before {

}

}

@media (prefers-color-scheme: light) {

.navbar-brand::before {

}

}

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

@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

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

code:script.js

// ここからアイコンとスタイルの定義

// - アイコンの名前はエンコードしなくてOK、日本語でもOK

// - スタイル部分は content だけ必須、バックスラッシュ2個必要なので注意、あとはお好みで

const tagIconStyles = {

">" : "{ content: '\\f14d'; color: lightgrey }", /* 先送りしたタスク */

"<" : "{ content: '\\f274'; color: lightgrey }", /* 日付を決めたタスク */

"good" : "{ content: '\\f164' }", /* おまけ。下に説明があるよ */

"bad" : "{ content: '\\f165' }",

"good_meal" : "{ content: '\\f087\\f805\\f069'; letter-spacing: .2em }"

};

// ここから下は無視してね ---------------------

(function(m){

let charSelectors = [], afterLinkSelectors = [], iconStyle = ""

const charStyle = "{display:inline-block;width:0;text-indent:-9999px}"

const afterLinkStyle = "{display:inline-block;min-width:1.15em;padding-left:1px;font: 900 110%/normal 'Font Awesome 5 Free';text-align:center}"

const a = "::after", f = " span"

const encode = tag => Array.from(tag).map(c => {

for (var k in m) {

const href = encode(k)

charSelectors.push(linkSelFmt.replace(/#/, href) + f)

afterLinkSelectors.push(linkSelFmt.replace(/#/, href) + a)

}

let style = document.createElement('style')

style.appendChild(document.createTextNode(charSelectors.join(",") + charStyle))

style.appendChild(document.createTextNode(afterLinkSelectors.join(",") + afterLinkStyle))

style.appendChild(document.createTextNode(iconStyle))

document.head.appendChild(style)

})(tagIconStyles)

code:style.css

/* タグアイコンの共通スタイル (1) */

display: inline-block; width: 0; text-indent: -9999px }

/* タグアイコンの共通スタイル (2) */

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal 'Font Awesome 5 Free'; text-align: center }

/* ここから各アイコンの設定 */

code:style.css

.deco-\# {

}

.deco-\! { /* 重要な部分は!を付ける */

font-size: 1.2em; /* 重要なので最初から大きな文字にする */

}

code:style.css

/*ピン留めアイコン*/

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

code:style.css

/*ピン留め改行*/

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

clear: both;

}

code:style.css

/* 吹き出し本体 */

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

font-size: 1em;

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;

}

/* 左吹き出しの角 */

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

}

/* 右吹き出しの角 */

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

}

/* 強調吹き出しの角 */

/* 吹き出し内のリンク色の調整 */