temp11 ソースコード

※小説表紙と本文ページを使いたい方への注意事項です。分岐ページだけ使う方は読み飛ばしてOKです。

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

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

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

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

</div>

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

（その他の注意点）
・小説機能の基本設定で「目次１ページ内の表示件数」を「500」件にしておいてください。初期設定だと件数が少ないため途中からリストが表示されなくなってしまうので注意。
・上述のタグ入力をせずにページを作成しても問題ありません。特に章で分けずにずらっと話を並べたい場合は、タグ入力せず普通にページを更新してください。
・話のリストを縦並びにしたい場合は各話タイトルの末尾に<br>をつけてください。<br>をつけないと自動で横並びになります。
・好きな色に変えたいときは、HEAD内を編集していただく必要があります。「ここだけ変えたらとりあえずOK」な箇所に、HEAD内で★印をつけたので参考にしてください。
・イラストは自作です。下記より保存してください。イラストの再配布は禁止です。（テンプレサイト様などが配布物に組み込むのは◎です）
・宝石イラストを単体で使う場合や、テンプレサイト様が配布物に組み込む場合は、mellowのリンクを貼ってください。（例：Material by mellow.）

（5/2 1つ追加）

自動改行「しない」で作成しています。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）

HEAD内（共通） ※5/31修正

<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+Kaku+Gothic+Antique:wght@400;600&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic Antique', sans-serif;
color: #262626;/* ★全体の文字色 */
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
-webkit-appearance: none;
}

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

.wrap{
max-width: 700px;
min-height: 100vh;
position: relative;
padding: 60px 0 0;
overflow: hidden;
margin: 0 auto;
background-color: #FFF;/* ★メインコンテンツの背景色 */
}

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

a:hover{
color: #DED198;/* ★リンクをホバーした時の文字色 */
}

/* 強調文 */
strong{
font-weight: 600;
color: #D82B4C;/* ★強調文の文字色 */
}

/* 分岐ページ見出し */
h1{
font-size: 17px;
letter-spacing: 0.25em;
font-weight: 600;
margin-bottom: -30px;
}

h2{
font-size: 12px;
padding-bottom: 5px;
margin-top: 10px;
}

/* 分岐ページタイトル部分 */
.top{
width: 100%;
text-align: center;
padding: 0 25px;
}

.line{
display: flex;
align-items: center;
justify-content: center;
margin: 50px auto;
}

.line img{
width: 15px;
}

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

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: #F8F8F8;/* ★フォームの背景色 */
border-radius: 0;
color: #262626;/* ★フォームの入力文字色 */
border:1px solid #F8F8F8;
width: 30em;
height:2.0em;
}

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

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

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

.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;
}


/* 分岐ページのメインコンテンツ*/
main{
width: 100%;
text-align: center;
margin: 80px auto 100px;
padding: 0 25px;
}

.novel-list{
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 50px 5%;
justify-content: space-between;
}

.novel-list li{
width: 30%;
}

.novel-list .stone{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background-color: #F8F8F8;/* ★宝石の背景の丸の色 */
transition: 0.3s;
}

.novel-list .stone:hover{
background-color: transparent;
}

.novel-list img{
height: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.novel-list p{
line-height: 1.2em;
}

.novel-list span{
font-size: 10px;
color: gray;
}


/* 小説表紙ページ */
.light{
width: 120px;
display: block;
margin: 0 auto 10px;
}

.stone-l{
width: 120px;
}

.novel-ttl{
font-size: 18px;
margin: 30px auto 10px;
color: #B59C36;
writing-mode: vertical-rl;
}

.text{
padding-bottom: 20px;
}

.chapter{
width: 80%;
margin: 0 auto;
text-align: left;
}

.chapter+.chapter{
margin-top: 40px;
}

.chapter h2{
background: repeating-linear-gradient(135deg, #EFEFEF, #EFEFEF 1px, #fff 1px, #fff 4px);/* ★章タイトルの背景のストライプ */
padding: 6px 20px;
margin-bottom: 15px;
font-weight: 600;
}

/* 小説本文 */
h3{
font-size: 16px;
font-weight: 600;
background: repeating-linear-gradient(135deg, #EFEFEF, #EFEFEF 1px, #fff 1px, #fff 4px);/* ★小説タイトルの背景のストライプ */
padding: 8px 25px;
margin-bottom: 40px;
}

.novel{
text-align: left;
margin-top: 20px;
}

.novel-text{
padding-bottom: 60px;
}

.page{
border-top: 1px #262626 dotted;/* ★ページ送りリンクの上の点線の色 */
padding-top: 40px;
text-align: center;
}

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

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

.top{
padding: 0;
}

main{
margin-top: 60px;
padding: 0;
}

.dream input{
line-height: normal;
}

.novel-list{
gap: 50px 3%;
}

.novel-list li{
width: 46%;
}

.novel-cover{
padding-top: 20px;
}

.novel-cover main{
padding: 0 10px;
}

.light{
width: 80px;
}

.stone-l{
width: 80px;
}

.chapter{
width: 100%;
}
}

</style>

分岐ページ：全体レイアウト

<div class="wrap">

<!-- ↓タイトルから名前変換フォーム部分↓ -->
<div class="top">
<h1>Page Title</h1>
<div class="line"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"></div>
<p>ここに説明があれば入れてください。ここは分岐ページです。</p>
<br>
<form class="dream" action="/■サイトID/novel/■小説機能番号/dream" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br>
<input type="text" name="DreamID[■名前変換登録番号（２番目に登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br>
<input type="submit" name="set" value="OK"></form>
<div class="line"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"></div>
</div>

<!-- ↓メインコンテンツ部分（作品へのリンク一覧）↓ -->
<main>
<ul class="novel-list">
<li><a href="■"><div class="stone"><img src="#mtr■宝石画像番号_url#"></div><h2>作品タイトル</a></h2><p>（傾向や補足）<span><br>ジャンル名など</span></p></li>
<li><a href="■"><div class="stone"><img src="#mtr■宝石画像番号_url#"></div><h2>作品タイトル</a></h2><p>（傾向や補足）<span><br>ジャンル名など</span></p></li>
<li><a href="■"><div class="stone"><img src="#mtr■宝石画像番号_url#"></div><h2>作品タイトル</a></h2><p>（傾向や補足）<span><br>ジャンル名など</span></p></li>
</ul>
</main>

<!-- ↓フッター↓ -->
<footer>
Template by <a href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

小説ページ：全体レイアウト

#novel#

小説ページ：表紙画面レイアウト

<div class="wrap novel-cover">

<div class="top">
<img class="light" src="#mtr■光のイラスト画像番号_url#">
<img class="stone-l" src="#mtr■宝石画像番号_url#">
<h1 class="novel-ttl">タイトルが<br>入ります<br>改行は<br>しても<br>しなくても</h1>
<br>
<p class="text">ここに簡単な説明や注意書きなどを入れられます。<br>
分岐ページに名前変換を置いた場合は、<br>
このページの変換フォームは削除してください。</p>
<br>
<form class="dream" action="#dream_url#" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#">
<input type="text" name="DreamID[■名前変換登録番号（2番目に登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#">
<input type="submit" name="set" value="◎"></form>
<div class="line"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"><img src="#mtr■ダイヤ画像番号_url#"></div>
</div>

<main class="story-list">
#list#
</main>

<footer>
Template by <a href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

小説ページ：文章画面レイアウト

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

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

<div class="page">
#prev_prev_prev# | <a href="■表紙画面URL">back to list</a> | #next_next_next#
</div>

</main>
</div>

source code