2022年8月配布～しかけ～

↓HEAD編集にコピペしてね↓

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body{
 background: url(★背景画像URL★) no-repeat center / cover fixed;
background-color: #000;
color: #fffffc;
font-family: 'Noto Serif JP', serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

a{
text-decoration:none;
color: #999;
}

header{
background: rgba(0,0,0,0.5);
font-family: 'Yuji Boku', serif;
font-size:1.2em;
text-align: center ;
border: double 3px #ccc;
box-shadow: 0 0 0 15px rgba(0,0,0,.5);
padding: 10px;
margin: 50px auto 20px;
width: 320px;
}

h1{
font-family: 'Yuji Boku', serif;
font-size:1.5em;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
margin:20px;}

.red{
color: #cc6666;
}

.kao:before, .kao:after { font-family: 'Font Awesome 5 Free'; font-weight: 400;} 
.kao:before { content: '\f58a'; } 
.kao:after { content: '\f5c8'; }

h2{
font-family: 'Yuji Boku', serif;
font-size:1.5em;
}
h2:first-letter {
  font-size: 2em;
  color: #cc6666;
}
h3{
font-family: 'Yuji Boku', serif;
font-size:1.2em;
}
h3:before { font-family: 'Font Awesome 5 Free'; font-weight: 400; content: '\f186'; margin-right:5px; }

.hanabi{
color: #fddea5;
position: relative;}
.hanabi:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, #fddea5, transparent);
  background: linear-gradient(to right, #fddea5, transparent);
} 
.obake{
color: #a4c3fc;
position: relative;}
.obake:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, #a4c3fc, transparent);
  background: linear-gradient(to right, #a4c3fc, transparent);
}

.waku {
border: double 3px #ccc;
padding: 0.5em;
margin: 0.5em;
}

p{
margin-bottom: 1.5em;}

footer{
text-align: center ;
margin: 50px auto 20px;
}

.main{
width: 95%;
max-width: 600px;
margin: 0 auto 10px;
padding: 10px;
}

.sec{
background: rgba(0,0,0,0.5);
padding: 15px;
margin: 30px auto;
}

input, textarea {
width: 85%;
border: solid 1px #333;
background: #fff;
padding: 2px;
}

button, input[type="button"]{
width: auto;
background: #fff;
border-right: solid 3px #666;
border-bottom: solid 3px #999;
margin: 5px;
padding: 5px;
}
</style>

↓ページ編集にコピペしてね↓

<div class="wrp">
<header>
<h1><span class="red">K</span>imodameshi<br><span class="kao"> <span class="red">a</span>gain </span></h1>
<span>きもだめし みんなでやれば こわくない</span>
</header>
<div class="main">
<div class="sec">
<h2>しかけぺーじ。</h2>
<br>
<p>ボタンクリックで仕掛け(ランダム)が表示されます。<br>スクショorコピペして共有してください。</p>
<h3 class="hanabi">スタート～神社</h3><br>
<div>
仕掛け1回目 <input type="button" value="Click!" onClick="next1()">
<br>
<div id="rndshow1">おや、何かあるようだ</div>

rndhtmlimage1 = new Array();

rndhtmlimage1[0] = '<div class="waku">突然の突風が！</div>';

rndhtmlimage1[1] = '<div class="waku">どこからともなく女性のすすり泣く声が聞こえてくる</div>';

rndhtmlimage1[2] = '<div class="waku">草むらの影から白い服を着た髪の長い女性がこちらを見つめている</div>';

rndhtmlimage1[3] = '<div class="waku">足元にひんやりとした白い霧が立ち込める</div>';

function next1(){
var rndnumber=0;
rndnumber = Math.floor(Math.random()*rndhtmlimage1.length);
document.getElementById("rndshow1").innerHTML = rndhtmlimage1[rndnumber];
}
//html.css ID=rndshow1;
//-->
</script>
</div>
<br><br><br>
<div>
仕掛け2回目 <input type="button" value="Click!!" onClick="next2()">
<br>
<div id="rndshow2">何だか嫌な予感がする……</div>

rndhtmlimage2 = new Array();

rndhtmlimage2[0] = '<div class="waku">ひんやりとしたものが頬を撫でる……よく見るとこんにゃくが仕掛けられていた！</div>';

rndhtmlimage2[1] = '<div class="waku">火の玉が消えたり浮かんだりしている</div>';

rndhtmlimage2[2] = '<div class="waku">がさがさという葉音が聞こえ目の前を黒猫が走り抜けて行った</div>';

rndhtmlimage2[3] = '<div class="waku">どこからともなく視線を感じる……</div>';

function next2(){
var rndnumber=0;
rndnumber = Math.floor(Math.random()*rndhtmlimage2.length);
document.getElementById("rndshow2").innerHTML = rndhtmlimage2[rndnumber];
}
//html.css ID=rndshow2;
//-->
</script>
</div>
<br><br>
<p><h3 class="obake">神社～はなまる荘</h3><br>
<div>
仕掛け3回目 <input type="button" value="Click!!!" onClick="next3()">
<br>
<div id="rndshow3">折り返しだよ！がんばってね！</div>

rndhtmlimage3 = new Array();

rndhtmlimage3[0] = '<div class="waku">古ぼけた日本人形が道の真ん中に置かれている</div>';

rndhtmlimage3[1] = '<div class="waku">どこからともなく「遊ぼう…遊ぼう…」と言う子供の声が聞こえてくる</div>';

rndhtmlimage3[2] = '<div class="waku">どこからともなくぽたぽたと水滴が落ちてきた</div>';

rndhtmlimage3[3] = '<div class="waku">ひびのはいった写真立てが置いてある</div>';

function next3(){
var rndnumber=0;
rndnumber = Math.floor(Math.random()*rndhtmlimage3.length);
document.getElementById("rndshow3").innerHTML = rndhtmlimage3[rndnumber];
}
//html.css ID=rndshow3;
//-->
</script>
</div>
<br><br><br>
<div>
仕掛け4回目 <input type="button" value="Click!!!!" onClick="next4()">
<br>
<div id="rndshow4">はなまる荘が見えてきた！</div>

rndhtmlimage = new Array();

rndhtmlimage[0] = '<div class="waku">ねたがつきたよ</div>';

rndhtmlimage[1] = '<div class="waku">ねたぎれなんだ</div>';

rndhtmlimage[2] = '<div class="waku">ねたー！</div>';

rndhtmlimage[3] = '<div class="waku">ねたをください</div>';

function next4(){
var rndnumber=0;
rndnumber = Math.floor(Math.random()*rndhtmlimage.length);
document.getElementById("rndshow4").innerHTML = rndhtmlimage[rndnumber];
}
//html.css ID=rndshow4;
//-->
</script>
</div>
</div>
</div>

しかけ(ランダム)を増やしたいときは

↑をコピペして足していきます。
★半角数字★の部分に続きの数字を入れてください。

しかけ(ランダム)を減らしたいときは

↑この一列を削除してください。
数字が大きい方から削除したほうがいいと思います。

Kimodameshi
again

↓ここから下は確認用★↓

Kimodameshi
again

しかけぺーじ。

スタート～神社

神社～はなまる荘