花喰い暗譚ソースコード

自動改行しないで作成しています。
素材は自作しておりますので、下記より保存してください。
タイトルはmoshiさまより。

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

シンプルなデザインになっているので、リンク画像を変えたり色味などを変えると違う雰囲気になると思います。
リストタグ（#list#）を使用していますので、下記の説明をご確認ください。
投稿時にいじるのが面倒な方は表紙ページにURLをひとつずつ張り付けるやり方でも構いません。その場合のソースコードも一応載せています。

HEAD

@charset "UTF-8";

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

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

body {
    background: #fff;
    color: #333;
    font-size: 12px;
    font-family: 'Inconsolata', メイリオ, sans-serif;
    line-height: 200%;
    letter-spacing: 2px;
}

a {
    color: #555;
    background: url("#mtr画像番号_url#");
    text-decoration: none;
}

a:hover, active {
    background: none;
}

h1 {
    font-weight: 200;
    font-family: "IPAex明朝", 'Inconsolata', 'Noto Serif JP';
}

h2 {
    color: #333;
    margin: 30px 0 5px;
    padding: 0;
    font-size: 12px;
    border-bottom: solid 3px #fff;
    position: relative;
}

h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: double 3px #ccc;
    bottom: -3px;
    width: 40%;
}

h3 {
    font-family: "IPAex明朝", 'Inconsolata' ;
    display: inline-block;
    color: #555;
    background: url("#mtr画像番号_url#");
    padding: 2px 15px;
    margin-bottom: 50px;
}

hr {
    background: url("#mtr画像番号_url#");
    border: none;
    height: 3px;
    margin: 10px 0;
}

input[type] {
    font-size: 12px;
    color: #333;
    background: url("#mtr画像番号_url#");
    padding: 2px 8px;
    margin:0 3px;
    border: none;
    width: 60px;
    line-height: 180%;
    letter-spacing: 2px;
    height: auto;
        -webkit-appearance: none;
    box-shadow: none;
    text-shadow: none;
}

input[type=submit] {
    width: 60px;
    color: #777;
    background: #fff;
    border: solid 1px #777;
    border-radius: 3px;
    cursor: pointer;
}

.wrp {
    max-width: 400px;
    margin: 50px auto 20px;
    padding: 0 20px;
}

.wrp a{
    padding: 2px 5px;
    margin: 3px;
}

.wrp p{
    display: inline-block;
    margin: 0 10px;
    padding: 0 10px;
    border-left: double 3px #ccc;
    line-height: 150%;
}

.top {
    margin: 20px 5px 40px;
    padding: 10px;
    background: #f8fbf8;
    border: solid 1px #f3f3f2;
}

.top a {
    background: none;
    border-bottom: solid 1px #ccc;
}

.top a:hover {
    border: none;
}

.pg {
    text-align: right;
}

.pg a {
    padding: 2px 5px;
    margin: 0 5px;
}
</style>

全体レイアウト

文章画面レイアウト

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

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

右側に名前を出す方法は「一覧表示でのタイトルの右」部分に

を入れてください。
小見出しを使用する場合は「一覧表示でのタイトルの左」部分に

を入れてください。

わからない場合は下記の１ページずつリンクを張り付ける方をご使用ください。

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

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