UserScript:background-image-1
痛モードのテスト用ユーティリティ（その1）
script.jsscrapbox.PageMenu.addItem({
title: 'background-image-1',
onClick: (e) => {
let style = document.getElementById('__itaa__')
if (style)
{
style.remove()
e.currentTarget.innerText = 'background-image-1'
return
}
const image = prompt("url")
console.log(image)
//const regex = /(https?)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)\.(jpg|jpeg|gif|png)/
const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/
const result = regex.test(image);
if(result != true) {
e.currentTarget.innerText = 'background-image-1'
return
} else {
e.currentTarget.innerText ='✅background-image-1'
}
//console.log(result);
const css =
'body {'
+ ' background-image: url("' + image + '");'
+ ' background-repeat: no-repeat;'
+ ' background-attachment: fixed;'
+ ' background-position: right top ;'
+ ' background-size: auto 100%;' // 縦方向を100%にする。
+ '}'
+ '.page {'
+ ' opacity:0.8;'
+ '}'
+ ' .page:hover {'
+ ' opacity:1;'
+ '}'
//console.log(css)
style = document.createElement('style')
style.setAttribute('id', '__itaa__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})script.jsscrapbox.PageMenu.addItem({
title: 'background-image-1x',
onClick: () => {
const image = prompt("url")
//console.log(image)
//const regex = /(https?)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)\.(jpg|jpeg|gif|png)/
const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/
const result = regex.test(image)
if(result != true) { return }
document.documentElement.style.setProperty('--bg-image', `url("${image}")`)
}
})1style.css:root {
--bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png");
}
body {
background-image: var( --bg-image);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-size: auto 100%;
}style.css:root {
--bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png");
}
body {
background-image: var( --bg-image);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
background-size: 100% auto;
}UserScript:background-image-2 -- いい名前を考えないと