settings
https://gyazo.com/45df7c39c021bc491495b2a221611b01
/icons/-.icon
〈ここからUser Scripts〉
code:style.css
自分用のCSSを書く
自分にだけ有効なCSSを適用できます。
project全体に有効なCSSを書く
settingsというページ(like this page)を作り、コードブロック記法でcode:style.cssというCSSを書きます。 そのプロジェクト内の全員に有効なCSSとなります。
公開プロジェクトの場合、ログインしていないゲストに対しても有効です。
結果を反映するにはブラウザリロードが必要です。
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }
文字に色を付ける
強調記法である [[文字]]もしくは[*** 文字]だけをオレンジにする場合 code:style.css
.line strong {
}
吹き出し []内に { のマークを記述すると右吹き出しになる。}マークを入れると左吹き出しになる。
TSUTOMU TOYAMA.icon 吹き出した
左吹き出しもできる TSUTOMU TOYAMA.icon
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.3em 0.3em 0.3em 0.3em;
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.9em 0.9em;
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.9em 0.9em 0;
border-style: solid;
}
赤吹き出し
code:style.css
.deco-\! {
}
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色
code:style.css
.deco-\{ a,
.deco-\} a {
}
[* ]<-これに蛍光のラインを足す
code:style.css
.level-1{
background: linear-gradient(transparent 60%, rgb(105, 251, 170) 60%);
}
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
1. 校正用のスタイル
削除 [- 削除] ※これはデフォルトの打ち消し線の記法
挿入[+ 挿入] 挿入を意味する記法ってことにしてみた
挿入を取り消し[-+ 挿入を取り消し] こういう表示で意味が通るのか、ちょっとわかんない
例)春は曙あけぼの。ようよう白くなりゆく山ぎは山際、少し明かりて、紫だちたる雲の細くたなびきたる。
code:style.css
/* 挿入 */
.deco-\+ { color: blue }
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: 'イキ'; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
2. 解説を控えめに挿入
コメントっぽい[# コメントっぽい]
例)文章の途中ですが解説という名の補足です。
code:style.css
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
3. 文中に引用を挿入
ねこだいすき[" ねこだいすき]
例)文章の途中ですがここだけ引用です。
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'FontAwesome'; content: '\f10d'; vertical-align: super } トップカラー・背景カラー
code:style.css
.navbar-default {
}
.line .meta.unread {
}
.navbar {
}
.row-flex {
}
行頭のドットスタイル
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
}
文字カウントポップアップ
code:script.js
scrapbox.PopupMenu.addButton({
title: function (text) {
const chars = text.replace(/\r\n/g, '').length const words = text.trim().split(/\r\n\s+/).length return ${chars}c ${words}w
},
onClick: () => null
})
見える文字数カウンター
code:style.css
/* カウンターのスタイル */
cursor: pointer; font: 88%/1 monospace;
opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */
transition: opacity .2s ease-out }
#__charCounter__ { z-index: 300; position: sticky; bottom: 0; text-align: right } /* ポップアップのスタイル */
z-index: 300; position: absolute; bottom: 2em; right: -1em;
border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1); padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace; transition: opacity .3s ease-out }
/* プレゼンモードのときは非表示にする */
明朝体フォント指定
code:style.css
body {
font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝体','YuMincho','游明朝','Yu Mincho',serif;
}
ホームマーク削除・プロジェクトタイトルサイズ
code:style.css
.icon-home { display: none !important; }
.project-home { font-size: 2em !important; }
settings