水曜日は世紀末

info
credit
code
custom

demo 清涼飲料水や乳酸菌飲料をイメージした小説テンプレートです。

2022.11.14ver 1.0.1 - クレジット修正
2022.01.28Release

material

banner: banner No.006-4
texture: texture No.006

title

テンプレートタイトル: すいせい様より
past log - 2020 - 水曜日は世紀末

sample text

日本語サンプルテキスト: 青空文庫様より
青いランプ著者：小川未明

font

Aclonica / Montserrat / Sacramento: Google Fonts様より
Aclonica
Montserrat
Sacramento
M PLUS Rounded 1c: Google Fonts + 日本語様より
M PLUS Rounded 1c
チェックポイント: Leafscape – 日本語webフォントライブラリ様より
チェックポイント
Font Awesome 5 Free: Font Awesome様

color

colorhunt様

code

nanoのスマホ向け自動出力CSSの消去: sikaku様より
ナノのスマホ向け自動出力CSSの消去
※管理人の飯様より再配布の許可をいただいております。
リセットcss(改変元): Richard Clark様より
HTML5 Reset Stylesheet
ライセンス : MIT License
波アニメーション(改変元): codepen様より
Simple CSS Waves | Mobile & Full width by Goodkatz
見出しレベル3(改変元): のんびりデザインしているような。様より
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた

special thanks

デザインパーツの用意・展示にあたり、折橋廉様の運営するKerryのデモページを参考にさせて頂きました。ありがとうございます。

novel

index - html

書き換え部分(クリック/タップで表示)


                              <!DOCTYPE html>
                <html lang="ja">
                <head>
                  <meta charset="utf-8">
                  <meta name="robots" content="noindex,nofollow">
                  <meta name="googlebot" content="noindex,nofollow">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                  <meta name="theme-color" content="#211572">
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
                  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <title>タイトル</title>
                </head>
                <body>
                  <header>
                    <div class="flex-wrapper">
                      <div class="flex-item">
                        <h1>タイトル</h1>
                      </div>
                      <div class="flex-item">
                        <aside>
                          <a href="名前変換ページURL#namechange">namechange</a>
                          <a href="名前変換ページURL#setting">setting</a>
                        </aside>
                      </div>
                    </div>
                  </header>
                  <main>
                    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                      <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                      </defs>
                      <g class="parallax">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255, 0.7)" />
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                      </g>
                    </svg>
                    <div class="flex-wrapper">
                      <section class="flex-item">
                        <h2>タイトル</h2>
                        内容
                      </section>
                      <section class="flex-item">
                        <h2>タイトル</h2>
                        内容
                      </section>
                    </div>
                  </main>
                  <footer>
                    <a href="前ページURL">back</a><br>
                    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                  </footer>
                </body>
                </html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex,nofollow">
  <meta name="googlebot" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="theme-color" content="#211572">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="ファイル名.css">
  <title>タイトル</title>
</head>
<body>
  <header>
    <div class="flex-wrapper">
      <div class="flex-item">
        <h1>タイトル</h1>
      </div>
      <div class="flex-item">
        <aside>
          <a href="名前変換ページURL#namechange">namechange</a>
          <a href="名前変換ページURL#setting">setting</a>
        </aside>
      </div>
    </div>
  </header>
  <main>
    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
      <defs>
        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
      </defs>
      <g class="parallax">
        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255, 0.7)" />
        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
        <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
      </g>
    </svg>
    <div class="flex-wrapper">
      <section class="flex-item">
        <h2>タイトル</h2>
        内容
      </section>
      <section class="flex-item">
        <h2>タイトル</h2>
        内容
      </section>
    </div>
  </main>
  <footer>
    <a href="前ページURL">back</a><br>
    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
  </footer>
</body>
</html>

namechange - html

書き換え部分(クリック/タップで表示)


                              <!DOCTYPE html>
                <html lang="ja">
                <head>
                  <meta charset="utf-8">
                  <meta name="robots" content="noindex,nofollow">
                  <meta name="googlebot" content="noindex,nofollow">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                  <meta name="theme-color" content="#211572">
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
                  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <title>タイトル</title>
                </head>
                <body>
                  <article>
                    <h3 id="namechange">namechange</h3>
                    <form class="form-namechange" action="URL" method="post">
                      <input type="text" name="" value="name1">
                      <input type="text" name="" value="name2">
                      <input type="submit" value="ok">
                    </form>
                    <h3 id="setting">setting</h3>
                    設定
                  </article>
                  <nav>
                    <ul class="ul-pager">
                      <li><a href="小説トップページURL">index</a></li>
                    </ul>
                  </nav>
                  <footer>
                    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                  </footer>
                </body>
                </html>

article - html

書き換え部分(クリック/タップで表示)


                              <!DOCTYPE html>
                <html lang="ja">
                <head>
                  <meta charset="utf-8">
                  <meta name="robots" content="noindex,nofollow">
                  <meta name="googlebot" content="noindex,nofollow">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                  <meta name="theme-color" content="#211572">
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
                  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <title>タイトル</title>
                </head>
                <body>
                  <article>
                    <h2 class="center">タイトル</h2>
                    本文
                    <div class="afterword right subtext">
                      後書き等
                    </div>
                  </article>
                  <nav>
                    <ul class="ul-pager">
                      <li><a href="前ページURL">prev</a></li>
                      <li><a href="小説トップページURL">index</a></li>
                      <li><a href="次ページURL">next</a></li>
                    </ul>
                  </nav>
                  <footer>
                    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                  </footer>
                </body>
                </html>

css

@charset "UTF-8";
/* design by tsugumi https://miroirs.stars.ne.jp/ */
/*
Copyright (c) 2022 by Goodkatz (https://codepen.io/goodkatz/pen/LYPGxQz)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/* font import */
@font-face
{
font-family: チェックポイント;
src: url('https://cdn.leafscape.be/cpfont/CP_Font_web.woff2')
     format("woff2");
}
/* font import END */
/* resetcss */
/*
Copyright (c) 2021 tsugumi - https://miroirs.stars.ne.jp/
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html

Copyright (c) 2010 Richard Clark - http://richclarkdesign.com
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html
*/
*,
*::before,
*::after {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  font-size: 100%;
  outline: 0;
}

*::before,
*::after {
  content: none;
}

body {
  line-height: 1.5;
}

main {
  display: block;
}

[type="checkbox"],[type="radio"],[type="submit"],
button,select,option,label,summary {
  cursor: pointer;
}

input,button,textarea,select {
  font-family: inherit;
  font-size: 100%;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  overflow-x: hidden;
  resize: vertical;
}

::placeholder {
  opacity: 1;
}

ul,ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,blockquote::after,
q::before,q::after {
  content:'';
  content: none;
}

mark {
  color: #000;
  background-color: #ff9;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border-top: 1px solid #000;
}
/* resetcss END */
/* firefox only */
@-moz-document url-prefix() {
  body {
    overflow-wrap: break-word;
  }
}
/* firefox only END */
/* root */
:root {
  --base-color: #fff;
  --main-color: #211572;
  --sub-color: #24bddf;
  --accent-color: #fffdbb;
  --strong-color: #de235f;
  --selection-color: rgba(36, 189, 223, .5);
  --white-color: #fff;
  --body-font: 'Montserrat', "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --title-font: 'Aclonica', "チェックポイント", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --headline-font: 'Sacramento', "M PLUS Rounded 1c", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--main-color);
}

html {
  scrollbar-color: var(--main-color) transparent;
  scrollbar-width: thin;
}
/* scrollbar END */
/* selection */
::selection {
  background: var(--selection-color);
}
/* selection END */
/* body */
body {
  position: relative;
  line-height: 1.8;
  color: var(--main-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-size: 11px;
  text-align: justify;
  letter-spacing: .2em;
  word-break: break-all;
}
/* body END */
/* headline */
h1 {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  padding: 16px;
  border: 4px solid var(--white-color);
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 4px;
}

h1::before {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--sub-color);
  content: '';
}

h1::after {
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: -2;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
  background-image: radial-gradient(var(--white-color) 8%, transparent 13%),radial-gradient(var(--white-color) 8%, transparent 13%);
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px;
  content: '';
}

h2,
h3,
h4,
h5,
h6 {
  margin: 16px 0;
  font-family: var(--headline-font);
}

h2 {
  position: relative;
  line-height: 1.25;
  padding: 0 0 4px 4px;
  font-size: 20px;
  text-transform: capitalize;
}

h2::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

h3 {
  display: flex;
  align-items: center;
  font-size: 18px;
}

h3::after {
  flex-grow: 1;
  margin-left: 8px;
  border-top: 4px dotted var(--main-color);
  content: '';
}

h4 {
  display: table;
  padding: 0 8px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px 0 0 var(--main-color);
  font-size: 16px;
}

h5 {
  padding-left: 8px;
  border-left: 4px solid var(--main-color);
  font-size: 14px;
}

h6 {
  display: table;
  border-bottom: 2px dotted var(--main-color);
  font-size: 12px;
}
/* headline END */
/* text decoration */
a {
  color: var(--sub-color);
  text-decoration: none;
}

strong {
  color: var(--strong-color);
}

em {
  border-bottom: 1px dashed;
}

mark {
  display: inline-block;
  line-height: 1;
  padding: 0 4px;
  background: var(--accent-color);
}

[data-ruby] {
  position: relative;
}

[data-ruby]::before {
  position: absolute;
  right: -3em;
  bottom: 105%;
  left: -3em;
  line-height: 100%;
  margin: auto;
  font-size: .5em;
  text-align: center;
  letter-spacing: 1px;
  word-break: keep-all;
  content: attr(data-ruby);
  transform: scale(.75);
  transform-origin: bottom center;
}

ruby rt {
  display: none;
}

.subtext {
  opacity: .5;
}

.dot {
  -webkit-text-emphasis: filled var(--main-color);
  text-emphasis: filled var(--main-color);
}

.border-l {
  position: relative;
  margin-right: 8px;
  padding-left: 8px;
}

.border-l::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 100%;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

.border-r {
  position: relative;
  margin-right: 8px;
  padding-right: 8px;
}

.border-r::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

.border-a {
  position: relative;
  margin-right: 40px;
}

.border-a::after {
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  width: 24px;
  height: 4px;
  margin: auto;
  border-top: 2px dotted var(--main-color);
  content: '';
}

.marker {
  background: linear-gradient(transparent 60%, var(--accent-color) 60%);
}

.btn {
  display: inline-block;
  padding: 0 8px;
  border: 2px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  background: var(--white-color);
}
/* text decoration END */
/* align */
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
/* align END */
/* separator */
hr {
  height: 1px;
  border-top: 4px dotted var(--main-color);
}
/* line END */
/* box */
.box {
  margin: 16px auto;
  padding: 8px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px 0 0 var(--main-color);
}
/* box END */
/* details */
details summary {
  display: inline-block;
  border-bottom: 2px dotted var(--main-color);
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details summary::before {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-color);
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  content: '\f0da';
  transition: .3s;
}

details[open] .details-contents {
  animation: fadeIn 2s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }

100% {
    opacity: 1;
    transform: none;
  }
}

.details-contents {
  padding: 8px 0;
}
/* details END */
/* list */
.ol-column,
.ol-row,
.ul-row,
.ul-column,
.dl-banner,
.dl-row,
.dl-column {
  padding: 16px 0;
}

.ol-row,
.ul-row {
  display: flex;
  flex-wrap: wrap;
}

.ol-row,
.ol-column {
  counter-reset: number;
  list-style-type: none;
}

.ol-row li {
  position: relative;
  width: 20%;
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
  text-align: center;
}

.ol-row li::after,
.ol-column li::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  color: var(--white-color);
  text-align: center;
  content: counter(number);
  counter-increment: number;
}

.ol-row li::after {
  right: 0;
  left: 0;
}

.ol-column li::after {
  left: 4px;
}

.ol-row li::before,
.ol-column li::before {
  position: absolute;
  z-index: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--main-color);
  content: '';
}

.ol-row li::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.ol-column li::before {
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.ol-row li a {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: auto;
}

.ol-column li {
  position: relative;
  line-height: 32px;
  margin-bottom: 8px;
  padding-left: 38px;
}

.ul-row,
.ul-column {
  list-style-type: disc;
}

.ul-row li,
.ul-column li {
  margin-left: 16px;
}

.dl-row dt {
  position: relative;
  float: left;
  margin-right: 4px;
  padding: 0 2px 2px;
}

.dl-row dt::after {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  margin: auto;
  padding: 0 4px;
  background: var(--main-color);
  content: '';
}

.dl-row dd {
  padding-bottom: 4px;
}

.dl-column dt::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid var(--main-color);
  border-radius: 50%;
  content: '';
}

.dl-column dd {
  margin-left: 12px;
}

.dl-banner dt {
  display: table;
  position: relative;
  text-align: center;
}

.banner-title:hover + .banner,
a .banner:hover {
  filter: brightness(125%);
}

.banner {
  display: block;
  width: 200px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.dl-banner dd {
  margin-bottom: 16px;
  padding: 8px 0 8px 8px;
  border-left: 2px dotted var(--main-color);
}

.banner-title {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  line-height: 40px;
  margin: auto;
  color: var(--white-color);
  font-weight: bold;
  text-decoration: none;
}
/* list END */
/* form */
form {
  max-width: 400px;
  margin: auto;
  padding: 16px;
}

input,
textarea,
select {
  display: inline-block;
  line-height: inherit;
  padding: 8px;
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-family: 'Font Awesome 5 Free', var(--body-font);
  text-align: justify;
}

[type="submit"] {
  width: 40px;
  border: 2px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  text-align: center;
}

.form-namechange [type="text"] {
  display: inline-block;
  width: calc(50% - 30px);
  margin: 8px auto;
}

.form-clap [type="text"],
.form-clap select {
  width: calc(100% - 48px);
}
/* form END */
/* semantic elements */
header {
  position: relative;
  z-index: 0;
  height: 400px;
  padding: 64px 32px;
  color: var(--white-color);
  background: var(--main-color);
}

aside {
  position: relative;
  z-index: 10;
  width: 200px;
  margin: 32px auto;
}

main {
  position: relative;
}

section {
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 32px auto;
}

article {
  position: relative;
  max-width: 520px;
  line-height: 2;
  margin: 0 auto;
  padding: 32px;
  user-select: none;
}

footer {
  line-height: 2;
  padding: 32px 0;
  text-align: center;
}
/* semantic elements END */
/* novel parts */
/* wave animation */
.waves {
  position: relative;
  top: -39px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin-bottom: -7px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) {
  animation-duration: 7s;
  animation-delay: -2s;
}

.parallax > use:nth-child(2) {
  animation-duration: 10s;
  animation-delay: -3s;
}

.parallax > use:nth-child(3) {
  animation-duration: 13s;
  animation-delay: -4s;
}

.parallax > use:nth-child(4) {
  animation-duration: 20s;
  animation-delay: -5s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}
/* wave animation END */
aside a {
  display: block;
  margin-top: 8px;
  padding-left: 8px;
  border-left: 4px solid var(--white-color);
  color: var(--white-color);
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.card-item {
  width: 50%;
  padding: 0 4px 32px;
  text-align: center;
}

.card-img {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  object-fit: cover;
}

.afterword {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px dotted var(--main-color);
}

.ul-pager {
  text-align: center;
}

.ul-pager li {
  display: inline-block;
  padding: 0 8px;
  text-transform: uppercase;
}
/* novel parts END */
/* more than 768px */
@media screen and (min-width: 768px) {
  .waves {
    top: -100px;
    height: 100px;
  }

.flex-wrapper {
    display: flex;
    max-width: 768px;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
  }

.flex-item {
    width: calc(50% - 32px);
  }
}
/* more than 768px END */

novel - nano

nano用の配布コードは広告を下部に設置していることを前提にしたコードになっております。

全体レイアウト

表紙画面レイアウト

書き換え部分(クリック/タップで表示)


                              <header>
                  <div class="flex-wrapper">
                    <div class="flex-item">
                      <h1>タイトル</h1>
                    </div>
                    <div class="flex-item">
                      <aside>
                        <a href="#dream_url##namechange">namechange</a>
                        <a href="#dream_url##setting">setting</a>
                      </aside>
                    </div>
                  </div>
                </header>
                <main>
                  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                    <defs>
                      <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                    </defs>
                    <g class="parallax">
                      <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255, 0.7)" />
                      <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                      <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                      <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                    </g>
                  </svg>
                  <div class="flex-wrapper">
                    <section class="flex-item">
                      <h2>タイトル</h2>
                      内容
                    </section>
                    <section class="flex-item">
                      <h2>タイトル</h2>
                      内容
                    </section>
                  </div>
                </main>
                <footer>
                  <a href="前ページURL">back</a><br>
                  <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>

<header>
  <div class="flex-wrapper">
    <div class="flex-item">
      <h1>タイトル</h1>
    </div>
    <div class="flex-item">
      <aside>
        <a href="#dream_url##namechange">namechange</a>
        <a href="#dream_url##setting">setting</a>
      </aside>
    </div>
  </div>
</header>
<main>
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    <defs>
      <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
    </defs>
    <g class="parallax">
      <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255, 0.7)" />
      <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
      <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
      <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
    </g>
  </svg>
  <div class="flex-wrapper">
    <section class="flex-item">
      <h2>タイトル</h2>
      内容
    </section>
    <section class="flex-item">
      <h2>タイトル</h2>
      内容
    </section>
  </div>
</main>
<footer>
  <a href="前ページURL">back</a><br>
  <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>

文章画面レイアウト

書き換え部分(クリック/タップで表示)


                              <article>
                  <h2 class="center">#title#</h2>
                  #text#
                </article>
                <nav>
                  <ul class="ul-pager">
                    <li>#prev_prev_prev#</li>
                    <li><a href="/yourID/novel/N/">index</a></li>
                    <li>#next_next_next#</li>
                  </ul>
                </nav>
                <footer>
                  <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>

名前変換画面レイアウト

書き換え部分(クリック/タップで表示)


                              <article>
                  <section id="namechange">
                    <h2>名前変換</h2>
                    <form class="form-namechange" action="/yourID/novel/N/dream" method="post">
                      <input type="text" name="DreamID[1]" value="name1">
                      <input type="text" name="DreamID[2]" value="name2">
                      <input type="submit" name="set" value="ok">
                    </form>
                  </section>
                  <section id="setting">
                    <h2>設定</h2>
                    設定
                  </section>
                </article>
                <footer>
                  <a href="/yourID/novel/N/">back</a><br>
                  <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>

HEAD・HTML詳細

HEAD内