temp-02 | ナノ

info

ここはXXXの小説サイトです。などの説明書きをここに入れましょう。1ページ完結型のテンプレートです。infoなどの本文はあまり長くしすぎない方が見やすいかもしれません。
メニューを押すとページ内でスクロールします。PCではメニューにカーソルを乗せると左からにゅっと色が切り替わるhoverアニメーションです。

サイト名を日本語にした場合は明朝体が適用されます。

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

サイト名：bitter sweet
管理人：◯◯◯
URL：https://◯◯◯

お問い合わせは下のフォームから。noteでお返事します。

text

リストタグ（#list#）は使用していませんので、小説ページのURLを一話ずつ貼り付けていただく必要があります。

long story

作品タイトル：リンクが横並びの場合

01

02

03

04

05

作品タイトル：リンクが縦並びの場合

このように

1話1話のタイトルが長い場合だと

縦並びがおすすめです

使い分けてね

short story

bkm

リンクフリーに甘えています。（敬称略）

サイト名 | ◯◯◯様
site-name | ◯◯◯様

code

ソースコードを下記からコピペして使ってください。自動改行しないで作成しています。詳しい使い方は全体レイアウト内に書いていますので、自信がない方はお役立てください。

写真・色違いバージョンはこちら：　色違いA / 色違いB / 色違いC / 単色版

画像はパブリックドメインのものを加工していますので、下記から保存してください。おまけのバナーはこちら

全体レイアウト

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>bitter sweet</h1>
<div class="slash"><hr></div>
<ul class="nav">
<li><a href="#01">info</a></li>
<li><a href="#02">text</a></li>
<li><a href="#03">bkm</a></li>
</ul>
</header>

<!-- ↓ここからメインコンテンツ↓ -->
<main>
<div class="section" id="01">
<h2>info</h2>
<p>ここはXXXの小説サイトです。などの説明書きをここに入れましょう。1ページ完結型のテンプレートです。infoなどの本文はあまり長くしすぎない方が見やすいかもしれません。<br>
メニューを押すとページ内でスクロールします。PCではメニューにカーソルを乗せると左からにゅっと色が切り替わるhoverアニメーションです。<br><br>
サイト名を日本語にした場合は明朝体が適用されます。<br>
<br>
メニュー以外のリンクは<a href="■">こんなふう</a>。
<strong>強調文はこんなふうになります。</strong></p>
<p>サイト名：bitter sweet<br>
管理人：◯◯◯<br>
URL：https://◯◯◯<br><br>
お問い合わせは下のフォームから。<a href="■">note</a>でお返事します。</p><br>
<form class="message-set" action="/■サイトID/form/■メール機能番号/posted" method="post">
<div><textarea class="message" cols="30" rows="1" name="Item[2]"></textarea>	</div><br>
<div class="button"><input type="submit" value="送信" accesskey="1"></div>
</form>
</div>

<div class="section" id="02">
<h2>text</h2>
<div class="group">
<h3>long story</h3>
<h4>作品タイトル：リンクが横並びの場合<h4>
<ul class="story yoko">
<li><a href="■">01</a></li>
<li><a href="■">02</a></li>
<li><a href="■">03</a></li>
<li><a href="■">04</a></li>
<li><a href="■">05</a></li>
</ul>
<br>
<h4>作品タイトル：リンクが縦並びの場合<h4>
<ul class="story tate">
<li><a href="■">このように</a></li>
<li><a href="■">1話1話のタイトルが長い場合だと</a></li>
<li><a href="■">縦並びがおすすめです</a></li>
<li><a href="■">使い分けてね</a></li>
</ul>
</div>
<div class="group">
<h3>short story</h3>
<ul class="story tate">
<li><a href="■">息もつけない</a>（補足など）</li>
<li><a href="■">Shall we dance?</a></li>
<li><a href="■">友達じゃないって言って</a></li>
<li><a href="■">透明</a></li>
<li><a href="■">bitter sweet</a></li>
</ul>
</div>
</div>

<div class="section" id="03">
<h2>bkm</h2>
<p>リンクフリーに甘えています。（敬称略）</p>
<ul class="tate"><li><a href="■">サイト名</a> | ◯◯◯様</li>
<li><a href="■">site-name</a> | ◯◯◯様</li></ul><br><br>
<p>
・下記は使い方の説明です。読まなくてもできそうな方は無視してください。<br>
・全体レイアウトとはHTMLのことで、簡単に言うと「どんな文字列や画像、リンクを表示させるか」の情報です。文字を書き換えたい時や追加したい時はこちらを編集してください。<br>
・HEAD内とはCSSのことで、色やフォントなどの装飾に関する設定です。見た目を変えない場合は基本触らなくてOKです。<br>
・忘れずに「自動改行しない」設定に変えてください。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）<br>
・見出し＋本文のセットはこのようにdivで囲むと作れます。「class="section"」を消すと表示が崩れるので、このままコピペして使ってください。<br>
・改行はbrを文章の後につけてください。このように→<br>
・リンクは<a href="■">このように囲みます</a>。強調太字は<strong>このように囲みます</strong>。<br>
・見出しはレベル（強調したい度合い）によってh2からh4までありますので必要に応じて使い分けてください。h1はサイトタイトルです。<br>
・「■」部分には正しいURLやIDを入れてください。<br>
・画像について、このままでは表示されないため各自でナノに登録いただく必要があります。<br>
・このテンプレートで登録が必要な画像は背景画像のみです。<br>
・あなたのスマホやPCに保存した画像を編集トップ＞素材管理＞素材アップロードから登録すると、画像URLが取得できます。「URLタグ(URLのみに変換)」と書いてある下の#から始まる文字列です。<br>
・背景画像の設定のやり方：HEAD内の「background: url(#mtr■背景画像番号_url#)...」の()の中を、取得した画像URLに書き換えてください。ソースコードに★印をつけておいたので見つけやすいと思います。
・背景画像は少し暗めの写真をおすすめします。
</p>
</div>
</main>

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

</div>

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=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');

/* 全体設定 */
html {
scroll-behavior: smooth;
}

*{
font-family: 'Noto Sans JP', sans-serif;
color: #FFF;
font-size: 12px;
font-weight: 300;
letter-spacing: 0.1em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
}

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

body{
width: 100vw;
overflow-x: hidden;
}

.wrap{
width: 100vw;
min-height: 100vh;
position: relative;
padding: 40px 25px;
overflow: hidden;
}

/* リンク文字 */
a{
color: #D5D5D5;
transition: 0.2s;
}

a:hover{
color: #C8EB85;
}

/* 強調文 */
strong{
font-weight: 500;
background-color: #C8EB85;
color: #000;
}

/* ヘッダーメニュー */
header{
width: 100%;
text-align: center;
}

.nav li{
display: inline-block;
padding: 40px 5px;
}

.nav li a{
color: #FFF;
font-family: 'Marcellus', serif;
font-size: 16px;
border-bottom: none;
padding: 2px 6px;
background-color: #000;
text-decoration: none;
position: relative;
transition: 0.2s;
}

.nav li a:hover{
background: transparent;
color: #000;
z-index: 0;
}

.nav li a:after{
position: absolute;
left: 0;
top: 0;
content: "";
background: #C8EB85;
width: 0;
height: 100%;
transition: 0.2s;
z-index: -2;
}

.nav li a:hover:after{
width: 100%;
}

/* タイトルの下の斜め線 */
.slash{
transform: rotate(-30deg);
width: 70px;
margin: 0 auto;
}

.slash hr{
border: none;
height: 1px;
background-color: #FFF;
}

/* サイトタイトル */
h1{
font-family: 'Marcellus', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho";
font-size: 30px;
display: block;
margin: 30px 0;
}

/* 見出し */
h2{
font-family: 'Marcellus', serif;
font-size: 24px;
padding-bottom: 30px;
text-align: center;
}

h3{
font-family: 'Marcellus', serif;
font-size: 13px;
background-color: #000;
display: inline-block;
padding: 0 5px;
margin-bottom: 10px;
}

h4{
font-weight: 500;
}

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

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 50px;
padding: 40px 8% 60px;
-webkit-backdrop-filter: blur(20px) brightness(55%);
backdrop-filter: blur(20px) brightness(55%);
}

/* グループ（h3＋h4＋本文のセット） */
.group + .group{
margin-top: 50px;
}

/* コンテンツの横並びリスト */
.yoko li{
display: inline-block;
}

.yoko li + li{
padding-left: 5px;
}

/* 入力フォームとボタン */
input, textarea{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
color: #000;
line-height: 1.6em;
padding:5px;
margin: -18px 0 15px;
border: none;
outline: none;
border-radius: 0;
-webkit-font-smoothing: antialiased;
}

input:focus, textarea:focus{
width: 100%;
color: #000;
}

.message-set{
display: flex;
}

.message{
width: 220px;
height: calc( 1.6em * 1.6 );
}

.message:focus{
width: 220px;
height: calc( 1.6em * 1.6 );
}

.button{
width: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
}

.button input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
outline: none;
box-shadow: none;
border-radius: 0;
width: 70px;
height: 28px;
background-color: #C8EB85;
color: #000;
transition: 0.3s;
font-size: 12px;
padding: 0;
}

.button input:hover{
background-color: #000;
color: #FFF;
}

/* フッター */
footer{
text-align: center;
}

footer a{
background-color: #000;
padding: 1px 4px;
text-decoration: none;
}

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

.nav li{
padding-bottom: 10px;
}

h2{
font-size: 20px;
}

.section{
margin: 0 auto 30px;
padding: 20px 8% 30px;
}

.message{
width: 170px;
}

.message:focus{
width: 170px;
}

.button{
margin-bottom: 8px;
}
}

</style>