UserScript:background-image-1

痛モードのテスト用ユーティリティ（その1）

code:script.js

scrapbox.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 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)

}

})

code:script.js

scrapbox.PageMenu.addItem({

title: 'background-image-1x',

onClick: () => {

const image = prompt("url")

//console.log(image)

const result = regex.test(image)

if(result != true) { return }

}

})

code:1style.css

:root {

}

body {

background-image: var( --bg-image);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right top;

background-size: auto 100%;

}

code:style.css

:root {

}

body {

background-image: var( --bg-image);

background-repeat: repeat-y;

background-attachment: scroll;

background-position: center top;

background-size: 100% auto;

}

UserScript.icon