Settings
記法リスト兼設定場所。管理関係者以外編集禁止
ここのCSSをいじると全体に適用されます。適用されていない場合はトップページで更新（F5）してください。
toya.icon 設定ではないですが、「_」を使うとアンダーラインも引けます
toya.icon 「!」「#」「%」「~」で背景色を変えて強調できるようにしました　Ryosuke Tachibana.icon　紫「&」追加
赤背景　緑背景　黄背景　青背景　紫背景
toya.icon 「|」「<」「>」で中央寄せ、左寄せ、右寄せができるようにしました
中央寄せ
左寄せ（デフォルトだから不要か）
右寄せ
toya.icon 文字サイズが小さくて目が疲れそうだったので、少しだけ大きめにしてみます。スマホ版はそのまま
toya.icon トップのピン止めがわかりにくかったので変更
toya.icon チェックボックス _ x を使えるようにしました。ただしクリックしてもチェックされません。手打ちで
code:style.css
/* 青背景で強調 */
.deco-\~ {
color: #fff; /* 白文字 */
background-color: #6ae; /* 青背景 */
}
/* 黄背景で強調 */
.deco-\% {
color: #fff; /* 白文字 */
/* background-color: #ea2; */ /* 黄背景 */
background-color: #e0c448; /* 黄背景 橘改変 */
}
/* 緑背景で強調 */
.deco-\# {
color: #fff; /* 白文字 */
/* background-color: #6a6; */ /* 緑背景 */
background-color: #33b19a; /* 緑背景 橘改変 */
}
/* 赤背景で強調 */
.deco-\! {
color: #fff; /* 白文字 */
background-color: #e66; /* 赤背景 */
}
/* 紫背景で強調 橘追加 */
.deco-\& {
color: #fff; /* 白文字 */
background-color: #a45aff; /* 紫背景 */
}
/* 中央寄せ */
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
/* PC表示ではデフォルトより大きめに表示 */
.line {
font-size: 110%;
line-height: 1.7;
}
/* スマホ表示ではより小さめに表示する */
@media screen and (max-width: 670px) {
.line {
font-size: 100%;
}
.line span.code-block { font-size: 80%; }
body:not(.presentation) .code-block code > span:not(class)::before {
left: -4em;
}
}
/* トップのピン止めをわかりやすく */
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none
}
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'FontAwesome';
font-size: 20px;
color: #A45AFF;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}
/* チェックボックスを使えるように */
.line ahref="./_",
.line ahref="./x" {
visibility: hidden; display: inline-block; position: relative; min-width: 1.15em; line-height: 1
}
.line ahref="./_"::after,
.line ahref="./x"::after {
visibility: visible; position: absolute; left: 0;
content: '\0025A2'; font-weight: bold; color: #08BDBD !important
}
.line ahref="./x" + span { position: relative; vertical-align: text-top; line-height: 1 }
.line ahref="./x" + span::after {
content: ''; visibility: visible; display: inline-block; width: .6em; height: .9em;
position: absolute; left: -0.8em; top: -0.2em;
border-right: .18em solid #2489C5; border-bottom: .18em solid #2489C5; transform: rotate(45deg)
}
.line.cursor-line ahref="./_",
.line.cursor-line ahref="./x" { visibility: visible }
.line.cursor-line ahref="./_"::after,
.line.cursor-line ahref="./x"::after { visibility: hidden }
.line.cursor-line ahref="./x" + span { position: inherit }
.line.cursor-line ahref="./x" + span::after {
content: ''; visibility: inherit; display: inherit; position: inherit;
border: inherit; transform: inherit
}
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }