//temp19 ソースコード

Source code

::星屑のロンド

・自動改行しないで作成しています。
・TOPの画像サイズをHEAD内ソースコードで調整していますので、画像を他のものに差し替える場合は各自でソースコードを調整してください。
・素材はパブリックドメインのものを加工しています。下記から1つお持ち帰りください。

おまけのバナー

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

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=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

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

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

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 0 auto;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px solid rgba(0,0,0,0.2);/* ★リンク文字の下線の色 */
}

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

/* 強調文 */
strong{
font-weight: 700;
text-decoration: underline;/* ★強調文の文字色と波線 */
decoration-color: #454545;
text-decoration-style: wavy;
}

/* ヘッダーメニュー */
header{
width: 75%;
text-align: center;
margin: 0 auto;
position: relative;
}

header img{
width: 340px;/* ★TOP画像の横幅 */
position: absolute;
top: 0;
left: 0;
}

.top{
text-align: right;
width: 100%;
position: absolute;
top: 50px;
lright: 0;
}

.nav{
width: 100%;
display: flex;
justify-content: end;
gap: 20px;
margin: 20px 0 15px;
}

.nav li a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 0 5px;
line-height: 1.8em;
background-color: #FFF;/* ★メニューのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
}

/* ランキング */
.rank a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 10px;
padding: 0 5px;
background-color: #FFF;/* ★ランキングのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
width: fit-content;
margin-left: 6px;
margin-bottom: 6px;
}

/* 見出し */
h1{
font-size: 28px;
margin-bottom: 10px;
line-height: 1.6em;
}

h2{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 16px;
padding-bottom: 5px;
}

h3{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 30px 0 0;
}

h3:before{
content: '::';
font-size: 11px;
padding-right: 5px;
}

/* メインコンテンツ */
main{
width: 75%;
margin: 0 auto;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 80px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="submit"],textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
outline: none;
color: #454545;/* ★入力フォームの文字色 */
border: 1px solid #D8D8D8;/* ★入力フォームの枠線の色 */
width: 250px;
height: 6.0em;
border-radius: none;
margin-top: 10px;
}

input:focus, textarea:focus{
border: 1px solid #454545;/* ★入力フォームフォーカス時の枠線の色 */
outline: none;
height: 6.0em;
}

input[type="submit"]{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
width: auto;
height: 2.2em;
background-color: #454545;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
outline: none;
border: none;
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
}

input[type="submit"]:hover{
outline: none;
color: #23CAE2;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
display: flex;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
height: 30px;
margin-top: 10px;
}

/* 分岐ページ */
.long+.long{
padding-top: 20px;
}

.long img{
display: block;
border: 1px solid #454545;/* ★長編バナーの枠線の色 */
width: 200px;
height: 40px;
object-fit: cover;
}

.long a{
border-bottom: none;
}

.caption{
font-size: 10px;
line-height: 1.3em;
}

/* フッター */
.footer{
margin: 70px auto 20px;
font-size: 11px;
}

.footer-child{
text-align: center;
}

.back{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
display: inline-block;
margin-bottom: 20px;
}

/* ブログ */
.memo-wrap{
max-width: 500px;
}

.memo-wrap h1{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 20px;
text-align: center;
padding-bottom: 20px;
}

.memo{
padding: 35px 0;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★記事の区切り線 */
}

.more{
text-align: right;
display: inline;
margin-left: 10px;
}

.page{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
text-align: center;
padding-top: 10px;
margin-top: 30px;
color: #A8A8A8;
}

.more a,.page a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
margin-top: 10px;
display: inline-block;
}

.page a{
background-color: transparent;
}

.date{
font-family: 'Special Elite', serif;
font-size: 14px;
}

.memo-back{
font-family: 'Special Elite', serif;
margin-left: 0;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
header,main{
width: 90%;
}

header img{
width: 260px;/* ★スマホ画面でのTOP画像の横幅 */
}

.top{
top: 110px;
}

h1{
font-size: 22px;
}
}
</style>

TOP：全体レイアウト

<div class="wrap">

<header>
<img src="#mtr■画像番号_url#">
<div class="top">
<h1>タイトル<br>1,2行までを推奨</h1>
<ul class="nav">
<li><a href="■">info</a></li>
<li><a href="■">main</a></li>
<li><a href="■">log</a></li>
</ul>
<div class="rank">
<a href="■">xxx</a> <a href="■">yyy</a> <a href="■">zzz</a><br>
<a href="■">search</a> <a href="■">ranking</a> 
</div>

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

</div>
</header>

</div>

子ページ：全体レイアウト

<div class="wrap">

<main>
<div class="section">
<h2>information</h2>
ここに本文を入れてください。見出しと本文のセットは<div class="section">...</div>で囲ってください。<br>
メニュー以外のリンクは<a href="">こんなふう</a>、<strong>強調文はこんなふう。</strong>
<h3>about</h3>
サイト名：◯◯◯<br>
管理人：◯◯◯（ <a href="">twi</a> )<br>
URL：https://◯◯◯<br>
<br>
ご用の方や感想はこちらからどうぞ。など<br>
<form action="/■サイトID/form/■メール機能番号/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea>
　<br>
<input type="submit" value="send" accesskey="1" /></form>
</div>

<div class="section">
<h2>main</h2>
ここに説明など。<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="zzz"></form>
<h3>long</h3>
<div class="long">
<a href=""><img src="#mtr■バナー画像番号_url#">長編タイトル</a>
<p class="caption">ここに補足説明を入れられます。</p>
</div>
<div class="long">
<a href=""><img src="#mtr■バナー画像番号_url#">長編タイトル</a>
<p class="caption">ここに補足説明を入れられます。</p>
</div>

<h3>short</h3>
<a href="">短編タイトル</a>（◯△□）<br>
<a href="">短編タイトル</a>（◯△□）<br>
<a href="">短編タイトル</a>（◯△□）
</div>

<div class="footer footer-child">
<a href="■TOPページURL" class="back">back</a>
<p>Template by <a href="https://nanos.jp/mellow100/">mellow.</a></p>
</div>
</main>

</div>

ブログ：全体レイアウト

<div class="wrap memo-wrap">#blog#</div>

ブログ：一覧画面レイアウト：上部表示テキスト

<h1>Log</h1>

ブログ：一覧画面レイアウト：一覧部分

<div class="memo">
<div class="date">#date# #time#</div>
<div class="text">#text#<div class="more">#ext_more#</div></div>
</div>

ブログ：一覧画面レイアウト：下部表示テキスト

<div class="page">#prev_prevt_prev#   #next_next_next#</div>

<div class="footer footer-child">
<a href="■戻り先URL" class="back">back</a>
<p>Template by <a href="https://nanos.jp/mellow100/">mellow.</a></p>
</div>

ブログ：追記画面レイアウト

<div class="memo">
<div class="date">#date# #time#</div>
<p class="text">#text2#</p><br>
<div class="more memo-back"><a href="■一覧画面URL">back</a></div>
</div>

色違いverはHEADを下記に差し替えてください。全体レイアウトなど、HEAD以外のソースコードは共通です。（※画像はお好みで変更ください）

鹿ver：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=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

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

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

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 0 auto;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px solid rgba(0,0,0,0.2);/* ★リンク文字の下線の色 */
}

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

/* 強調文 */
strong{
font-weight: 700;
text-decoration: underline;/* ★強調文の文字色と波線 */
decoration-color: #454545;
text-decoration-style: wavy;
}

/* ヘッダーメニュー */
header{
width: 75%;
text-align: center;
margin: 0 auto;
position: relative;
}

header img{
width: 210px;/* ★TOP画像の横幅 */
position: absolute;
top: 40px;
left: 0;
}

.top{
text-align: right;
width: 100%;
position: absolute;
top: 50px;
lright: 0;
}

.nav{
width: 100%;
display: flex;
justify-content: end;
gap: 20px;
margin: 20px 0 15px;
}

.nav li a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 0 5px;
line-height: 1.8em;
background-color: #FFF;/* ★メニューのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
}

/* ランキング */
.rank a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 10px;
padding: 0 5px;
background-color: #FFF;/* ★ランキングのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
width: fit-content;
margin-left: 6px;
margin-bottom: 6px;
}

/* 見出し */
h1{
font-size: 28px;
margin-bottom: 10px;
line-height: 1.6em;
}

h2{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 16px;
padding-bottom: 5px;
}

h3{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 30px 0 0;
}

h3:before{
content: '//';
font-size: 11px;
padding-right: 5px;
}

/* メインコンテンツ */
main{
width: 75%;
margin: 0 auto;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 80px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="submit"],textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
outline: none;
color: #454545;/* ★入力フォームの文字色 */
border: 1px solid #D8D8D8;/* ★入力フォームの枠線の色 */
width: 250px;
height: 6.0em;
border-radius: none;
margin-top: 10px;
}

input:focus, textarea:focus{
border: 1px solid #454545;/* ★入力フォームフォーカス時の枠線の色 */
outline: none;
height: 6.0em;
}

input[type="submit"]{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
width: auto;
height: 2.2em;
background-color: #454545;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
outline: none;
border: none;
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
}

input[type="submit"]:hover{
outline: none;
color: #0EC075;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
display: flex;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
height: 30px;
margin-top: 10px;
}

/* 分岐ページ */
.long+.long{
padding-top: 20px;
}

.long img{
display: block;
border: 1px solid #454545;/* ★長編バナーの枠線の色 */
width: 200px;
height: 40px;
object-fit: cover;
}

.long a{
border-bottom: none;
}

.caption{
font-size: 10px;
line-height: 1.3em;
}

/* フッター */
.footer{
margin: 70px auto 20px;
font-size: 11px;
}

.footer-child{
text-align: center;
}

.back{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
display: inline-block;
margin-bottom: 20px;
}

/* ブログ */
.memo-wrap{
max-width: 500px;
}

.memo-wrap h1{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 20px;
text-align: center;
padding-bottom: 20px;
}

.memo{
padding: 35px 0;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★記事の区切り線 */
}

.more{
text-align: right;
display: inline;
margin-left: 10px;
}

.page{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
text-align: center;
padding-top: 10px;
margin-top: 30px;
color: #A8A8A8;
}

.more a,.page a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
margin-top: 10px;
display: inline-block;
}

.page a{
background-color: transparent;
}

.date{
font-family: 'Special Elite', serif;
font-size: 14px;
}

.memo-back{
font-family: 'Special Elite', serif;
margin-left: 0;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
header,main{
width: 90%;
}

header img{
width: 150px;/* ★スマホ画面でのTOP画像の横幅 */
}

h1{
font-size: 22px;
}
}
</style>

女優ver：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=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

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

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

.wrap{
max-width: 700px;
min-height: 100vh;
padding: 40px 25px 0;
margin: 0 auto;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px solid rgba(0,0,0,0.2);/* ★リンク文字の下線の色 */
}

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

/* 強調文 */
strong{
font-weight: 700;
text-decoration: underline;/* ★強調文の文字色と波線 */
decoration-color: #454545;
text-decoration-style: wavy;
}

/* ヘッダーメニュー */
header{
width: 75%;
text-align: center;
margin: 0 auto;
position: relative;
}

header img{
width: 190px;/* ★TOP画像の横幅 */
position: absolute;
top: 40px;
left: 30px;
}

.top{
text-align: right;
width: 100%;
position: absolute;
top: 90px;
lright: 0;
}

.nav{
width: 100%;
display: flex;
justify-content: end;
gap: 20px;
margin: 20px 0 15px;
}

.nav li a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 0 5px;
line-height: 1.8em;
background-color: #FFF;/* ★メニューのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
}

/* ランキング */
.rank a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 10px;
padding: 0 5px;
background-color: #FFF;/* ★ランキングのリンク文字の背景色 */
border-bottom: none;
display: inline-block;
width: fit-content;
margin-left: 6px;
margin-bottom: 6px;
}

/* 見出し */
h1{
font-size: 28px;
margin-bottom: 10px;
line-height: 1.6em;
}

h2{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 16px;
padding-bottom: 5px;
}

h3{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 13px;
padding: 30px 0 0;
}

h3:before{
content: '//';
font-size: 11px;
padding-right: 5px;
}

/* メインコンテンツ */
main{
width: 75%;
margin: 0 auto;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 80px;
}

/* 入力フォームと送信ボタン */
input[type="text"],input[type="submit"],textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
outline: none;
color: #454545;/* ★入力フォームの文字色 */
border: 1px solid #D8D8D8;/* ★入力フォームの枠線の色 */
width: 250px;
height: 6.0em;
border-radius: none;
margin-top: 10px;
}

input:focus, textarea:focus{
border: 1px solid #454545;/* ★入力フォームフォーカス時の枠線の色 */
outline: none;
height: 6.0em;
}

input[type="submit"]{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
width: auto;
height: 2.2em;
background-color: #454545;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
outline: none;
border: none;
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
}

input[type="submit"]:hover{
outline: none;
color: #FC376C;/* ★送信ボタンをホバーした時の文字色 */
}

/* 名前変換フォーム */
.dream{
width: 100%;
display: flex;
}

.dream input{
width: 8em;
font-size: 11px;
height: 30px;
margin-right: 10px;
padding: 1px 5px 2px;
}

.dream input[type="submit"]{
width: auto;
padding: 5px 10px 5px;
height: 30px;
margin-top: 10px;
}

/* 分岐ページ */
.long+.long{
padding-top: 20px;
}

.long img{
display: block;
border: 1px solid #454545;/* ★長編バナーの枠線の色 */
width: 200px;
height: 40px;
object-fit: cover;
}

.long a{
border-bottom: none;
}

.caption{
font-size: 10px;
line-height: 1.3em;
}

/* フッター */
.footer{
margin: 70px auto 20px;
font-size: 11px;
}

.footer-child{
text-align: center;
}

.back{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
display: inline-block;
margin-bottom: 20px;
}

/* ブログ */
.memo-wrap{
max-width: 500px;
}

.memo-wrap h1{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
font-size: 20px;
text-align: center;
padding-bottom: 20px;
}

.memo{
padding: 35px 0;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★記事の区切り線 */
}

.more{
text-align: right;
display: inline;
margin-left: 10px;
}

.page{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
text-align: center;
padding-top: 10px;
margin-top: 30px;
color: #A8A8A8;
}

.more a,.page a{
font-family: 'Special Elite', 'Zen Old Mincho', serif;
padding: 0 5px;
background-color: #FFF;
border-bottom: none;
margin-top: 10px;
display: inline-block;
}

.page a{
background-color: transparent;
}

.date{
font-family: 'Special Elite', serif;
font-size: 14px;
}

.memo-back{
font-family: 'Special Elite', serif;
margin-left: 0;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
header,main{
width: 90%;
}

header img{
width: 140px;/* ★スマホ画面でのTOP画像の横幅 */
left: 0
}

.top{
top: 60px;
}

h1{
font-size: 22px;
}
}
</style>