temp12 ソースコード

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

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

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

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

</div>

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

（その他の注意点）
・小説機能の基本設定で「目次１ページ内の表示件数」を「500」件にしておいてください。初期設定だと件数が少ないため途中からリストが表示されなくなってしまうので注意。
・上述のタグ入力をせずにページを作成しても問題ありません。特に章で分けずにずらっと話を並べたい場合は、タグ入力せず普通にページを更新してください。
・話のリストを縦並びにしたい場合は各話タイトルの末尾に<br>をつけてください。<br>をつけないと自動で横並びになります。
・もし色を変えたい場合は、「ここだけ変えたらとりあえずOK」な箇所にHEAD内で★印をつけたので参考にしてください。
・背景画像が3種類あるので、お手数ですが全て下記から保存をお願いします。画像はパブリックドメインの写真を加工しています。

　
左からPC用、タブレット用、スマホ用です。
3つとも保存した上で「素材管理」からアップロードして、画像URLを取得してください。（#mtr◯_url#という文字列です）
HEAD内のコードに★印でPC表示などとメモしておきましたので、3箇所それぞれ正しい箇所に画像URLを貼り付けてください。

自動改行「しない」で作成しています。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< 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=Noto+Serif+JP:wght@200;600&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Serif JP', serif;
color: #28374B;
font-size: 12px;
font-weight: 200;
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#) no-repeat center top;/* ★PC表示時の背景画像 */
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #E6EDF4;/* ★全体の背景 */
overflow-x: hidden;
}

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

.flex{
display: flex;
justify-content: space-between;
gap:10%;
text-align: left;
}

.right{
width: 70%;
margin-top: 50px;
}

/* リンク文字 */
a{
color: #043E8B;/* ★リンク文字の色 */
transition: 0.2s;
}

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

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

/* サイトタイトル */
h1{
font-size: 30px;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
width: 20%;
line-height: 1.6em;
}

/* 見出し */
h2{
font-size: 16px;
padding-bottom: 5px;
padding-left: 15px;
border-bottom: 1px solid rgba(21,68,131,0.2);/* ★h2見出しの下側の線の色 */
border-left: 1px solid rgba(21,68,131,0.2);/* ★h2見出しの左側の線の色 */
margin-bottom: 20px;
}

h3{
font-size: 18px;
text-align: center;
}

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

/* 章 */
.chapter a{
padding-right: 10px;
}

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

/* 入力フォームと送信ボタン */
form{
display: flex;
align-items: center;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★名前変換フォームの背景色 */
border-radius: 0;
color: #28374B;/* ★名前変換フォームの文字色 */
border: none;
width: 30em;
height:2.0em;
}

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

input[type="submit"]{
width: auto;
background-color: #043E8B;/* ★ボタンの背景色 */
border: none;
color: #FFF;/* ★ボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
}

input[type="submit"]:hover{
background-color: #FFF;/* ★ボタンホバー時の背景色 */
color: #043E8B;/* ★ボタンホバー時の文字色 */
}

/* 名前変換フォーム */
.dream input{
width: 8em;
margin-right: 10px;
padding: 2px 5px 1px;
line-height: normal;
}

.dream input[type="submit"]{
width: auto;
padding: 0px 10px;
line-height: normal;
}

/* 小説本文 */
.novel{
margin-top: 0;
}

.text{
margin: 70px 0;
}

.page{
text-align: center;
width: 100%;
font-size: 14px;
padding: 0 0 5px;
border-top: 1px solid rgba(21,68,131,0.2);/* ★ページ送りボタンの上側の線 */
border-bottom: 1px solid rgba(21,68,131,0.2);/* ★ページ送りボタンの下側の線 */
}

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

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

/* 1000px以下のデバイスでの見え方 */
@media screen and (max-width: 1000px) {
body:before{
background: url(#mtr■_url#) no-repeat center top;/* ★タブレット表示時の背景画像 */
background-size: cover;
}
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
body:before{
background: url(#mtr■_url#) no-repeat center top;/* ★スマホ表示時の背景画像 */
background-size: cover;
}

.wrap{
padding: 0 35px 40px;
}

main{
margin-top: 55px;
}

.flex{
display: block;
}

.right{
width: 100%;
}

h1{
font-size: 20px;
width: auto;
margin: 0 auto;
}

.dream input{
line-height: normal;
}

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

</style>

全体レイアウト

#novel#

表紙画面レイアウト

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<div class="flex">
<h1>小説のタイトル<br>1,2行程度を推奨</h1>
<div class="right">
<p>ここに説明などが入ります。改行はこのように<br>
brタグを挟むことで行えます。</p>
<br>
<form class="dream" action="/■サイトID/novel/■名前変換機能番号/dream" method="post" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#">
<input type="text" name="DreamID[■名前変換登録番号（2番目に登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#">
<input type="submit" name="set" value="◎"></form>

<main>
#list#
</main>
</div></div>

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

</div>

文章画面レイアウト

<style type="text/css">
body:before{
background: none;
}
</style>

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

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

<div class="page">
#prev_prev_prev#　 　<a href="■表紙画面のURL">top</a>　 　#next_next_next#
</div>

</main>
</div>

source code