settings

UserCSSを書く用のページ

https://gyazo.com/75a24749ce83cf29cf67633b14947d41

背景画像設定

code:style.css

html{

min-height: 100vh;

overflow-y: scroll;

}

body::before{

content: "";

position: fixed;

top: 0;

right: 0;

width: 100%;

height: 100%;

background-image: url("https://gyazo.com/75a24749ce83cf29cf67633b14947d41.png");

background-size: cover;

z-index: -1;

}

*による画像幅変更

code:style.css

.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; }

Twitterリンクうめこみ

code:script.js

scrapbox.PopupMenu.addButton({

title : 'Embed Tweet',

onClick : text => {

const convertContent = (content, indent) => {

const replaced = content

.replace(/<a href="(https?:.*?)">(.*?)<\/a>/g, '$1 $2')

.replace(/<br>/g, \n${indent});

const elem = document.createElement('div');

elem.innerHTML = replaced;

return indent + elem.innerText;

}

const tweetRegex = /(?<spaces>\t *)<blockquote\w"\-= *><p\w"\-= *>(?<content>.*)<\/p>—(?<author>.*)(?<link><a.*>)<\/blockquote>\n\t *<script.*?><\/script>/;

const match = text.match(tweetRegex);

if(!match) return;

const {spaces, content, author, link} = match.groups;

const ind = ${spaces}>;

return text.replace(tweetRegex, convertContent(content, ind) + '\n' + convertContent(\t—${author} ${link}, ind));

}

})

箇条書きを控えめにする

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 }

＃で始まるタグをラベル風にする

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);

}

記事幅指定

code:style.css

div.page{

max-width:800px; /* 800pxにする場合 */

margin-left:auto;

margin-right:auto

}