settings

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

このScrapboxのプロジェクト全体の見え方（css）を調整しているページです。

code:style.css

@media print {i {display:none;}}

code:style.css

@media print {

i {display:none;}

}

二重括弧にマーカーを引く

code:style.css

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 }

code:style.css

/* /arpla/画像を並べる記法並べる */

.line:not(.cursor-line) .deco-\& { display: inline-flex }

.line .deco-\& img.image { object-fit: contain; margin: 0 }

水平線画像のリンクを解除する

code:style.css

/* 水平線画像のリンクを解除する */

pointer-events: none;

}

見た目がキャッチーなだけで、実際の文章の面白さ・情報の価値とは無関係である

心の中を表しているようでいて、文章本体よりも目立っている

吹き出し本体

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;

}

左吹き出しの角

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;

}

右吹き出しの角

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;

}

強調吹き出しの角

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;

}