友引くかげろうソースコード

自動改行“しない”で作成しています。
目次タグを使用せず、表紙画面に一つずつリンクを貼る形になっています。ご注意ください。
背景画像はこちらからどうぞ。

HEAD

@import url('https://fonts.googleapis.com/css?family=Cinzel');

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}

body{
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:20px 0;
padding:0;
text-align:center;}

@media screen and (min-width: 601px){
.wrp{
width:450px;
margin:0 auto;}

.txtwrp{
width:600px;
margin:0 auto;}

}

@media screen and (max-width: 600px){
.wrp,txtwrp{
width:100%;
margin:0 auto;}

}

.act1,.act2{
line-height:200%;
padding:0 15px 15px;
border-radius:10px;
border:double 5px #d4dcda;
text-align:center;}

.act1{
margin:30px 50px 30px 20px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);}

.act2{
margin:30px 20px 30px 50px;
transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);}

.text{
line-height:200%;
font-size:13px;
padding:50px 0 15px;
margin:0 20px 20px;
border-radius:20px;
border-top:double 5px #d4dcda;
border-bottom:double 5px #d4dcda;
text-align:left;}

.text p{
background:#efefef;
margin:10px;
padding:10px;
font-size:10px;
}

.text a{
border:none;
color:#000;
margin:5px;}

.text a:hover{
background:none;
border:none;
color:#555;
margin:5px;}

header{
margin:20px;
padding:15px;
text-align:center;}

header a{
display:inline-block;
width:80px;
border:solid 1px #abced8;
padding:5px;
text-align:center;
margin:5px;}

header a:hover{
background:#abced8;
color:#fff;
border:solid 1px #abced8;}

h1{
line-height:100%;
font-weight:normal;
font-family: はんなり明朝, sans-serif;
color:#000;
margin:0 0 20px;
padding:10px 10px 20px;
background:url(##画像URL##);
background-size:200px;
display:inline-block;
text-align:center;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;}

h2{
color:#000;
font-family: はんなり明朝, sans-serif;
line-height:100%;
font-weight:normal;
font-size:15px;
margin:0 5px;
padding:0 5px 5px;
background:url(##画像URL##);
background-size:200px;
position: relative;
bottom:12px;
display:inline-block;
text-align:center;
border-right:solid 4px #fff;
border-left:solid 4px #fff;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;}

h3{
line-height:100%;
font-size:20px;
font-weight:normal;
font-family: はんなり明朝, sans-serif;
color:#000;
margin:0;
padding:5px 20px 10px;
background:url(##画像URL##);
background-size:200px;
border-right:solid 5px #fff;
border-left:solid 5px #fff;
display:inline-block;
text-align:center;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 3px #fff,-1px -1px 3px #fff;
position:relative;
top:20px;
}

a{
color:#555;
text-decoration:none;
padding:0 3px;
border-bottom:solid 2px #efefef;
transition:0.5s;
}

a:hover{
border-bottom:solid 2px #abced8;
}

input[type],textarea{
height:80px;
width:95%;
font-family:"Cinzel","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#d4dcda;
color:#555;
border:solid 1px #d4dcda;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
}

</style>

表紙画面

<div class="wrp">
<header>
<h1>友引くかげろう</h1><br>
<a href="#">name</a> <a href="#">attention</a>
</header>
<div class="act1">
<h2>act01.聖者と妄信</h2><br>
<a href="#">文章画面サンプル</a><br>
<a href="#">わかりあえない君が好き</a><br>
<a href="#">かなしいことばっかり</a><br>
<a href="#">美しくなんて死ねると思うな</a><br>
<a href="#">ふたり怖いものなし</a>
</div>
<div class="act2">
<h2>act02.相対的幸福</h2><br>
<a href="#">君に残された時間</a><br>
<a href="#">世界中君の思い通り</a><br>
<a href="#">なんでもかわいくなる魔法</a><br>
<a href="#">きのう会いたかった</a><br>
<a href="#">千年前の最愛の人</a><br>
</div>
<div class="act1">
<h2>act03.さいきょうの恋人</h2><br>
<a href="#">01</a> / <a href="#">02</a> / <a href="#">03</a> / <a href="#">04</a> / <a href="#">05</a><br>
<a href="#">06</a> / <a href="#">07</a> / <a href="#">08</a> / <a href="#">09</a> / <a href="#">10</a><br>
<a href="#">11</a> / <a href="#">12</a> / <a href="#">13</a> / <a href="#">14</a> / <a href="#">15</a><br>
<a href="#">16</a> / <a href="#">17</a> / <a href="#">18</a> / <a href="#">19</a> / <a href="#">20</a><br>
</div>
<div class="act2">
<h2>act04.あしたの停電</h2><br>
<a href="#">夢心地と夢遊病の違い</a><br>
<a href="#">悪い子のすすめ</a><br>
<a href="#">優しさだけじゃ助からない</a><br>
<a href="#">つらいんだったらやめちゃえば</a><br>
<a href="#">踏みつぶした夜明け</a><br>
</div>
</div>

文章画面