NO TITLE STORY　ソースコード

自動改行しないで作成しています。
タイトルはプラムさまより。

文章ページサンプル。宮沢賢治「よだかの星」より。

リストタグ（#list#）を使用していますが、やり方が少々面倒なので説明をご確認ください。
投稿時にいじるのが面倒な方は表紙ページにURLをひとつずつ張り付けるやり方でも構いません。その場合のソースコードも一応載せています。
HEAD

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin|Noto+Serif+JP');

@font-face
{
font-family: IPAexゴシック;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexg_web.woff2')
     format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
 
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
 
-------------------------------------------------*/

body {
    background: #e6eae3;
    color: #333;
    font-size: 12px;
    font-family: 'Libre Franklin', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    line-height: 200%;
    letter-spacing: 2px;
    margin: 0;
}

a {
    color: #555;
    background: #a6c8b2;
    padding: 2px;
    margin: 0 2px;
    text-decoration: none;
}

a:hover {
    background: #e6eae3;
}

h1, h3 {
    color:#333;
    font-family: 'Libre Franklin',IPAexゴシック, 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 18px;
    margin: 10px auto 30px;
    padding-bottom: 25px;
    width:200px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

h1:before, h3:before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
        -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #555;
    border-radius: 2px;
}

h2 {
    font-family: IPAexゴシック, 'Libre Franklin', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 14px;
    margin: 0 auto 25px;
    padding-left: 15px;
    border-left: solid 8px #d3ccd6;
    position: relative;
}

h2:before {
    position: absolute;
    left: -8px;
    bottom: 0;
    content: '';
    width: 8px;
    height: 50%;
    background-color: #888;
}

h3 {
    font-size: 14px;
}

header {
    margin: 0 auto;
    max-width: 400px;
}

input[type] {
    color: #555;
    background: none;
    padding: 5px;
    margin:0 5px;
    border: 1px solid #ccc;
    width: 60px;
    height: auto;
        -webkit-appearance: none;
    box-shadow: none;
    text-shadow: none;
}

input[type=submit] {
    width: 60px;
    height: auto;
    color: #fff;
    border:1px solid #333;
    background: #333;
    cursor: pointer;
}

.wrp {
    max-width:400px;
    margin:-230px auto 10px;
    text-align: center;
}

.wrp2 {
    max-width:600px;
    margin:-230px auto 10px;
    text-align: center;
}

.hd {
    margin: 0 auto;
    max-width: 600px;
}

.tri{
    width:0;
    border-top: 50px solid #a6c8b2;
    border-right: 50px solid #a6c8b2;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    margin-left: auto;
}

.tri2{
    width: 0;
    height: 0;
    border: 60px solid transparent;
    border-left: 60px solid #d3ccd6;
    position: relative;
    bottom: 100px;
}

.tri3{
    width:0;
    border-top: 60px solid #e4ab9b;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    position: relative;
    bottom: 230px;
    left: 10px;
}

.top {
    margin: 10px 35px 10px;
    padding: 20px 0 30px;
    text-align: left;
    border-bottom: dashed 1px #ccc;
}

.sec {
    margin: 20px 35px 10px;
    padding: 20px 0 20px;
    text-align: left;
    border-bottom: dashed 1px #ccc;
}

.sec a {
     counter-increment: num;
     color: #555;
     background:none;
     display: block;
}

.sec a::before {
     content: counter(num);
     display: inline-block;
     width: 20px;
     height: 20px;
     line-height: 20px;
     text-align: center;
     color: #fff;
     background: #a6c8b2;
     margin-right: 8px;
}

.sec a:nth-child(odd)::before {
     background: #e4ab9b;
}

.text {
    margin: 20px 25px 30px;
    padding-bottom: 20px;
    font-size: 13px;
    line-height: 250%;
    text-align: left;
    border-bottom: dashed 1px #ccc;
}

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

</style>

全体レイアウト

文章画面レイアウト

名前変換画面レイアウト

リストタグ（#list#）を使用する場合
表紙画面レイアウト

章機能を使用していません。
基本設定より目次１ページ辺りの表示件数は500としています。

投稿時の章分け方法は、章はじめ部分の「一覧表示でのタイトルの左」部分に
を入れて、章終わり部分の「一覧表示でのタイトルの右」部分に
を入れて閉じてください。
これで一章部分になります。
わからない場合は下記の１ページずつリンクを張り付ける方をご使用ください。

リストタグ（#list#）を使用しない場合
表紙画面レイアウト

リンク部分を１ページずつざくざく張り付けていってください。