OLIVE　ソースコード

自動改行しないで作成しています。
リクエスト企画等で使用できる、下記に説明文が書ける小説機能です。アイデアありがとうございました。
素材は自作していますので、下記より保存してください。
タイトルは花鹿さまより。

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

今回は仕様の関係上リストタグ（#list#）を使用していませんので、表紙ページにURLをひとつずつ張り付けるやり方でご使用ください。

HEAD

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Abel&family=Amatic+SC&family=Ms+Madi&family=Rajdhani&display=swap');

@font-face
{
font-family: きろ字 プロポーショナル;
src: url('https://cdn.leafscape.be/kiloji/kiloji_p_web.woff2')
     format("woff2");
}

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

a {
    color: #cd5e3c;
    text-decoration: none;
}

a:hover {
    color: #99ab4e;
}

h1 {
    font-size: 24px;
    font-family: 'Amatic SC', 'IPAex明朝', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    line-height: 150%;
    letter-spacing: 0;
    margin: 0;
    padding: 0 15px 0;
    display: inline-block;
}

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

h3 {
    font-family: 'きろ字 プロポーショナル', 'Abel','STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    font-size: 16px;
    text-align: center;
    color: #cd5e3c;
}

input[type] {
    font-family: 'Abel','STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    font-size: 12px;
    color: #333;
    background: #fbfaf5;
    padding: 2px 3px;
    margin: 5px;
    border: solid 1px #fbfaf5;
    width: 80px;
    line-height: 180%;
    letter-spacing: 2px;
    height: auto;
        -webkit-appearance: none;
    box-shadow: none;
    text-shadow: none;
    text-align: center;
    border-radius: 3px;
}

input[type=submit] {
    width: 30px;
    color: #fbfaf5;
    background: #cd5e3c;
    border: solid 1px #cd5e3c;
    cursor: pointer;
}

.wrp {
    max-width: 600px;
    margin: 50px auto 30px;
    padding: 0;
}

.top{
    max-width: 300px;
    text-align:center;
    margin: 70px auto 30px;
}

.wk {
    width: 200px;
}

.icon {
    width: 50px;
}

.ttl {
    position: relative;
    top: -185px;
    margin:0 auto;
}

.cau {
    margin: -150px auto 30px;
    text-align: left;
}

.main {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    margin: 20px auto;
}

.sec{
    width: 220px;
    border: solid 1px #fbfaf5;
    border-radius: 5px;
    padding: 10px;
    margin: 15px 0;
    background: #fbfaf5;
}

.sec p {
    display: inline-block;
    margin: 0 10px 0 0;
}

.mr {
    border-top: double 3px #e9e4d4;
    margin-top: 6px;
    padding-top: 6px;
    color:#888;
    font-size: 10px;
}

.mr a {
    color: #556b2f;
    margin-left: 15px;
}

.mr a:hover {
    color: #99ab4e;
}

.text {
    color: #333;
    background: #fbfaf5;
    margin: 25px auto;
    padding: 20px;
    font-size:13px;
    line-height: 250%;
    border-radius: 10px;
}

.ato {
    border-top: double 3px #e9e4d4;
    margin-top: 50px;
    padding: 20px 15px 0;
    color: #556b2f;
    font-size: 11px;
}

.ft {
    margin-top:30px;
    text-align:center;
    color: #556b2f;
    font-size: 12px;
}

.ft a {
    margin: 0 10px;
}

</style>

全体レイアウト

表紙画面レイアウト

<div class="top">
<img  class="wk" src="#mtr枠画像番号_url#">
<div class="ttl">
<h1>thank you<br>
for<br>
anniversary.
</h1><br>
<h2>123456hit!</h2>
</div>

<div class="cau">
xxxhitありがとうございました…など説明文。<br>
<br>
<div style="text-align:center"><form action="/ユーザーID/novel/機能番号/dream" method="post">
<input type="text" name="DreamID[1]" value="#名前変換タグ1#">　<input type="text" name="DreamID[2]" value="#名前変換タグ2#">　<input type="submit" name="set" value="ok">
</form></div>
</div>

<div class="sec">
<div class="mds"><p>01.</p><a href="">よだかの星</a></div>
<div class="mr">ここに説明とか</div>
</div>

<div class="sec">
<div class="mds"><p>02.</p><a href="">風鈴草の秘め事</a></div>
<div class="mr">○○さん<a href="">>> Res</a></div>
</div>

<div class="sec">
<div class="mds"><p>03.</p><a href="">翠花の竪琴</a></div>
<div class="mr">ここに説明とか。長文になるとこのように表示されます。一行のほうがスッキリ見えるかもしれません。</div>
</div>

<div class="sec">
<div class="mds"><p>04.</p><a href="">やさしい花びらをください</a></div>
<div class="mr">ここに説明とか</div>
</div>

<div class="sec">
<div class="mds"><p>05.</p><a href="">トリニティの冠 </a></div>
<div class="mr">なにも書かない場合は下記のようになります。</div>
</div>

<div class="sec">
<div class="mds"><p>06.</p><a href="">君のような花になる</a></div>

</div>

</div></div>

文章画面レイアウト

文章下部にあとがき用のスペースを使用する場合、本文の最後の行に、

を入力して使用してください。