単色バージョン

info

背景を写真でなく単色にしたパターンです。HEAD内のソースコードで背景色を変更できます。

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

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

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

text

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

bkm

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

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

code

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

おまけのバナーはこちら。文字入れして使ってください。

全体レイアウト

<div class="wrap"> <!-- ↓ここからヘッダーメニュー↓ --> <header> <h1>単色バージョン</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>背景を写真でなく単色にしたパターンです。HEAD内のソースコードで背景色を変更できます。<br> メニュー以外のリンクは<a href="■">こんなふう</a>。 <strong>強調文はこんなふうになります。</strong></p> <p>サイト名：◯◯◯<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> ・背景色の変え方：HEAD内の「background-color: #◯◯◯;の部分を好きな色コードに書き換えてください。ソースコードに★印をつけておいたので見つけやすいと思います。 </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; } /* 背景設定　★★★background-color: #◯◯◯;に背景色を入力 */ body:before{ background-color: #00989F; 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: #FFE05F; } /* 強調文 */ strong{ font-weight: 500; background-color: #FFE05F; 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: #FFE05F; 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: 30px; background-color: #FFE05F; 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>