Settings
箇条書きを控えめにする - Scrapboxとあそぶより
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
見出し h1
code:style.css
.deco-\! {
padding: 0.2em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #ABFF4F;/*背景色*/
font-weight: bold;
}
settings - memoooooより
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);
}
関連ページを吹き出し表示（関連ページを吹き出し表示する - daiizより)
code:style.css
#daiiz-rel-cards-bubble {
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
position: absolute;
display: none;
padding: 10px;
box-sizing: content-box;
z-index: 10000;
}
.daiiz-cards {
height: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.daiiz-cards li {
float: none !important;
}
#daiiz-rel-cards-bubble .page-list-item {
display: inline-block;
white-space: normal;
}
code:script.js
var bindEvents=function(b){var c=null;b.on("mouseenter","a.page-link",function(a){a=$(a.target).closest("a.page-link");if(!a.hasClass("empty-page-link")){var d=$getRelCardBubble(b),f=a0.getBoundingClientRect();d.css({"max-width":$(".editor-wrapper")0.offsetWidth-a0.offsetLeft,left:f.left+window.pageXOffset,top:f.top+window.pageYOffset+a0.offsetHeight+3-24,"background-color":$("body").css("background-color")});a=a0.innerText.replace(/^#/gi,"").split("#")0;a.startsWith("/")?d.hide():($cards=
$getRelCards(a),0===$cards.children().length?d.hide():(d.find(".daiiz-cards").remove(),d.append($cards),d.css({height:$("li.relation-label").css("height")}),c=window.setTimeout(function(){d.show()},650)))}});b.on("mouseleave","a.page-link",function(a){window.clearTimeout(c)});b.on("mouseleave","#daiiz-rel-cards-bubble",function(a){a=$getRelCardBubble(b);window.clearTimeout(c);a.hide()});b.on("click",function(){var a=$getRelCardBubble(b);window.clearTimeout(c);a.hide()})},$getRelCardBubble=function(b){var c=
$("#daiiz-rel-cards-bubble");0===c.length&&(c=$('<div id="daiiz-rel-cards-bubble" class="related-page-list"></div>'),b.find(".page").append(c));return c},$getRelCards=function(b){var c=window.encodeURIComponent(window.location.href.match(/scrapbox.io\/(^\/.*)/)1),a=function(a){if(0===a.find("img.lazy-load-img").length){var b=window.encodeURIComponent(a.find("div.title").text());a.find("div.icon").append('<img src="https://scrapbox.io/api/pages/'+c+"/"+b+'/icon" class="lazy-load-img">')}return a};
$(".daiiz-cards").remove();for(var d=$(".relation-label"),f=$('<div class="daiiz-cards grid"></div>'),g=0;g<d.length;g++){var e=$(dg);if(e.find(".title")0.innerText===b){var e=e.next("li.page-list-item"),h=e.clone(!0);f.append(a(h));for(var k=0;1===e.length&&200>k;)e=e.next("li.page-list-item"),h=e.clone(!0),f.append(a(h)),k++}}return f};$(function(){var b=$("#app-container");bindEvents(b)});
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)
}
文字色 - Scrapboxへの要望 より
code:style.css
.deco-\+ {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
写真を並べる
画像を並べて表示 - Scrapboxとあそぶより
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% }