ぷーあるちゃ
https://lh3.googleusercontent.com/a/AATXAJxZWA2aGU-fr9Yk6idyzssPYO0v11dDfKO3zpSt=s96-c#.png
this is ぷーあるちゃ’s page
太字 ← 太字はこうなるように設定
code:style.css
.line {
font-size: 120%;
}
.line strong {
}
/* 背景に波模様 */
body {
}
.navbar {
opacity: 0.9;
}
body, .navbar {
background-image:
radial-gradient(circle at 100% 150%, var(--color-B) 24%, var(--color-A) 24%, var(--color-A) 28%, var(--color-B) 28%, var(--color-B) 36%, var(--color-A) 36%, var(--color-A) 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, var(--color-B) 24%, var(--color-A) 24%, var(--color-A) 28%, var(--color-B) 28%, var(--color-B) 36%, var(--color-A) 36%, var(--color-A) 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, var(--color-A) 10%, var(--color-B) 10%, var(--color-B) 23%, var(--color-A) 23%, var(--color-A) 30%, var(--color-B) 30%, var(--color-B) 43%, var(--color-A) 43%, var(--color-A) 50%, var(--color-B) 50%, var(--color-B) 63%, var(--color-A) 63%, var(--color-A) 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, var(--color-A) 5%, var(--color-B) 5%, var(--color-B) 15%, var(--color-A) 15%, var(--color-A) 20%, var(--color-B) 20%, var(--color-B) 29%, var(--color-A) 29%, var(--color-A) 34%, var(--color-B) 34%, var(--color-B) 44%, var(--color-A) 44%, var(--color-A) 49%, transparent 49%, transparent),
radial-gradient(circle at 0 50%,var(--color-A) 5%, var(--color-B) 5%, var(--color-B) 15%, var(--color-A) 15%, var(--color-A) 20%, var(--color-B) 20%, var(--color-B) 29%, var(--color-A) 29%, var(--color-A) 34%, var(--color-B) 34%, var(--color-B) 44%, var(--color-A) 44%, var(--color-A) 49%, transparent 49%, transparent);
background-size: 128px 64px;
}
/* 画像サイズを変更 */
.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; }
スマホ用
:style.css
@media screen and (max-width: 768px) {
/* newボタンの位置を変更する */
.new-button {
position: fixed;
z-index: 1000; /* 最前面に表示 */
bottom: 5vh;
right: 10vw; /* leftにすると左下になる */
width: 50px;
height: 50px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
/* デフォルトの十字マークを非表示にする */
.new-button .horizontal-line,
.new-button .vertical-line {
display: none;
}
/* 十字マークを設定する */
.new-button::after {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
content: ' \f067';
font-weight: 900; /* 必須 */
font-size: 45px;
color: var(--new-button-vertical-color, #fff); /* 中央配置 */
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
}
出典
2024/05/12 表示がうまくいかなくなったので、適用を停止
embed-tweetを埋め込む
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));
}
})
参考