07.東雲藍さま

>>>小説本文サンプル
長編用とのことだったので、トップにそれぞれのページは表示せずに章へのリンクにしました。Chapter0Xがリンクになります。
また、リンクの下にその章の１ページ目などの文章を3～4行入れてみてください。説明文などでも大丈夫だと思います。

HEAD(CSS)

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

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

body{
margin:0;
padding:0;
font-size:11px;
color:#000;
line-height:2;
letter-spacing:2px;
font-family:'Quicksand',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
background:#eee;
text-align:center;
}

p{
margin:0;
padding:0;
}

.title{
font-family:はんなり明朝;
color:#f1554c;
font-size:40px;
line-height:25px;
margin:40px 20px 60px 20px;
}

.chp{
width:95px;
padding:10px;
background:url(#画像URL#) left bottom no-repeat,#f1554c;
background-size:130px;
font-size:14px;
font-weight:700;
color:#fff;
line-height:1;
text-shadow:0 0 2px #020159;
border-radius:20px;
border:solid 3px #fff;
}

.chp:hover{
text-shadow:none;
color:#f1554c;
background:#020159;
}

.box1,.box2{
max-width:400px;
padding:10px;
color:#666;
text-align:left;
}

.box2{
text-align:right;
}

.list{
max-width:400px;
padding:10px;
margin:30px 0 0;
text-align:left;
}

.text_top{
background:url(#▽の画像URL#) center top no-repeat;
background-size:100px;
max-width:400px;
padding:30px 0 50px 0;
}

.str_title{
color:#f1554c;
font-size:20px;
font-family:はんなり明朝;
line-height:17px;
background:rgba(255,255,255,0.5);
}

.text{
max-width:400px;
margin:20px;
text-align:left;
font-size:13px;
font-family:YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
}

hr{
max-width:400px;
height:0;
background:#020159;
border-style:solid hidden hidden;
border-color:#f1554c;
border-width:1px 0 0;
margin:10px 0;
}

a{
text-decoration:none;
color:#020159;
font-weight:700;
padding:2px 4px;
border-bottom:solid 2px #fff;
}

a:hover{
color:#f1554c;
}
</style>

BODY(HTML)

素材