settings
引用
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 ;
}
画面上部にタイトル置くやつ
Scrapboxの仕様が変わってアホ使えんくなってるので修正
ひとまず自分のところで使ってるものを流用しますが、多分不都合あると思うので随時修正してくださいnia9865.icon
以前のような見た目に出来るっぽかったのでしました。
自箱で使っていたものも残しておくので、嫌だったら変えてくださいnia9865.icon
navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS
code:style.css
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
scrapboxのトップページへのリンクをnav barに固定するUserCSS
code:style.css
@media screen {
.quick-launch .project-home {
position: fixed;
top: -2px;
left: 60px;
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 75px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 90px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
/* left: calc((100% - 1280px)/2 + 80px); */
left: calc((100% - 1280px)/2 + 100px);
}
}
.quick-launch .project-home {
--tool-text-color: white;
}
code style.css
/* ヘッダーバーのスタイル */
.left-box {
background-color: #c2c3c5;
color: #fff;
text-align: center;
padding-top: 80px;
position: fixed; /* 画面上部に固定 */
top: 0;
left: 0;
width: 100%;
z-index: 990; /* 一番上のレイヤーに配置 */
}
/* タイトルの位置調整 */
.btn.project-home {
position: absolute;
top: 40px;
left: 10%; /* 水平方向の位置 */
}
.dropdown .tool-btn {
margin-top: 30px;
}
コード片・コードブロック
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
/* マトリクス記法 */
.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 }
サムネイル画像の幅を揃える
code:style.css
.grid li.page-list-item a .icon img {
position: absolute;
bottom: 0px;
left: 0px;
height: 60% !important;
object-fit: cover;
}
タグをラベル風にする 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を消す
リストに載ったままだったので、勝手に変えました。まずかったら直してください。nia9865.icon
code:style.css
/* settingを非表示 */
.page-list-itemdata-page-title="settings" {
display: none !important;
}
外部リンクに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;
}
リスト
ちゃんと行の真ん中に来ていなかったので微調整しました。
なにか不具合があれば直してください。nia9865.icon
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: 1px; width: 4px; border-radius: 25%;
background-color: #333333;
display: block;
position: absolute;
right: 7px;
top: 13px;
以下/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%) }
画像の角を丸くして陰をつける
code:style.css
.line img.image {
margin : 0 auto 0.7em;
border-radius: 0.35em;
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.5));
top: 1em;
}
校正用のスタイル
code:style.css
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: ' '; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
ピンを上部に固定
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
アイコンを円形
code:style.css
.icon {
border-radius: 50%;
}