settings
プロジェクト全体適用CSSの設定
※個人用はsetting/memberにて個別ページを作成し、そのページ内にCSSを記述
行間を広くする
code:style.css
.line {
line-height: 30px;
}
文字に色を付ける
[[太字]]もしくは[*** 大きな文字]をオレンジにする
code:style.css
.line strong {
color: #666;
}
イタリックにマーカーをつける
code:style.css
.line .deco-\/{
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%);
color:#444;
}
見出し（レベル１）にオレンジマーカーをつける
code:style.css
.line strong.level-1 {
background: linear-gradient(transparent 10%, #FAE2E1 25%, #FAE2E1 70%, transparent 90%);
}
見出し（レベル２）の下に枠線をつける
code:style.css
.line strong.level-2 {
border-bottom: 2px solid #ccc;
padding-bottom:1px;
font-size:1.1em;
}
見出し（レベル３）を小見出しにする
code:style.css
.line strong.level-3 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
font-size:1.3em;
}
行頭の中黒を消す
code:style.css
.line .dot {
display: none !important;
}
エディタ内の文字を大きくする
code:style.css
.line {
font-size: 100%;
}
重要な部分を赤く表示する
deco-!をUserCSSで赤くする
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
#で始まるタグをラベル風にする
code:style.css
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
画像に枠線をつける
code:style.css
.image {
border:0.5px solid #ddd;
}
テーブル用CSS
code:style.css
.table-block table {
background-color:transparent;
border-collapse:separate;
border-spacing: 2px;
}
.table-block table tr td:nth-child(odd) {
padding:.1em;
background-color:rgba(0,0,0,0.04);
}
/* 偶数行を濃くする */
.table-block table tr:nth-child(even) td {
background-color:rgba(0,0,0,0.06);
}
/* 1行目だけ太字&中央揃え */
.table-block table tr:first-child td {
font-weight:bolder;
text-align:center;
}
.table-block table tr td:first-child {
padding:0;
background-color:transparent; border-width: 0;
}
参考サイト