rollin' rollin'ソースコード

source&code

●自動改行は「しない」で製作しています
●独自タグの＃を全角で表記しているのでコピペの際は半角に直してください

head

<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Kumar+One+Outline&display=swap" rel="stylesheet">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
*{margin:0; padding:0;}

header{color:#fff;
margin:0;
padding:20px;
background:rgba(255,255,255,0.8);
fixed;}

h1{font-family: 'Kumar One Outline', cursive;
color:#009e9f;
font-size:36px;
text-align:center;
text-shadow: 1px 2px 3px #8da0b6;  position: relative;}

body{
color:#000; 
background:url(##背景画像のURL##) ;
background-color:#252525;
font-size:12px; letter-spacing:2.4px; line-height:2;
font-family:'Alegreya Sans',"Hiragino Mincho ProN",Meiryo,Osaka,"MS ゴシック", sans-serif;
}

h2 {font-family: 'Black Ops One', cursive;
color:#000; 
 position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
h2:before {
  content: '';
  position: absolute;
  bottom: -10px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #009e9f;
  border-radius: 2px;
}

h3 {
  position: relative;
  padding: 0.25em 0;
}
h3:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(0, 158, 159), transparent);
  background: linear-gradient(to right, rgb(0, 158, 159), transparent);
}

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

main{margin:0 auto; padding-top:50px;
max-width:540px;}

article{margin-bottom:3em; padding-bottom:3em;
}

.con a{padding-bottom:1px; border-bottom:1px solid #ddd;}

.con{padding:50px 15% 70px 15%;
 text-align:justify; background:rgba(255,255,255,0.8);}

.listtitle {
  position: relative;
  width: 300px;
  padding: 15px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.listtitle::before,
.listtitle::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.listtitle::before {
  top: 0;
  left: 0;
  border-top: 1px solid #555;
  border-left: 1px solid #555;
}
.listtitle::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
}

.list a{
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 2.5;
    color: #fff;
    margin-left: 20px;
    margin-bottom: 10px;
    background-color: #009e9f;
}
.list a:hover{
    background-color: #e0de94;
    color: #fff;
}

.listshort{
    text-align: left;
    width: 400px;
    margin: auto;
    margin-top: -8px;
}
.listshort a{
    text-align: left;
    line-height: 2.2;
    padding: 2px 4px 2px 4px;;
    color: #fff;
    background-color: #009e9f;
}
.listshort a:hover{
    background-color: #e0de94;
    color: #fff;
}

em{font-style:normal; text-shadow:0 0 5px #bbb;}

span {color:#cccccc;
font-size:10px;
  border-bottom: dashed 1px #c0c0c0;
}

/* 基本 */
input[type=text],textarea,input[type=submit]{
    font-size:90%;
    /* デフォルト設定をリセット */
    -webkit-appearance: none;
    /* 背景色（全て指定） */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-image: -webkit-linear-gradient(left, #fff, #fff);
    background-color: #fff;
    /* 文字色 */
    color: #000000;
    /* 枠色 */
    border:solid 1px #000000;
    /* 角丸設定など */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    vertical-align:middle; 
    position:relative; 
    top:-1px; 
}
/* テキストエリア */
textarea{
    width: 50%; /* 長さ */
    margin: 4px; /* 余白 */
}
/* 入力フォーム、セレクトフォーム */
input[type=text],select{
    width: 140px; /* 長さ */
    height: 27px;  /* 高さ */
    padding:0 2px; /* 文字余白 */
    text-align: center;
    margin: 4px; /* 余白 */
  background:#fff ;
}
/* セレクトフォーム 補足 */
select{
    font-size:90%;
    /* 角丸 */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    /* 文字色 */
    color: #000000;
    /* 枠色 */
    border:solid 1px #000000;
 
    padding: 0px 0px 0px 8px;
}
/* ボタン */
input[type=submit]{ 
    width: 50px; /* 長さ */ 
    height:27px; /* 高さ */
    padding:0 2px; /* 文字余白 */
  background:url(##ストライプ画像URL##) ;}

</style>

html

/ *全体デザイン*/ 
＃novel＃
/ *表紙*/ 
<header><h1>Rollin' Rollin'</h1>
<center><form action="/サイトID/novel/機能番号/dream" method="post"><input type="hidden" name="id" value="サイトID" /><input type="hidden" name="fp" value="4" /><input type="text" name="DreamID[1]" value="苗字" /> <input type="text" name="DreamID[2]" value="名前" /> <input type="submit" name="dream_name_set" value="変換" /></form>
</center></header>
<main>
<article><div class="con">
<center><h2>Long</h2><br>
<div class="listtitle">
  <p>マジックミラー<br><span>佐々木と田中と山田のはなし・ギャグetc.</span></p>
</div><br>
<div class="list"><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></div>
</center>
</div></article>

<article><div class="con">
<center><h2>Short</h2></center><br>
<br><div class="listshort">
<em>鈴木</em>：<a href="#">流星群に攫われたあの子</a><br>
<em>佐藤</em>：<a href="#">はくちょう座にはまだ着かない</a><br>
<em>田中</em>：<a href="#">セクシィ・ギャラクシィ！</a><br>
<em>佐藤</em>：<a href="#">次の私はきっと上手くやるでしょう</a><br>
<em>鈴木</em>：<a href="#">蠍の火は燃えているか</a><br></div>
</article>

</main>

source&code

head

html

小説本文