綺羅、流星のごとくソースコード

・ナギさん「10話以内の中編小説ページ。雰囲気は、淡いカラー／キラキラした感じ。画像は有無どちらでも。ある場合はワンポイントな小さい画像。」

自動改行“しない”で作成しています。
幅の広いデバイスから見るとタイトル部分が二列になります。また、タイトル横の番号は自動でふられますが、必要ない場合はHEAD内のh2:before{～}部分を削除してください。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
素材画像はこちらからどうぞ。

HEAD

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

@font-face
{
font-family: 戸越明朝;
src: url('https://cdn.leafscape.be/togoshi/togoshi-mincho_web.woff')
     format("woff");
}

body{
font-family:"Marcellus","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:0;
padding:0 0 10px;
counter-reset:number 0;}

body:before,body:after{
background:#dcd3b2;
content:"";
display:block;
position:fixed;}

body:before{
width:5px;
top:0;
bottom:0;
left:0;}

body:after{
width:5px;
top:0;
right:0;
bottom:0;}

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

.wrp2{
margin:0 auto 20px;
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
position:relative;
width:250px;
display:inline-block;
margin:10px auto;}
}

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

.wrp2{margin:0 auto 20px;}

.act{margin:10px 25px;}
}

.wrp2 a,.wrp2 a:hover{
display:block;
margin:0 auto;
padding:0;}

.act{
border:solid 2px #f5f5dc;
padding:10px;}

.act:hover{
transition:0.5s;
border:solid 2px #e597b2;
box-shadow:0 0 3px #e597b2;
opacity:.5;}

.top{
background:url(##画像URL##);
background-size:cover;
width:80px;
height:100px;
border-radius:50%;
border:solid 1px #fff;
box-shadow:0 0 0 2px #765c47;
margin:10px auto 20px;}

.top:before {
content:"";
display:block;
width:80px;
height:100px;
border-radius:50%;
margin:0 auto;
background:rgba(255,255,224,.6);}

.icn{
background:url(##画像URL##);
background-size:30px;
width:10px;
height:10px;
border:solid 1px #fff;
box-shadow:0 0 0 1px #765c47;
margin:20px 5px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
display:inline-block;}

.icn:before {
content:"";
display:block;
width:10px;
height:10px;
margin:0 auto;
background:rgba(255,255,224,.6);}

.box{
margin-left:20px;
color:#888;}

.text{
line-height:200%;
font-size:13px;
padding:30px 0 10px;
margin:20px;
text-align:left;}

.text p{
line-height:150%;
color:#888;
border-top:double 3px #765c47;
border-bottom:double 3px #765c47;
margin:10px;
padding:10px;
font-size:10px;
}

header{
text-align:center;
margin:20px;
padding:30px 0 10px;}

.ft{
text-align:center;
margin:20px auto 10px;}

h1{
font-family:Marcellus,戸越明朝,sans-serif;
line-height:100%;
font-size:18px;
font-weight:normal;
color:#333;
background:rgba(255,255,255,.8);
margin:-75px auto 20px;
padding:10px 20px;
text-align:center;
border-top:solid 1px #333;
border-bottom:solid 1px #333;
display:inline-block;}

h2{
font-family:Marcellus,戸越明朝,sans-serif;
color:#333;
font-weight:normal;
font-size:14px;
margin:0
padding:0;}

h2:before{
counter-increment:number 1;
content:counter(number) ". ";
}

h3{
letter-spacing:3px;
line-height:150%;
font-family:Marcellus,戸越明朝,sans-serif;
font-size:18px;
padding:10px 20px;
text-align:center;}

a{
color:#555;
text-decoration:none;
padding:0 3px;
transition:0.5s;}

a:hover{
color:#e597b2;
text-shadow:0 0 3px #e597b2;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Marcellus","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#333;
border:solid 1px #765c47;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:0;
}

input[type=text]{
border-top:none;
border-right:none;
border-bottom:solid 1px #765c47;
border-left:none;
text-align:center;
margin:5px;
height:24px;
width:60px;}

input[type=submit]{
margin:5px;
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
border:solid 1px #765c47;
background:#fff;
color:#333;
font-weight:normal;
}

</style>

表紙

<div class="bk"></div>
<header>
<div class="top"></div>
<h1>綺羅、流星のごとく</h1>
<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="#名前変換タグ1#" /> <input type="text" name="DreamID[2]" value="#名前変換タグ2#" /> <input type="submit" name="dream_name_set" value="ok" />
</header>
<div class="wrp">
<div class="wrp2">

<div class="act">
<a href="#">
<h2>綺羅、流星のごとく</h2>
<div class="box">
内容。
</div>
</a>
</div>

<div class="act">
<a href="#">
<h2>鮮やかに散れ</h2>
<div class="box">
内容がないよう。
</div>
</a>
</div>

<div class="act">
<a href="#">
<h2>優しさはきみを騙す</h2>
<div class="box">
ここは傾向の表記などご自由に使用してください。
</div></a>
</div>

<div class="act">
<a href="#">
<h2>あなただけのアイドル</h2>
<div class="box">
タイトルだけでも使用いただけます。
</div></a>
</div>

<div class="act">
<a href="#">
<h2>それは鎖なんでしょう</h2>
</a></div>

<div class="act">
<a href="#">
<h2>きみが思い出せない</h2>
</a></div>

<div class="act">
<a href="#">
<h2>前髪を切りすぎちゃった</h2>
<div class="box">
もう髪は伸ばさなくってもいいね
</div></a>
</div>

<div class="act">
<a href="#">
<h2>奈落の天辺</h2>
<div class="box">
明日がくるなんて誰も教えてくれなかったのに
</div></a>
</div>

<div class="act">
<a href="#">
<h2>血を流して生きている</h2>
</a></div>

<div class="act">
<a href="#">
<h2>墜落する星への願い事</h2>
</a></div>

</div>

文章