共通UserCSS
以下、アピアランス
行頭のドットスタイル
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
}
カーソルを太くする
code:style.css
/* カーソルの幅と色替え */
.cursor { width: 3px; background-color: rgba(0,0,0,.6) }
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
/icons/-.icon
以下、記法関係
文中に引用を挿入
ねこだいすき[" ねこだいすき]
例)文章の途中ですがここだけ引用です。
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
/* [ ]<ーこれに蛍光のラインを引く */
color:#0a0705;
background:linear-gradient(#ffffff 30%,#00ff01 80%)
}
コメントを記入する
141.icon コメント[# [141.icon] コメント]
code:style.css
.deco-\# {
background-color: #ff0; /* 黄背景 */ }
選択した文字列の文字や背景に色を付ける
code:style.css
.deco-\+ {
background-color: #fff; /* 白 */ }
.deco-\% {
background-color: #fcf; /* 薄紫 */ }
.deco-\~ {
background-color: #fff; /* 白 */ }
文字色関係まとめ
[+ 朱色]→朱色
[~ 緑色]→緑色
[# コメント]→コメント
[% コメント2(薄紫)]→コメント2(薄紫)
[! 重要]→重要
強調記法との組み合わせもできるよ
[+** 朱色]→朱色
ハンコ記法
丸で囲む
code:style.css
display: inline-block; border-radius: 50%; border: .05em solid #f40; min-width: 1em; padding: .1em; vertical-align: text-bottom;
line-height: 1; color: #f40; font-weight: 600 } 吹き出し
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
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;
}
左吹き出しの角
[{ 吹き出しですよ}→吹き出しですよ
141.icon吹き出し
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;
}
右吹き出しの角
[} 吹き出しですよ]→吹き出しですよ
吹き出し141.icon
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;
}
強調吹き出しの角
[!{} 吹き出しですよ!]→吹き出しですよ!
いろいろ組み合わせられます 141.icon文字大、強調、吹き出し!
code:style.css
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
}
重要な部分を赤くして白抜きする(単独使用可)
[! 重要]→重要
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
文字の位置揃えをする
センタリング
右寄せ
code:style.css
/* 中央寄せ */
.deco-\< { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }