temp-04 | ナノ

Information

Lofi girlとかChill-mixっぽいデザインって良いよなぁと思って作ってみました。夕暮れとも夜明けともつかない、自分だけの時間をイメージ。
PC表示のメインコンテンツ部分はちょっと懐かしの縦スクロールボックス。スマホ表示だと普通にスクロールできる、レスポンシブデザインです。

下記ページがセットです。今開いているのはトップページですが、HTMLのmainタグの中身を書き換えればbkmやmainなどにも使えます。
・index（クッションページ）
・トップページ

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

ボックスの中に文字を入れることもできます。
管理人：◯◯◯
URL：https://◯◯◯

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

code

おまけのバナーはこちら。
色違いもあるよ：昼ver / 夜ver

窓のイラストは自作です。下記よりどうぞ。
イラスト素材の再配布は禁止です。また、他サイト様のテンプレ等に組み込んで使う場合は必ずmellow.のリンクを貼ってください。（例：material by mellow.）

ソースコードは下記からコピペしてください。自動改行「しない」で作成しています。詳しい使い方はメモに書いていますので、自信がない方はお役立てください。

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

/* 全体設定 */
*{
font-family: 'Zen Maru Gothic', sans-serif;
color: #FDDFE5;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.8em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
height: 100vh;
background-color: #261F40;
position: relative;
overflow-x: hidden;
}

.wrap{
max-width: 900px;
min-height: 100vh;
position: relative;
padding: 0 20px;
overflow: hidden;
margin: 0 auto 30px;
padding-top: 10%;
}

/* 画面上のグラデーション線 */
.line{
width: 100vw;
height: 8px;
background-image: linear-gradient(90deg, rgba(132, 130, 227, 1), rgba(244, 194, 248, 1) 45%, rgba(255, 196, 211, 1));
}

/* リンク文字 */
a{
transition: 0.2s;
display: inline-block;
position: relative;
}

a:after{
background-color: rgba(253,223,229,0.4);
border-radius: 0.5px;
content: "";
display: block;
height: 1px;
bottom: 1px;
width: 100%;
position: absolute;
}

a:hover{
color: #EA75B4;
}

a:hover:after{
background-color: rgba(253,223,229,0);
}

/* 強調文 */
strong{
font-weight: 700;
color: #EA75B4;
display: inline-block;
position: relative;
z-index: 0;
}

strong:before{
background-color: #EA75B4;
opacity: 0.2;
border-radius: 1px;
content: "";
display: block;
height: 7px;
position: absolute;
bottom: 0;
width: 100%;
z-index: -1;
}

/* ヘッダー＋コンテンツのレイアウト */
.main-flex{
display: flex;
column-gap: 7%;
height: 500px;
}

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

.mv{
width: 136px;
display: block;
margin: 0 auto 20px;
}

.nav li{
display: block;
text-align: center;
padding-bottom: 5px;
transition: 0.2s;
}

.nav li a{
font-size: 16px;
}

.nav li a:after{
border-radius: 1px;
height: 2px;
}

.nav li a:hover:after{
background-color: rgba(253,223,229,0);
}

/* メインコンテンツ */
main{
width: 67%;
height: 100%;
overflow-y: scroll;
margin: 0 auto;
padding-right: 35px;
}

/* PC表示時のスクロールバー */
main::-webkit-scrollbar {
width: 4px;
}

main::-webkit-scrollbar-thumb {
background-color: rgba(253,223,229,1);
border-radius: 2px;
}

main::-webkit-scrollbar-track {
background-color: rgba(253,223,229,0);
border-radius: 2px;
}

/* 見出し */
h1,h2,h3,h4{
font-family: 'Dosis', 'Zen Maru Gothic', sans-serif;
font-weight: 700;
}

h1{
font-size: 24px;
text-align: center;
padding-bottom: 10px;
}

h2{
font-size: 20px;
padding-bottom: 15px;
}

h2:before {
display: inline-block;
content: "";
margin-right: 10px;
width: 6px;
height: 6px;
vertical-align: middle;
border-radius: 5px;
background-color: #EA75B4;
}

h3{
font-size: 15px;
}

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

/* テキストボックス */
.box{
width: 100%;
padding: 10px 15px 15px;
border-radius: 10px;
background-color: rgba(255,255,255,0.05);
}

/* 入力フォームと送信ボタン */
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: #EAEAEA;
border-radius: 4px;
color: #262626;
border: none;
width: 30em;
height:2.0em;
padding: 0 6px;
}

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

input[type="submit"]{
width: auto;
border: none;
background-color: #EA75B4;
color: #FDDFE5;

padding: 0 10px;
cursor: pointer;
transition: 0.2s;
}

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

/* クッションページ */
.ent{
text-align: center;
}

.ent img{
width: 60px;
}

.ent a{
font-size: 24px;
font-family: 'Dosis', 'Zen Maru Gothic', sans-serif;
}

.ent a:after{
background: transparent;
}

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

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

.main-flex{
display: block;
height: auto;
}

header{
width: 100%;
}

.nav{
display: flex;
column-gap: 20px;
justify-content: center;
}

main{
width: 100%;
margin-top: 80px;
overflow-y: visible;
padding-right: 0;
}

main::-webkit-scrollbar {
display: none;
}

.line{
height: 3px;
}
}

</style>

トップページ：全体レイアウト

<div class="line"></div>
<div class="wrap">

<div class="main-flex">
<!-- ↓ここからヘッダーメニュー↓ -->
<header>
<img class="mv" src="#mtr■イラストの画像番号_url#" alt=""><!-- ★★★ここに窓の画像URL★★★ -->
<h1>Gina’s Secret</h1>
<ul class="nav">
<li><a href="■">first</a></li>
<li><a href="■">main</a></li>
<li><a href="■">log</a></li>
</ul>
</header>

<!-- ↓ここからメインコンテンツ↓ -->
<main>
<div class="section">
<h2>Information</h2>
<p>ここに本文を入れてください。ここはトップページの一番最初の部分です。<br>
メニュー以外のリンクは<a href="■">こんなふう</a>。<br>
<strong>強調文はこんなふうになります。</strong></p><br>
<div class="box"><p>ボックスの中に文字を入れることもできます。<br>
管理人：◯◯◯<br>
URL：https://◯◯◯</p></div>
<br><br>
<p>ご用の方や感想などはこちらからどうぞ。など</p>
<form action="/■サイトID/form/■メール機能番号/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea>　<input type="submit" value="〒" accesskey="1" /></form>
</div>

<div class="section">
<h2>見出しのサンプル</h2>
<p>仕様上、日本語と英語のフォントサイズがもともと違うため、見出しやサイト名が日本語だと少し文字が大きく感じるかもしれません。必要があれば、HEADのfont-sizeにて適宜調整してください。<br>
これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。これは本文のサンプルです。</p>
</div>
</main>
</div>

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

</div>

クッションページ：全体レイアウト

<div class="line"></div>
<div class="wrap">
<main>

<div class="ent">
<img src="#mtr■イラストの画像番号_url#" alt=""><br><!-- ★★★ここに窓の画像URL★★★ -->
<br><br>
<p>このサイトはXXXを取り扱う◯◯◯サイトです。<br>
などの簡単な説明用クッションページです。<br>
下のEnterからデモページへお進みください。</p>
<br>
<a href="■TOPページURL">Enter?</a>
</div>

</main>
</div>

</div>

使い方メモ

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