temp-15 info | ナノ

info

白ベースのシンプルなテンプレート。画像とアクセントカラー変更で簡単にイメージを変えられます。
色違いはこちら： It girl / 透明

下記セット内容です。
・TOPページ：こちら
・子ページ（このページ）
・mainページ（小説分岐）：こちら

メニュー以外のリンクはこう。強調文はこうなります。

about

サイト名：◯◯◯
管理人：◯◯◯（ memo | bkm )
URL：https://◯◯◯

ご用の方や感想などはこちらからどうぞ。など

source code

ソースコードを下記からコピペして使ってください。自動改行しないで作成しています。詳しいやり方は使い方メモに書いていますので、自信がない方はお役立てください。
おまけのバナーはこちら。
TOP画像はパブリックドメインのものを加工しています：こちら。

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=Shippori+Mincho:wght@400;700&display=swap');

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

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

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

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

a:hover{
filter: blur(1px);
}

/* 強調文 */
strong{
font-weight: 700;
border-bottom: 1px solid #262626;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 325px;
height: 325px;
margin: 0 auto;
position: relative;
}

.mv{
width: 325px;
height: 325px;
object-fit: cover;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}

.bg{
width: 325px;
height: 325px;
top: 0;
left: 0;
right: 0;
margin: auto;
background-color: #FF6A27;/* ★TOP画像の背面の四角の色 */
transform: rotate(3deg);/* ★TOP画像の背面の四角の傾き具合 */
position: absolute;
}

.nav{
display: flex;
justify-content: center;
gap: 12px;
position: absolute;
bottom: 40px;
right: 20px;
transform: rotate(-8deg);/* ★メニューの傾き具合 */
}

.nav li a{
font-size: 14px;
color: #262626;/* ★メニューのリンク文字色 */
padding: 0 4px 1px;
background-color: #FFF;
}

.nav li a:hover{
background-color: transparent;
color: #FF6A27;/* ★メニューのリンクをホバーした時の文字色 */
}

h1{
color: #FF6A27;/* ★TOPページタイトルの文字色 */
font-size: 28px;/* ★TOPページタイトルの文字サイズ */
letter-spacing: 0.1em;
line-height: 1.7em;
font-weight: 400;
bottom: 75px;
left: 20px;
position: absolute;
transform: rotate(-8deg);/* ★TOPページタイトルの傾き具合 */
}

/* 更新履歴 */
.update{
width: fit-content;
text-align: left;
max-width: 100%;
padding: 10px 30px;
margin: 30px auto 0;
background-color: #F2F3F5;/* ★更新履歴の背景色 */
}

/* ランキング */
.rank{
text-align: center;
padding-top: 10px;
}

/* 見出し */
h2{
font-size: 24px;
color: #FF6A27;/* ★見出しの文字色 */
margin-bottom: 20px;
position: relative;
}

h2:before{
content: '';
display: inline-block;
background-color: #FF6A27;/* ★見出しの左側の●の色 */
width: 6px;
height: 6px;
border-radius: 99%;
margin: auto 10px 2px 0;
}

h3{
font-size: 15px;
padding: 0 12px 1px;
background-color: #F2F3F5;/* ★h3見出しの背景色 */
margin: 40px auto 10px 0;
display: inline-block;
}

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

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
padding: 0 0 70px;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★セクションの区切り線の色 */
}

.section+.section{
margin-top: 70px;
}

/* 子ページ */
.child-wrap{
padding-top: 0;
}

/* 入力フォームと送信ボタン */
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: #F2F3F5;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #262626;/* ★入力フォームの文字色 */
border: none;
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: 1px solid rgba(0,0,0,0.3);/* ★入力フォームフォーカス時の枠線の色 */
height: 6.0em;
background: #F2F3F5;/* ★入力フォームフォーカス時の背景色 */
}

textarea{
margin-bottom: 10px;
}

input[type="submit"]{
width: auto;
height: 2.2em;
background-color: #262626;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

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

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

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

/* 小説一覧 */
.long{
width: 100%;
display: flex;
gap: 20px;
}

.long+.long{
margin-top: 20px;
}

.novel-img{
width: 60px;
height: 60px;
object-fit: cover;
}

/* TOPへ戻るボタン */
.back{
display: inline-block;
margin-top: 80px;
color: #FF6A27;/* ★backボタンの文字色 */
background-color: #F2F3F5;/* ★backボタンの背景色 */
padding: 1px 4px;
}

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

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

header,.mv,.bg{
width: 300px;
height: 300px;
}

h1{
font-size: 24px;
}

main{
margin-top: 30px;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
}

input[type="submit"]{
font-size: 12px;
}

_::-webkit-full-page-media, _:future, :root textarea{
margin-bottom: -15px;
}

.dream input{
width: 8em;
}

.code{
margin-bottom: 0;
}
}

</style>

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

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<div class="bg"></div>
<img src="#mtr■TOP画像番号_url#" class="mv">
<h1>ホログラムの記憶</h1>
<ul class="nav">
<li><a href="■">info</a></li>
<li><a href="■">main</a></li>
<li><a href="■">bkm</a></li>
<li><a href="■">re:</a></li>
</ul>
</header>

<div class="rank">
rank: <a href="■">xxx</a> / <a href="■">yyy</a> / <a href="■">zzz</a>
</div>

<p class="update">
0429 - ここに更新履歴など<br>
0429 - ここに更新履歴など
</p>

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

</div>

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

<div class="wrap child-wrap">

<main>
<div class="section">
<h2>info</h2>
<p>ここに本文を入れてください。<br>
メニュー以外のリンクは <a href="■">こう</a>。<strong>強調文はこうなります。</strong></p>

<h3>about</h3>
<p>サイト名：◯◯◯<br>
管理人：◯◯◯（ <a href="■">memo</a> | <a href="■">bkm</a> )<br>
URL：https://◯◯◯<br><br>
ご用の方や感想などはこちらからどうぞ。など</p>
<form action="/■サイトID/form/■メール機能番号/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea>
　<br>
<input type="submit" value="send" accesskey="1" class="send" /></form>
</div>

<div class="section">
<h2>title</h2>
<p>このようにしてセクションを繋げられます。backボタンは↓のように、最後のセクション内の最下部に入れておいてください。</p>
<a class="back" href="■TOPページのURL">back?</a>
</div>
</main>

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

</div>

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

<div class="wrap child-wrap">

<main>
<div class="section">
<h2>main</h2>
<p>このページは小説などの分岐用です。<br>長編、中編は別ページへのリンクを貼るとすっきりして使いやすいです。<br>
短編などでこのページに直接小説を載せる場合は、リストタグを使っていませんので、お手数ですが一話ずつURLを貼り付けてください。</p><br>
<form class="dream" action="/■サイトID/novel/■名前変換機能番号/dream" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><input type="submit" name="set" value="◎"></form>

<h3>long</h3>
<div class="long"><img src="#mtr■画像番号_url#" class="novel-img"><div class="text"><a href="■">長編タイトル</a><br>
<p class="caption">- ここに説明などを入れるとよさそう</p></div></div>
<div class="long"><img src="#mtr■画像番号_url#" class="novel-img"><div class="text"><a href="■">長編タイトル</a><br>
<p class="caption">- ここに説明などを入れるとよさそう</p></div></div>
<br>
<h3>short</h3><br>
<a href="■">短編タイトル</a>（◯△□）<br>
<a href="■">短編タイトル</a>（◯△□）<br>

<a class="back" href="■TOPページURL">back?</a>
</div>
</main>

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

</div>

使い方メモ

下記は使い方のヒントです。読まなくてもできそうな方は無視してください。
・全体レイアウトや◯◯画面レイアウトとはHTMLのことで、簡単に言うと「どんな文字列や画像、リンクを表示させるか」の情報です。文字を書き換えたい時や追加したい時はこちらを編集してください。
・HEAD内とはCSSのことで、色やフォントなどの装飾に関する設定です。見た目を変えない場合は基本触らなくてOKです。
・忘れずに「自動改行しない」設定に変えてください。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）
・見出し＋本文のセットは<div class=“section”>…</div>で囲むと作れます。「class="section"」を消すと表示が崩れるので注意してください。
・改行はbrを文章の後につけてください。このように→<br>
・「■」部分にはすべて正しいURLやIDを入れてください。サイト公開時には■が一つも残っていない状態にする必要があります。
・このテンプレートでは画像を最低でも1つ使用します：TOPの画像です。
・画像の設定のやり方：TOPページの全体レイアウト内に「#mtr■TOP画像番号_url#」という記述があります。#で囲まれた部分を下記手順で取得した画像URLに書き換えてください。
・画像URLの取得方法：あなたのスマホやPCに保存した画像を編集トップ＞素材管理＞素材アップロードから登録すると、画像URLが取得できます。「URLタグ(URLのみに変換)」と書いてある下の#から始まる文字列です。
・その他、mainページの長編タイトル左に画像を使いたい方は、そちらも同じ手順で「mainページ：全体レイアウト」のソースコードに画像URLを貼り付けてください。mainページで画像を使わない方はimgタグを削除すればOKです。（<img...>部分）
・色を変えたい場合は、HEAD内のソースコードに★印をつけておいたので参考にしてください。
・タグの仕様で分からないことがあれば、まずは調べてみてください。Google検索やナノの助け合い掲示板（https://nanos.jp/nanossupport/bbs/2/）や、タグ・デザイン掲示板（https://nanos.jp/nanossupport/page/8/）が役立ちます。
・ソースコードに誤りや不備があった場合は、お手数ですがお知らせいただけると大変助かります。

色違いはHEADを下記に差し替えてください。HEAD以外の全体レイアウト等はどのverでも同じです。

It girl：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=Shippori+Mincho:wght@400;700&display=swap');

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

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

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

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

a:hover{
filter: blur(1px);
}

/* 強調文 */
strong{
font-weight: 700;
border-bottom: 1px solid #FFF;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 325px;
height: 325px;
margin: 0 auto;
position: relative;
}

.mv{
width: 325px;
height: 325px;
object-fit: cover;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}

.bg{
width: 325px;
height: 325px;
top: 0;
left: 0;
right: 0;
margin: auto;
background-color: #FFAFAF;/* ★TOP画像の背面の四角の色 */
transform: rotate(3deg);/* ★TOP画像の背面の四角の傾き具合 */
position: absolute;
}

.nav{
display: flex;
justify-content: center;
gap: 12px;
position: absolute;
bottom: 40px;
right: 20px;
transform: rotate(-8deg);/* ★メニューの傾き具合 */
}

.nav li a{
font-size: 14px;
color: #262626;/* ★メニューのリンク文字色 */
padding: 0 4px 1px;
background-color: #FFF;
}

.nav li a:hover{
background-color: transparent;
color: #FFAFAF;/* ★メニューのリンクをホバーした時の文字色 */
}

h1{
color: #FFF;/* ★TOPページタイトルの文字色 */
font-size: 28px;/* ★TOPページタイトルの文字サイズ */
letter-spacing: 0.1em;
line-height: 1.7em;
font-weight: 400;
bottom: 75px;
left: 20px;
position: absolute;
transform: rotate(-8deg);/* ★TOPページタイトルの傾き具合 */
}

/* 更新履歴 */
.update{
width: fit-content;
text-align: left;
max-width: 100%;
padding: 10px 30px;
margin: 30px auto 0;
background-color: #2E916F;/* ★更新履歴の背景色 */
}

/* ランキング */
.rank{
text-align: center;
padding-top: 10px;
}

/* 見出し */
h2{
font-size: 24px;
color: #FFAFAF;/* ★見出しの文字色 */
margin-bottom: 20px;
position: relative;
}

h2:before{
content: '';
display: inline-block;
background-color: #FFAFAF;/* ★見出しの左側の●の色 */
width: 6px;
height: 6px;
border-radius: 99%;
margin: auto 10px 2px 0;
}

h3{
font-size: 15px;
padding: 0 12px 1px;
background-color: #2E916F;/* ★h3見出しの背景色 */
margin: 40px auto 10px 0;
display: inline-block;
}

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

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
padding: 0 0 70px;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★セクションの区切り線の色 */
}

.section+.section{
margin-top: 70px;
}

/* 子ページ */
.child-wrap{
padding-top: 0;
}

/* 入力フォームと送信ボタン */
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: #227659;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #FFF;/* ★入力フォームの文字色 */
border: none;
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: 1px solid rgba(255,255,255,0.2);/* ★入力フォームフォーカス時の枠線の色 */
height: 6.0em;
background: #227659;/* ★入力フォームフォーカス時の背景色 */
}

textarea{
margin-bottom: 10px;
}

input[type="submit"]{
width: auto;
height: 2.2em;
background-color: #262626;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

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

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

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

/* 小説一覧 */
.long{
width: 100%;
display: flex;
gap: 20px;
}

.long+.long{
margin-top: 20px;
}

.novel-img{
width: 60px;
height: 60px;
object-fit: cover;
}

/* TOPへ戻るボタン */
.back{
display: inline-block;
margin-top: 80px;
color: #FFAFAF;/* ★backボタンの文字色 */
background-color: #227659;/* ★backボタンの背景色 */
padding: 1px 4px;
}

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

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

header,.mv,.bg{
width: 300px;
height: 300px;
}

h1{
font-size: 24px;
}

main{
margin-top: 30px;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
}

input[type="submit"]{
font-size: 12px;
}

_::-webkit-full-page-media, _:future, :root textarea{
margin-bottom: -15px;
}

.dream input{
width: 8em;
}

.code{
margin-bottom: 0;
}
}

</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=Shippori+Mincho:wght@400;700&display=swap');

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

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

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

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

a:hover{
filter: blur(1px);
}

/* 強調文 */
strong{
font-weight: 700;
border-bottom: 1px solid #262626;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 325px;
height: 325px;
margin: 0 auto;
position: relative;
}

.mv{
width: 325px;
height: 325px;
object-fit: cover;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}

.bg{
width: 325px;
height: 325px;
top: 0;
left: 0;
right: 0;
margin: auto;
background-color: #55C2CC;/* ★TOP画像の背面の四角の色 */
transform: rotate(3deg);/* ★TOP画像の背面の四角の傾き具合 */
position: absolute;
}

.nav{
display: flex;
justify-content: center;
gap: 12px;
position: absolute;
bottom: 40px;
right: 20px;
transform: rotate(-8deg);/* ★メニューの傾き具合 */
}

.nav li a{
font-size: 14px;
color: #262626;/* ★メニューのリンク文字色 */
padding: 0 4px 1px;
background-color: #FFF;
}

.nav li a:hover{
background-color: transparent;
color: #55C2CC;/* ★メニューのリンクをホバーした時の文字色 */
}

h1{
color: #00B1C1;/* ★TOPページタイトルの文字色 */
font-size: 28px;/* ★TOPページタイトルの文字サイズ */
letter-spacing: 0.1em;
line-height: 1.7em;
font-weight: 400;
bottom: 75px;
left: 20px;
position: absolute;
transform: rotate(-8deg);/* ★TOPページタイトルの傾き具合 */
}

/* 更新履歴 */
.update{
width: fit-content;
text-align: left;
max-width: 100%;
padding: 10px 30px;
margin: 30px auto 0;
background-color: #FFF;/* ★更新履歴の背景色 */
}

/* ランキング */
.rank{
text-align: center;
padding-top: 10px;
}

/* 見出し */
h2{
font-size: 24px;
color: #55C2CC;/* ★見出しの文字色 */
margin-bottom: 20px;
position: relative;
}

h2:before{
content: '';
display: inline-block;
background-color: #55C2CC;/* ★見出しの左側の●の色 */
width: 6px;
height: 6px;
border-radius: 99%;
margin: auto 10px 2px 0;
}

h3{
font-size: 15px;
padding: 0 12px 1px;
background-color: #FFF;/* ★h3見出しの背景色 */
margin: 40px auto 10px 0;
display: inline-block;
}

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

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
padding: 0 0 70px;
border-bottom: 1px solid rgba(0,0,0,0.15);/* ★セクションの区切り線の色 */
}

.section+.section{
margin-top: 70px;
}

/* 子ページ */
.child-wrap{
padding-top: 0;
}

/* 入力フォームと送信ボタン */
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: #E4F0F2;/* ★入力フォームの背景色 */
padding: 3px 6px;
border-radius: 0;
color: #262626;/* ★入力フォームの文字色 */
border: none;
width: 28em;
height: 6.0em;
margin-top: 10px;
}

input:focus, textarea:focus{
outline: 1px solid rgba(0,0,0,0.3);/* ★入力フォームフォーカス時の枠線の色 */
height: 6.0em;
background: #E4F0F2;/* ★入力フォームフォーカス時の背景色 */
}

textarea{
margin-bottom: 10px;
}

input[type="submit"]{
width: auto;
height: 2.2em;
background-color: #262626;/* ★送信ボタンの背景色 */
color: #FFF;/* ★送信ボタンの文字色 */
padding: 0 15px;
cursor: pointer;
transition: 0.2s;
margin-top: 0;
border: none;
}

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

/* 名前変換フォーム */
.dream{
width: 100%;
text-align: left;
margin: 10px 0 20px;
}

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

/* 小説一覧 */
.long{
width: 100%;
display: flex;
gap: 20px;
}

.long+.long{
margin-top: 20px;
}

.novel-img{
width: 60px;
height: 60px;
object-fit: cover;
}

/* TOPへ戻るボタン */
.back{
display: inline-block;
margin-top: 80px;
color: #55C2CC;/* ★backボタンの文字色 */
background-color: #E4F0F2;/* ★backボタンの背景色 */
padding: 1px 4px;
}

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

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

header,.mv,.bg{
width: 300px;
height: 300px;
}

h1{
font-size: 24px;
}

main{
margin-top: 30px;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],select,textarea{
width: 100%;
}

input[type="submit"]{
font-size: 12px;
}

_::-webkit-full-page-media, _:future, :root textarea{
margin-bottom: -15px;
}

.dream input{
width: 8em;
}

.code{
margin-bottom: 0;
}
}

</style>

back?