settings
冒頭メッセ
code:style.css
/* 使用方法 */
/* content の中身を直接書き換えるだけ。 */
/* 改行には 「\A」を使う */
.app .container .quick-launch.layout-list:before {
content: '【告】\A
・朗読はスポーツ\A
・キャス目次と動画と覚書\A
・\A
';
display: block;
background: var(--page-bg, #fff); color: var(--page-text-color, #000); width: 100%;
height: 60px;
overflow: hidden scroll;
white-space: pre-line;
}
画像の外周に影をつけるUserCSS
code:style.css
.deco-\| img{
box-shadow: 0px 0px 10px 0px #000; }
ピン留め
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ピン留め小さく
code:style.css
.grid li.pin {
height: 32px;
width: 10em;
margin-right: 5px !important;
margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
.grid li.pin {
width: 9em;
}
}
.grid li.pin a {
background-color: var(--card-bg) !important;
width: inherit !important;
border-radius: 7px;
height: inherit !important;
margin: none !important;
box-shadow: none !important;
}
.grid li.pin .header {
border-top:none !important;
padding: 6px 5px !important;
}
.grid li.pin .title {
font-size: 12px !important;
color: var(--card-title-color) !important;
max-height: 20px !important;
text-align: center !important;
}
.grid li.pin .content :is(.description,.icon) {display: none !important;}
.page-list-item a .pin {background: none !important;}
グラデ
code:style.css
.navbar {
background: linear-gradient(90deg, rgba(120, 172, 255, 0.7), rgba(97, 114, 232, 0.7) 20% 40%, rgba(129, 107, 255, 0.7) 60%);
}
code:style.css
display: inline-block;
padding: 0.2em 0.4em;
text-decoration: none;
background: aliceblue;/*ボタン色*/
border: 1px solid dodgerblue;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
サムネ
code:style.css
// サムネイル画像
function thumbnail(text) {
const spaceIndex = text.indexOf(' ');
text.slice(spaceIndex + 1, ).replace(']', "");
return text;
// page-name
} else if(text.startsWith('http')) {
return \[${url_head}${text}#.svg ${text}\];
} else {
alert("URLを選択してください。");
}
}
サムネ
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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 } TOPに飛ぶ
code:script.js
import "/api/code/scrasobox/ピンしてるページにジャンプするメニュー/script.js"
タイトルをナビバーに
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
.quick-launch .project-home {
padding: 0 0 0 10px;
}
.quick-launch .project-home .title::after {
content: "";
margin-left: 10px;
padding: 5px 0px 5px 50px;
background-size: contain;
background-repeat: no-repeat;
}
youtube小さく
code:style.css
.iframe-video-player:not(.floating) iframe.youtube {
width: 60%;
max-width: 746.7px;
height: 30vw;
max-height: 420px;
}
.iframe-video-player:not(.floating):hover div.control {
/* ポップアウトボタンのスタイル（適当に書いた） */
bottom: 25px;
right: auto;
left: 86%;
}
赤と緑の強調
code:style.css
.deco-\# {
background-color: #6a6; /* 緑背景 */ }
.deco-\! { /* 重要な部分は!を付ける */
background-color: #e66; /* 赤背景 */ font-size: 1.2em; /* 重要なので最初から大きな文字にする */
}
4色
code:style.css
.deco-\! {
}
.deco-\% {
}
.deco-\# {
}
.deco-\~ {
}
色ボタン
code:script.js
scrapbox.PopupMenu.addButton({
title: '📕',
onClick: text => text.split('\n').map(line => [! ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📙',
onClick: text => text.split('\n').map(line => [% ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📗',
onClick: text => text.split('\n').map(line => [# ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📘',
onClick: text => text.split('\n').map(line => [~ ${line}]).join('\n')
})
![https://daiiz-apps.appspot.com/today/jp.svg");](https://daiiz-apps.appspot.com/today/jp.svg");){kind=link}