//temp24 ソースコード

Source code

::恋衣、心化粧
::色違い：赤黒 / 濃紫 / 薄緑

ナノのリスト機能（＃list＃タグ）を使っていますが、章機能は使っていませんので、「章を作る」ではなく「ページを作る」でお話を追加していってください。章機能を使うとレイアウトが正しく表示されないのでご注意ください。
デモページのような章や見出しを作りたい方は、更新の際に下記の手順でおこなってください。（簡単です！）

（1）章の始まり（1話目）の「一覧表示でのタイトルの左」に下記を入力

「★」には章のタイトルを入れてください。デモページだと「章タイトル」がそれです。
章の見出しがいらない場合はh2タグを消せばOKです。その場合は章と章の間の上下余白だけが残ります。

（2）章の終わり（最終話）の「一覧表示でのタイトルの右」に下記を入力

</div>

これで、章のグループが1つできました。
章のグループ内に最新話を追加する場合は、上記のdiv閉じタグを最新話の方に付け替えて、1話前の方のタグは消す必要があるので忘れずに。
*1つの章に1話しかない場合は、（１）と（２）を両方入力してください。

（その他の注意点）
・小説機能の基本設定で「目次１ページ内の表示件数」を「500」件にしておいてください。初期設定だと件数が少ないため途中からリストが表示されなくなってしまうので注意。
・上述のタグ入力をせずにページを作成しても問題ありません。特に章で分けずにずらっと話を並べたい場合は、タグ入力せず普通にページを更新してください。
・話リストを縦並びにしたい場合はタイトル末尾に<br>をつけてください。何も付けないと横並びになります。
・自動改行「しない」で作成してください。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）

素材は自作です。下記から好きなものをお持ち帰りください。

（？）使い方のヒントを見る

HEAD内

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Old Mincho', serif;
color: #532525;/* ★全体の文字色 */
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body:before{
background: url(#mtr■画像番号_url#);/* ★背景画像のURL */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #FFF;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
height: auto;
position: relative;
padding: 40px 70px 0;
overflow: hidden;
margin: 50px auto 30px;
}


/* リンク文字 */
a{
border-bottom: 1px solid #E55873;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
filter: blur(1px);/* ★リンク文字をホバーした時のぼかし具合 */
}

/* 強調文 */
strong{
font-weight: 700;
}

/* サイトタイトル */
h1{
font-size: 30px;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
line-height: 1.6em;
width: fit-content;
margin: 0 auto 50px;
text-align: left;
}

/* 見出し */
h2{
font-size: 17px;
}

h3{
font-size: 14px;
font-weight: 700;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 60px auto 30px;
}

/* 章 */
.chapter{
padding: 25px 30px;
border: 1px solid #532525;
}

.chapter+.chapter{
padding-top: 50px;
}

.chapter a{
margin-right: 10px;
}

/* 名前変換フォーム */
form{
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}

input[type="text"],input[type="reset"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: rgba(255,255,255,0.3);/* ★フォームの背景色 */
border-radius: 0;
color: #532525;/* ★フォームの文字色 */
border: 1px solid #532525;/* ★フォームの枠線の色 */
height:2.0em;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:2.0em;
}

input[type="submit"]{
width: auto;
background-color: #E55873;/* ★OKボタンの背景色 */
border: 1px solid #532525;/* ★OKボタンの枠線の色 */
color: #FFF;/* ★OKボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
line-height: normal;
}

input[type="submit"]:hover{
background-color: #532525;/* ★OKボタンをホバーした時の背景色 */
color: #FFF;
}

/* 小説本文 */
.novel-wrap{
max-width: 800px;
margin-top: 20px;
}

.novel{
background-color: rgba(255,255,255,0.45);/* ★本文の背景 */
padding: 40px;
backdrop-filter: blur(12px);
}

.text{
margin: 30px 0 45px;
}

.text-footer{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.back{
width: 50%;
}

.page{
text-align: center;
width: 100%;
font-size: 14px;
padding-top: 20px;
border-top: 1px solid #532525;/* ★ページ送りボタンの区切り線 */
}

.page a{
font-size: 14px;
}

/* フッター */
footer{
text-align: center;
margin-top: 80px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
padding: 30px;
margin: 0 auto;
}

h1{
font-size: 22px;
width: auto;
margin: 30px auto;
}

.dream input{
line-height: normal;
}

.novel-wrap{
padding: 15px;
}

.novel{
padding: 40px 25px;
}

.text{
margin-top: 20px;
}
}

</style>

全体レイアウト

#novel#

表紙画面レイアウト

<div class="wrap">

<div class="top">
<h1>タイトル、<br>タイトル</h1>
ここに説明文などを入れてください。
<br><br>
<form class="dream" action="#dream_url#" method="post">
<input type="text" name="DreamID[■名前変換登録番号]" value="#設定した独自タグ#">
<input type="text" name="DreamID[■名前変換登録番号]" value="#設定した独自タグ#">
<input type="submit" name="set" value="◎"></form>
</div>

<main>
#list#
</main>

<!-- ↓ここからフッター↓ -->
<footer>
<a href="■戻り先ページのURL">もどる</a><br><br>
Template by <a href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

文章画面レイアウト

<div class="wrap novel-wrap">
<div class="novel">

<h3>#title#</h3>
<p class="text">#text#</p>

<div class="page">
#prev_前へ_前へ#　<a href="■表紙画面のURL">表紙</a>　#next_次へ_次へ#
</div>

</div>
</div>

色違いverはHEADを下記に差し替えてください。全体レイアウトなどその他のコードは共通です。

赤黒：HEAD内

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Old Mincho', serif;
color: #FFF;/* ★全体の文字色 */
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body:before{
background: url(#mtr■画像番号_url#);/* ★背景画像のURL */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #FFF;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
height: auto;
position: relative;
padding: 40px 70px 0;
overflow: hidden;
margin: 50px auto 30px;
}


/* リンク文字 */
a{
border-bottom: 1px solid #D3BA82;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
filter: blur(1px);/* ★リンク文字をホバーした時のぼかし具合 */
}

/* 強調文 */
strong{
font-weight: 700;
}

/* サイトタイトル */
h1{
font-size: 30px;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
line-height: 1.6em;
width: fit-content;
margin: 0 auto 50px;
text-align: left;
}

/* 見出し */
h2{
font-size: 17px;
}

h3{
font-size: 14px;
font-weight: 700;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 60px auto 30px;
}

/* 章 */
.chapter{
padding: 25px 30px;
border: 1px solid #FFF;
}

.chapter+.chapter{
padding-top: 50px;
}

.chapter a{
margin-right: 10px;
}

/* 名前変換フォーム */
form{
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}

input[type="text"],input[type="reset"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: rgba(0,0,0,0.15);/* ★フォームの背景色 */
border-radius: 0;
color: #FFF;/* ★フォームの文字色 */
border: 1px solid #FFF;/* ★フォームの枠線の色 */
height:2.0em;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:2.0em;
}

input[type="submit"]{
width: auto;
background-color: #D3BA82;/* ★OKボタンの背景色 */
border: 1px solid #FFF;/* ★OKボタンの枠線の色 */
color: #4F2F2F;/* ★OKボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
line-height: normal;
}

input[type="submit"]:hover{
background-color: #FFF;/* ★OKボタンをホバーした時の背景色 */
color: #4F2F2F;
}

/* 小説本文 */
.novel-wrap{
max-width: 800px;
margin-top: 20px;
}

.novel{
background-color: rgba(0,0,0,0.15);/* ★本文の背景 */
padding: 40px;
backdrop-filter: blur(12px);
}

.text{
margin: 30px 0 45px;
}

.text-footer{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.back{
width: 50%;
}

.page{
text-align: center;
width: 100%;
font-size: 14px;
padding-top: 20px;
border-top: 1px solid #FFF;/* ★ページ送りボタンの区切り線 */
}

.page a{
font-size: 14px;
}

/* フッター */
footer{
text-align: center;
margin-top: 80px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
padding: 30px;
margin: 0 auto;
}

h1{
font-size: 22px;
width: auto;
margin: 30px auto;
}

.dream input{
line-height: normal;
}

.novel-wrap{
padding: 15px;
}

.novel{
padding: 40px 25px;
}

.text{
margin-top: 20px;
}
}

</style>

濃紫：HEAD内

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Old Mincho', serif;
color: #FFF;/* ★全体の文字色 */
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body:before{
background: url(#mtr■画像番号_url#);/* ★背景画像のURL */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #FFF;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
height: auto;
position: relative;
padding: 40px 70px 0;
overflow: hidden;
margin: 50px auto 30px;
}


/* リンク文字 */
a{
border-bottom: 1px solid #ABB4DB;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
filter: blur(1px);/* ★リンク文字をホバーした時のぼかし具合 */
}

/* 強調文 */
strong{
font-weight: 700;
}

/* サイトタイトル */
h1{
font-size: 30px;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
line-height: 1.6em;
width: fit-content;
margin: 0 auto 50px;
text-align: left;
}

/* 見出し */
h2{
font-size: 17px;
}

h3{
font-size: 14px;
font-weight: 700;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 60px auto 30px;
}

/* 章 */
.chapter{
padding: 25px 30px;
border: 1px solid #FFF;
}

.chapter+.chapter{
padding-top: 50px;
}

.chapter a{
margin-right: 10px;
}

/* 名前変換フォーム */
form{
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}

input[type="text"],input[type="reset"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: rgba(0,0,0,0.25);/* ★フォームの背景色 */
border-radius: 0;
color: #FFF;/* ★フォームの文字色 */
border: 1px solid #FFF;/* ★フォームの枠線の色 */
height:2.0em;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:2.0em;
}

input[type="submit"]{
width: auto;
background-color: #ABB4DB;/* ★OKボタンの背景色 */
border: 1px solid #FFFF;/* ★OKボタンの枠線の色 */
color: #4F2F2F;/* ★OKボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
line-height: normal;
}

input[type="submit"]:hover{
background-color: #FFF;/* ★OKボタンをホバーした時の背景色 */
color: #4F2F2F;
}

/* 小説本文 */
.novel-wrap{
max-width: 800px;
margin-top: 20px;
}

.novel{
background-color: rgba(0,0,0,0.25);/* ★本文の背景 */
padding: 40px;
backdrop-filter: blur(12px);
}

.text{
margin: 30px 0 45px;
}

.text-footer{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.back{
width: 50%;
}

.page{
text-align: center;
width: 100%;
font-size: 14px;
padding-top: 20px;
border-top: 1px solid #FFF;/* ★ページ送りボタンの区切り線 */
}

.page a{
font-size: 14px;
}

/* フッター */
footer{
text-align: center;
margin-top: 80px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
padding: 30px;
margin: 0 auto;
}

h1{
font-size: 22px;
width: auto;
margin: 30px auto;
}

.dream input{
line-height: normal;
}

.novel-wrap{
padding: 15px;
}

.novel{
padding: 40px 25px;
}

.text{
margin-top: 20px;
}
}

</style>

薄緑：HEAD内　　※6/21 修正済み（色番号部分）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Old Mincho', serif;
color: #532525;/* ★全体の文字色 */
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body:before{
background: url(#mtr■画像番号_url#);/* ★背景画像のURL */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #FFF;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
height: auto;
position: relative;
padding: 40px 70px 0;
overflow: hidden;
margin: 50px auto 30px;
}


/* リンク文字 */
a{
border-bottom: 1px solid #ACD32D;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
filter: blur(1px);/* ★リンク文字をホバーした時のぼかし具合 */
}

/* 強調文 */
strong{
font-weight: 700;
}

/* サイトタイトル */
h1{
font-size: 30px;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
line-height: 1.6em;
width: fit-content;
margin: 0 auto 50px;
text-align: left;
}

/* 見出し */
h2{
font-size: 17px;
}

h3{
font-size: 14px;
font-weight: 700;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 60px auto 30px;
}

/* 章 */
.chapter{
padding: 25px 30px;
border: 1px solid #532525;
}

.chapter+.chapter{
padding-top: 50px;
}

.chapter a{
margin-right: 10px;
}

/* 名前変換フォーム */
form{
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}

input[type="text"],input[type="reset"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: rgba(255,255,255,0.3);/* ★フォームの背景色 */
border-radius: 0;
color: #532525;/* ★フォームの文字色 */
border: 1px solid #532525;/* ★フォームの枠線の色 */
height:2.0em;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:2.0em;
}

input[type="submit"]{
width: auto;
background-color: #ACD32D;/* ★OKボタンの背景色 */
border: 1px solid #532525;/* ★OKボタンの枠線の色 */
color: #532525;/* ★OKボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
line-height: normal;
}

input[type="submit"]:hover{
background-color: #532525;/* ★OKボタンをホバーした時の背景色 */
color: #FFF;
}

/* 小説本文 */
.novel-wrap{
max-width: 800px;
margin-top: 20px;
}

.novel{
background-color: rgba(255,255,255,0.4);/* ★本文の背景 */
padding: 40px;
backdrop-filter: blur(12px);
}

.text{
margin: 30px 0 45px;
}

.text-footer{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.back{
width: 50%;
}

.page{
text-align: center;
width: 100%;
font-size: 14px;
padding-top: 20px;
border-top: 1px solid #532525;/* ★ページ送りボタンの区切り線 */
}

.page a{
font-size: 14px;
}

/* フッター */
footer{
text-align: center;
margin-top: 80px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
padding: 30px;
margin: 0 auto;
}

h1{
font-size: 22px;
width: auto;
margin: 30px auto;
}

.dream input{
line-height: normal;
}

.novel-wrap{
padding: 15px;
}

.novel{
padding: 40px 25px;
}

.text{
margin-top: 20px;
}
}

</style>