settings
このScrapboxのプロジェクト全体の見え方（css）を調整しているページです。
Italicをグレーにする（印刷しない）　 Italic
code:style.css
i { color: #aaa !important; text-align: right !important; }
@media print {i {display:none;}}
strikeをグレーにする（印刷しない）　strike
code:style.css
strike { color: #aaa !important; }
@media print {
i {display:none;}
}
二重括弧にマーカーを引く
二重括弧[[]]で赤マーカーを引く
code:style.css
/* [ ]<ーこれに赤マーカーを引く */
.line strong:not(class){
color:red;
background:linear-gradient(#ffffff 90%,red 60%)
}
文字の位置揃えをする
センタリング
右寄せ
code:style.css
/* 中央寄せ */
.deco-\< { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
画像を連続して並べて、[& [image]]で囲うと、画像をたくさん並べられます。/arpla/画像を並べる記法より
code:style.css
/* /arpla/画像を並べる記法並べる */
.line:not(.cursor-line) .deco-\& { display: inline-flex }
.line .deco-\& img.image { object-fit: contain; margin: 0 }
https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611https://gyazo.com/5f93e65a3b979ae5333aca4f32600611
水平線画像のリンクを解除する
code:style.css
/* 水平線画像のリンクを解除する */
.line:not(.cursor-line) a.iconhref$="/hr",.line:not(.cursor-line) a.iconhref$="/keisen2" {
pointer-events: none;
vertical-align: -20%;
}
/help-jp/文字装飾記法#59f6c087efa18e0000951507より
deco-{にUserCSSで吹き出しスタイルにする例
/wakaba-manga/第1話：Scrapboxってなあに？でも活用しています
someone.icon 吹き出し
右吹き出しもできる JN1GGZ.icon
!を付けると赤い吹き出しにする、などの組み合わせが可能です
JN1GGZ.icon すごい JN1GGZ.icon
JN1GGZ.icon 見た目は面白い
見た目がキャッチーなだけで、実際の文章の面白さ・情報の価値とは無関係である
心の中を表しているようでいて、文章本体よりも目立っている
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #b2bcba;
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(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #b2bcba transparent;
}
右吹き出しの角
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;
border-color: #b2bcba transparent;
}
強調吹き出しの角
code:style.css
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
color: #66F;
}
もっと簡単な例
重要な部分を赤くする
deco-!をUserCSSで赤くする
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}