settings
リスト
code:style.css
.line .indent-mark .dot {
top: 10px;
width: 4px;
height: 1px;
background-color: #333333;
}
引用
code:style.css
.line .quote {
font-style: normal ;
padding-left: 0 ;
border-color: #666666 ;
background-color: #F9F9F9 ;
}
.line .quote .c-0 {
visibility: hidden ;
}
.line .quote .c-0 + a:last-child {
float: right ;
margin-right: 1em ;
}
コード片・コードブロック
code:style.css
.page-list-item .description code,
.line code {
background-color: #FFFFFF ;
color: #FFFFFF ;
}
.line span.code-block {
background-color: #EDEDED ; /* 本文背景 */
}
.line span.code-block code {
color: #000000 ; /* 本文文字色 */
}
.line span.code-block .code-block-start {
color: #FFFFFF ;
background-color: #DCDCDC ;
}
.line span.code-block .code-block-start a {
color: #000 ;
}
.hljs-comment, .hljs-quote {
color: #333333 ;
}
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class {
color: #FC3C8F ;
}
.hljs-keyword, .hljs-selector-tag, .hljs-addition {
color: #233AD1 ;
}
.hljs-symbol, .hljs-bullet, .hljs-subst, .hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-link {
color: #e28400 ;
}
.hljs-attribute, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-class .hljs-title, .hljs-type {
color: #F7C70E ;
}
.hljs-number, .hljs-string, .hljs-meta .hljs-meta-string, .hljs-literal, .hljs-doctag, .hljs-regexp {
color: #03B7AB ;
}
メニューバー固定
スクロールしてもメニューバーはそのままだよ
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain }
/* 太字記法と組み合わせて列数を変える */
.line class^="level-" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level-" .deco-\| img.image {
width: 100%; height: 100%; margin: 0; object-fit: cover }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level-" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level-" .deco-\| img.image { margin: .2em }
タグをラベル風にする via /masui/settings
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #0101BC;
font-size: 0.8em;
border: 1px solid #0101BC;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1);
transform: scale(1);
color: #0000FF;
border: 1px solid #0000ff;
}
文字色
test
test
test
test
code:style.css
.deco-\# {
color: #000; /* 黒文字 */
background: linear-gradient(transparent 50%, #ffff66 50%);
}
.deco-\! { /* 重要な部分は!を付けると赤文字に */
color: #ff0000;
}
.deco-\% { /* そこそこ重要な部分は%を付けると青文字に */
color: #0000ff;
}
.deco-\& { /* 自分が面白いと思った部分は&を付けると緑文字に */
color: #1baa24;
}
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
カーソル行ハイライト
code:style.css
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
background-color: rgba(0, 0, 0, .02);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
ルビ記法 こんな感じでルビをふる
code:style.css
.deco-\| {
display: inline-block ;
position: relative ;
}
.deco-\| a{
display: inline-flex ;
position: absolute ;
top: -2em ;
left: 0 ;
right: 0 ;
justify-content: space-around ;
font-size: 0.5em ;
}
.deco-\| a:link,
.deco-\| a:visited {
color: #000 ;
}
Presentation View
code:style.css
htmldata-display-style*="presentation" body {
background-color: #ffffff;
}
.presentation {
color: #000000;
background: #ffffff;
}
.presentation .text.code-block {
background-color: #ffffff;
}
.presentation .code-block-start {
background-color: #ffffff;
}
.app.presentation .line.section-title {
font-size: 60px;
font-weight: normal;
font-family: '游ゴシック','Yu Gothic',san-serif;
text-align: left;
line-height: 180%;
background-color: rgb(255, 255, 255);
}
.app.presentation .line {
font-size: 40px;
font-weight: normal;
font-family: '游ゴシック','Yu Gothic',san-serif;
text-align: left;
line-height: 180%;
background-color: rgb(255, 255, 255);
}
.app.presentation .line .indent-mark .dot {
height: 1px; width: .2em; top: 40px; bottom: 10px;
background-color: rgba(0,0,0,1);
}
リストからsettingsを消す
code:style.css
.grid li.page-list-item > ahref^="/suge-project/settings" {
display: none;
}
外部リンクにiconをつける
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
以下/scrasobox/settingsから
/scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
チェックボックスになるタグ
code:style.css
/* チェックボックスになるタグ */
.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 {
visibility: inherit; display: inherit; position: inherit;
border: inherit; transform: inherit }
チェックボックスになるタグ 2
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./o':not(.icon) span,
.line:not(.cursor-line) ahref='./v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref='./o':not(.icon)::after,
.line:not(.cursor-line) ahref='./v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f14a'; color: #2489C5 }
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }