少女疑獄　ソースコード

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

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

今回は仕様の関係上リストタグ（#list#）を使用していませんので、表紙ページにURLをひとつずつ張り付けるやり方でご使用ください。
リンクタグに横幅を指定していますので、基本的に長いタイトルはお使いいただけないので、その点ご承知おきください。
HEAD

@charset "UTF-8";

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

@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: #eee;
    color: #333;
    font-size: 12px;
    font-family: 'Libre Baskerville', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    line-height: 200%;
    letter-spacing: 2px;
    margin:0;
    padding:0;
}

a,a:hover {
    color: #333;
    text-decoration: none;
    padding:2px 5px;
}

h1 {
    font-size: 16px;
    font-family: 'IPAex明朝', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    line-height: 100%;
    letter-spacing: 0;
    margin: 30px 0 10px;
    padding: 0 0 10px;
}

h2 {
    font-family: 'IPAex明朝', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    color: #a52a2a;
    font-size: 14px;
    line-height: 200%;
    letter-spacing: 0;
    margin: 50px 0 30px;
    padding: 0;
    text-align:center;
}

input[type] {
    font-family: 'IPAex明朝', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    font-size: 12px;
    color: #333;
    background: #fff;
    padding: 3px 5px;
    margin:10px 5px;
    border: solid 1px #bb5535;
    width: 80px;
    line-height: 180%;
    letter-spacing: 2px;
    height: auto;
        -webkit-appearance: none;
    box-shadow: none;
    text-shadow: none;
    text-align: center;
    border-radius: 0;
}

input[type=submit] {
    width: 80px;
    color: #eee;
    background: #333;
    border: solid 1px #333;
    cursor: pointer;
}

.wrp {
    max-width: 600px;
    margin: 70px auto 10px;
    padding: 0;
}

.sq{
    width:151px;
    height:151px;
    margin:60px auto 20px;
    background:#fff;
        -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    overflow:hidden;
    border:solid 2px #c1ab05;
    box-shadow:0 0 0 5px #fff,0 0 0 15px #bb5535;
}

.top{
    position:absolute;
    width:200px;
    height:200px;
    background:transparent;
        -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    text-align:center;
}

.fl {
    text-align: center;
}

.fl img {
    width: 100px;
}

.icon1 {
        -webkit-transform:rotate(-25deg);
        -ms-transform:rotate(-25deg);
    transform:rotate(-25deg);
    position: relative;
    left: 60px;
    bottom: 50px;
}

.icon2 {
    transform: scale(-1, 1);
    position: relative;
    right: 90px;
    bottom: 275px;
}

.sec {
    max-width: 306px;
    position: relative;
    bottom: 70px;
    margin: 0 auto -20px;
}

.sec img {
    width: 50px;
}

.sec a,.ft a,.ft span {
    display: inline-block;
    width: 80px;
    padding: 3px 5px;
    margin: 5px;
    border: solid 1px #ccc;
    text-align: center;
    background: #fff;
}

.sec a:hover,.ft a:hover {
    border: solid 1px #bb5535;
    color: #bb5535;
}

.text {
    color: #000;
    margin: 25px;
    font-size:13px;
    line-height: 250%;
}

.ft {
    text-align:center;
}

.ft a {
    border: solid 1px #bb5535;
    background: #bb5535;
    color: #fff;
}

.ft a:hover {
    background: #fff;
    color:#bb5535;
}

.ch {
    text-align: center;
    margin: 25px;
}

</style>

全体レイアウト

表紙画面レイアウト

文章画面レイアウト

名前変換画面レイアウト