temp-03 | ナノ

info

きれいな色の写真素材にぼかし加工をかけてみると思いのほか良い感じになったので、背景に使ってみました。背景画像を差し替える場合は淡い色味のぼんやりした画像をおすすめします。
サイト名は2行になっても大丈夫です。

下記ページがセットになります。トップだけ等お好きにお使いください。
・TOPページ
・子ページ（今開いているページ）
・小説一覧ページ
・小説本文ページ
・ブログページ

メニュー以外のリンクはこんなふう。 強調文はこんなふうになります。
サイト名：◯◯◯
管理人：◯◯◯
URL：https://◯◯◯

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

bookmark

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

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

code

ソースコードを下記からコピペして使ってください。自動改行しないで作成しています。詳しい使い方はソースコード内に書いていますので、自信がない方はお役立てください。
おまけのバナーはこちら。

背景画像はパブリックドメインのものを加工しています。色々作りましたので好きなものをお使いください。今開いているページの背景は一番左です。デザイン上での見え方の参考はこちら。

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: #262626;
font-size: 13px;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 2.2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration: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{
max-width: 800px;
min-height: 100vh;
position: relative;
padding: 40px 0 0;
overflow: hidden;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
color: rgba(38,38,38,0.6);
transition: 0.2s;
border-bottom: 1px solid rgba(38,38,38,0.6);
}

a:hover{
filter: blur(1px);
border-bottom: rgba(38,38,38,0);
}

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

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

.nav li{
display: inline-block;
}

.nav li + li{
padding-left: 20px;
}

.nav li a{
color: #262626;
font-size: 16px;
border-bottom: none;
transition: 0.2s;
}

.nav li a:hover{
background-color: transparent;
filter: blur(3px);
}

/* サイトタイトル */
h1{
font-size: 70px;
display: block;
line-height: 1.4em;
margin-bottom: 20px;
}

/* 見出し */
h2{
font-size: 20px;
padding-bottom: 5px;
background-image: linear-gradient(90deg, rgba(38,38,38,1) 0 5%, rgba(38,38,38,0.15) 5%);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: bottom;
margin-bottom: 30px;
}

h3{
font-size: 15px;
}

h3:before{
content:'[';
padding-right: 5px;
}

h3:after{
content:']';
padding-left: 5px;
}

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

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

/* グループ（h3タイトル＋小説リストのセット） */
.group + .group{
margin-top: 50px;
}

/* リスト */
.yoko li{
display: inline-block;
}

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

/* 入力フォームと送信ボタン */
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: #262626;
border:1px #262626 solid;
width: 30em;
height:2.0em;
}

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

input[type="submit"]{
width: auto;
background-color: #262626;
border: none;
color: #FFF;
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
}

input[type="submit"]:hover{
background-color: #FFF;
color: #262626;
}

/* 名前変換フォーム */
.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{
padding-left: 15px;
}

.caption{
font-size: 11px;
padding-bottom: 6px;
}

/* 小説本文 */
.title{
text-align: right;
background-image: linear-gradient(-90deg, rgba(38,38,38,1) 0 5%, rgba(38,38,38,0.15) 5%);
padding-bottom: 30px;
}

.text{
margin: 70px 0;
}

.text-footer{
display: flex;
justify-content: space-between;
border-top:  rgba(38,38,38,0.15) solid 1px;
padding-top: 30px;
}

.back{
width: 50%;
}

.page{
text-align: right;
width: 50%;
}

/* ブログ（note） */
.note{
width: 100%;
padding: 30px 40px 40px;
background-color: rgba(255,255,255,0.5);
margin-bottom: 30px;
}

.note .back{
font-size: 12px;
color: red;
border: none;
}

.note p{
color: #262626;
}

.date{
font-size: 10px;
}

.note h5{
font-size: 16px;
}

.readmore a{
padding-top: 30px;
}

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

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

main{
margin-top: 55px;
}

h1{
font-size: 50px;
}

.dream input{
line-height: normal;
}

.note{
padding: 30px 15px 40px;
}
}

</style>



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $('.code').focus(function(){
    $(this).select();
  });
});
</script>

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

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>サイトタイトル</h1>
<ul class="nav">
<li><a href="■">top</a></li>
<li><a href="■">info</a></li>
<li><a href="■">text</a></li>
<li><a href="■">note</a></li>
</ul>
</header>

<!-- ↓ここからメインコンテンツ↓ -->
<main>
<div class="section">
<p>
0408　/　連載◯◯◯　+1話<br>
0401　/　更新情報などを載せると◎<br>
0401　/　<a href="■">このように</a>リンクも貼れます。<br>
</p>
<br>
<p>rank: <a href="■">xxx</a>  |  <a href="■">yyy</a>  |  <a href="■">zzz</a></p>
</div>
</main>

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

</div>

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

<div class="wrap">


<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>サイトタイトル</h1>
<ul class="nav">
<li><a href="■">top</a></li>
<li><a href="■">info</a></li>
<li><a href="■">text</a></li>
<li><a href="■">note</a></li>
</ul>
</header>


<!-- ↓ここからメインコンテンツ↓ -->
<main>

<div class="section">
<h2>info</h2>
<p>きれいな色の写真素材にぼかし加工をかけてみると思いのほか良い感じになったので、背景に使ってみました。背景画像を差し替える場合は淡い色味のぼんやりした画像をおすすめします。<br>
サイト名は2行になっても大丈夫です。<br><br>
下記ページがセットになります。トップだけ等お好きにお使いください。<br>
・TOPページ<br>
・子ページ（今のページ：色々な用途に）<br>
・小説一覧ページ<br>
・小説本文ページ<br>
・ブログページ<br>
<br>
メニュー以外のリンクは<a href="■">こんなふう</a>。
<strong>強調文はこんなふうになります。</strong><br>
サイト名：◯◯◯<br>
管理人：◯◯◯<br>
URL：https://◯◯◯<br><br>
ご用の方や感想などはこちらからどうぞ。など</p>
<form action="/ID/form/1/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea>　<input type="submit" value="〒" accesskey="1" /></form>
</div>

<div class="section">
<h2>bookmark</h2>
<p>リンクフリーに甘えています。（敬称略）</p>
<ul class="tate">
<li><a href="■">サイト名</a> | ◯◯◯様</li>
<li><a href="■">site-name</a> | ◯◯◯様</li>
</ul>
</div>

</main>



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

</div>

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

#novel#

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

<div class="wrap">


<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>サイトタイトル</h1>
<ul class="nav">
<li><a href="■">top</a></li>
<li><a href="■">info</a></li>
<li><a href="■">text</a></li>
<li><a href="■">note</a></li>
</ul>
</header>


<!-- ↓ここからメインコンテンツ↓ -->
<main>
<p>苗字・名前の順で入力してください。などの説明をいれても。<br>
＃list＃タグを使っていないので、お手数ですが1話ずつURLを入力してください。</p><br><br>

<div class="section">
<form class="dream" action="#dream_url#" method="post">
<input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br>
<input type="text" name="DreamID[■名前変換登録番号（2番目に登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br>
<input type="submit" name="set" value="◎"></form>
</div>

<div class="section">
<h2>long story</h2>
<h3>長編タイトル：縦並びver</h3>
<p class="caption">ここに設定や注意事項などの補足を入れられます</p>
<ul class="tate novel">
<li><a href="■">春はあけぼの</a></li>
<li><a href="■">やうやう白くなりゆく山ぎは</a></li>
<li><a href="■">すこしあかりて</a></li>
</ul>
<br>
<h3>長編タイトル：横並びver</h3>
<ul class="yoko novel">
<li><a href="■">01</a></li>
<li><a href="■">02</a></li>
<li><a href="■">03</a></li>
</ul>
</div>

<div class="section">
<h2>short story</h2>
<ul class="tate novel">
<li><a href="■">1話のタイトルが長いときは縦並び、</a>（作品名）</li>
<li><a href="■">短い時は横並びがおすすめです</a>（補足など）</li>
</ul>
</div>
</main>


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

</div>

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

<div class="wrap">

<!-- ↓ここからメインコンテンツ↓ -->
<main>
<h2 class="title">#title#</h2>
<p class="text">#text#</p>
<div class="text-footer">
<div class="back">
<a href="■表紙ページのURL">back to list</a>
</div>
<div class="page">
#prev_prev_prev# | #next_next_next#
</div>
</div>
</main>

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

</div>

ブログ：全体画面レイアウト

<div class="wrap">

<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<h1>サイトタイトル</h1>
<ul class="nav">
<li><a href="■">top</a></li>
<li><a href="■">info</a></li>
<li><a href="■">text</a></li>
<li><a href="■">note</a></li>
</ul>
</header>


<!-- ↓ここからメインコンテンツ↓ -->
<main>
#blog#
</main>

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

</div>

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

<div class="note">
<span class="date">#date#  #time#</span><br>
<h5>#title#</h5><br>
<p>#text#</p>
<span class="readmore">#ext_read more#</span>
</div>

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

<div class="note">
<span class="date">#date#  #time#</span><br>
<h5>#title#</h5><br>
<p>#text#</p><br><br>
<p>#text2#</p>
</div>

使い方メモ

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