feminine

info
credit
code
custom

demo 1ページ完結型のグラデーションを使ったテンプレートです。

2021.09.01ver1.0.1 - 文字装飾・フォーム系css修正
2021.08.20Release

material

banner: Querelle様より
banner - 02[Oil painting]

sample text

日本語サンプルテキスト: 青空文庫様より
『注文の多い料理店』序著者:宮沢賢治

font

Dawning of a New Day / Lora / Noto Serif JP: Google Fonts様より
Dawning of a New Day
Lora
Noto Serif JP
Font Awesome 5 Free: Font Awesome様

code

nanoのスマホ向け自動出力CSSの消去: sikaku様より
ナノのスマホ向け自動出力CSSの消去
※管理人の飯様より再配布の許可をいただいております。
リセットcss(改変元): Richard Clark様より
HTML5 Reset Stylesheet
ライセンス : MIT License

special thanks

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

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="#f0e9e9">
                  <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=Dawning+of+a+New+Day&family=Lora&family=Noto+Serif+JP&display=swap" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <!-- nano -->
                  <smartphone>
                    <script>
                      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
                    </script>
                  </smartphone>
                  <!-- nano END -->
                  <title>site title</title>
                </head>
                <body>
                  <main>
                    <section id="index" class="tab-show">
                      <div class="index-wrap">
                        <h1>site title</h1>
                        12345
                        <ul class="ul-row">
                          <li><a href="URL">rank</a></li>
                          <li><a href="URL">rank</a></li>
                        </ul>
                        <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                      </section>
                      <section id="info">
                        <h2>information</h2>
                        <div class="flex-wrap">
                          <div class="flex-item">
                            <h3>introduction</h3>
                            ここに説明文。
                            <div class="box box-02">
                              <dl class="dl-row">
                              <dt>name</dt>
                                <dd>site name</dd>
                              <dt>url</dt>
                                <dd>http://xxx.xx.xxx/</dd>
                              <dt>manager</dt>
                                <dd>your name</dd>
                              <dt>since</dt>
                                <dd>0000.00.00~</dd>
                            </dl>
                            </div>
                          </div>
                          <div class="flex-item">
                            <h3>link</h3>
                            <h4>me</h4>
                            link free
                            <textarea class="copy-box" rows="1" onclick="this.select()"><a href="URL">site name</a></textarea>
                            <h4>credit</h4>
                            <ul class="ul-row">
                              <li><a href="URL">site name</a></li>
                              <li><a href="URL">site name</a></li>
                              <li><a href="URL">site name</a></li>
                            </ul>
                            <h4>bookmark</h4>
                            <ul class="ul-row">
                              <li><a href="URL">site name</a></li>
                              <li><a href="URL">site name</a></li>
                              <li><a href="URL">site name</a></li>
                            </ul>
                          </div>
                        </div>
                        <h3>rule</h3>
                        <div class="flex-wrap">
                          <div class="flex-item">
                            <h4>ok</h4>
                            <ul class="ul-column">
                              <li>item</li>
                              <li>item</li>
                              <li>item</li>
                            </ul>
                          </div>
                          <div class="flex-item">
                            <h4>ng</h4>
                            <ul class="ul-column">
                              <li>item</li>
                              <li>item</li>
                              <li>item</li>
                            </ul>
                          </div>
                        </div>
                        <h3>contact</h3>
                        <form class="form-contact center" action="URL" method="post">
                          お返事はblogよりx日以内に行います。メッセージのみ必須です。
                          <input type="text" placeholder="Name">
                          <input type="text" placeholder="Url / Address">
                          <textarea placeholder="Message*" rows="6"></textarea>
                          <input type="submit" value="send">
                        </form>
                      </div>
                    </section>
                    <section id="main">
                      <h2>main</h2>
                      <form class="form-oneline center" action="URL" method="post">
                        <input class="input-multi" type="text" value="苗字">
                        <input class="input-multi" type="text" value="名前">
                        <input type="submit" value="ok">
                      </form>
                      <div class="flex-wrap">
                        <div class="flex-item">
                          <h3>long</h3>
                          <dl class="dl-banner">
                            <dt><img src="バナー画像URL" class="banner"><a href="URL" class="banner-title">title</a></dt>
                            <dd>sample text</dd>
                            <dt><a href="URL"><img src="バナー画像URL" class="banner"></a></dt>
                            <dd>
                              title<br>
                              sample text
                            </dd>
                            <dt><img src="バナー画像URL" class="banner"></dt>
                            <dd>
                              <a href="URL">title</a><br>
                              sample text
                            </dd>
                          </dl>
                        </div>
                        <div class="flex-item">
                          <h3>short</h3>
                          <h4>xxx</h4>
                          <ul class="ul-column">
                            <li><a href="URL">title</a></li>
                            <li><a href="URL">title</a></li>
                            <li><a href="URL">title</a></li>
                          </ul>
                          <h4>xxx</h4>
                          <ul class="ul-row">
                            <li><a href="URL">title</a></li>
                            <li><a href="URL">title</a></li>
                            <li><a href="URL">title</a></li>
                          </ul>
                        </div>
                      </div>
                      <h3>plan</h3>
                      <dl class="dl-column">
                        <dt><a href="URL">title</a></dt>
                        <dd>sample text</dd>
                        <dt><a href="URL">title</a></dt>
                        <dd>sample text</dd>
                        <dt><a href="URL">title</a></dt>
                        <dd>sample text</dd>
                      </dl>
                    </section>
                    <section id="blog">
                      <h2>blog</h2>
                      <div class="box">
                        ここに注意書き
                      </div>
                      <div class="flex-wrap">
                        <!-- 記事リンク無記事 -->
                        <article class="justify flex-item">
                          <time>
                            <span class="month">01</span>
                            <span class="day">01</span>
                          </time>
                          ここに本文
                        </article>
                        <!-- 記事リンク無記事ここまで -->
                        <!-- 記事リンク有記事 -->
                        <article class="justify flex-item">
                          <time>
                            <span class="month">01</span>
                            <span class="day">01</span>
                          </time>
                          ここに本文
                          <div class="right">
                            <a href="URL" class="btn">more</a>
                          </div>
                        </article>
                        <!-- 記事リンク有記事ここまで -->
                        <!-- 折りたたみ記事 -->
                        <article class="justify flex-item">
                          <time>
                            <span class="month">01</span>
                            <span class="day">01</span>
                          </time>
                          ここに本文
                          <div class="toggle-box">
                            ここに折りたたみテキスト
                          </div>
                          <div class="right">
                            <button class="btn toggle-btn">more</button>
                          </div>
                        </article>
                        <!-- 折りたたみ記事ここまで -->
                      </div>
                    </section>
                  </main>
                  <nav>
                    <ul>
                      <li class="tab tab-hide"><a href="#index">index</a></li>
                      <li class="tab"><a href="#info">information</a></li>
                      <li class="tab"><a href="#main">main</a></li>
                      <li class="tab"><a href="#blog">blog</a></li>
                    </ul>
                  </nav>
                  <footer>
                    <button class="menu-btn">menu</button>
                  </footer>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                  <script>
                    $(function(){
                      size();
                      $(window).on("resize", function() {size();});
                      function size() {
                          var wH = $(window).height();
                          var navH = $('nav').outerHeight();
                          var secH = wH - navH;
                          $('#index').css('height',secH);
                      }
                    });
                 
                    $(function() {
                      $('.menu-btn').click(function () {
                        $('nav').slideToggle();
                      });
                      $('.tab a').click(function () {
                        $('section').removeClass('tab-show');
                        $($(this).attr("href")).addClass('tab-show');
                        var f_color = $('.tab-show').css('background-color');
                        $('footer').css('background-color',f_color);
                        $('nav').hide();
                        var display = $('#index').hasClass('tab-show');
                        if (display == true) {
                          $('footer').hide();
                          $('nav').css('bottom',0);
                          $('nav').show();
                          $('.tab').first().addClass('tab-hide');
                        } else {
                          $('footer').show();
                          var menuH = $('footer').outerHeight();
                          $('nav').css('bottom',menuH);
                          $('.tab').removeClass('tab-hide');
                        }
                        return false;
                      });
                    });
                 
                    $(function() {
                      $('.toggle-btn').click(function () {
                        $(this).parent().prev().slideToggle();
                      });
                    });
                  </script>
                </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="#f0e9e9">
  <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=Dawning+of+a+New+Day&family=Lora&family=Noto+Serif+JP&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="ファイル名.css">
  
  <smartphone>
    <script>
      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
    </script>
  </smartphone>
  
  <title>site title</title>
</head>
<body>
  <main>
    <section id="index" class="tab-show">
      <div class="index-wrap">
        <h1>site title</h1>
        12345
        <ul class="ul-row">
          <li><a href="URL">rank</a></li>
          <li><a href="URL">rank</a></li>
        </ul>
        <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
      </section>
      <section id="info">
        <h2>information</h2>
        <div class="flex-wrap">
          <div class="flex-item">
            <h3>introduction</h3>
            ここに説明文。
            <div class="box box-02">
              <dl class="dl-row">
                <dt>name</dt>
                <dd>site name</dd>
                <dt>url</dt>
                <dd>http://xxx.xx.xxx/</dd>
                <dt>manager</dt>
                <dd>your name</dd>
                <dt>since</dt>
                <dd>0000.00.00~</dd>
              </dl>
            </div>
          </div>
          <div class="flex-item">
            <h3>link</h3>
            <h4>me</h4>
            link free
            <textarea class="copy-box" rows="1" onclick="this.select()"><a href="URL">site name</a></textarea>
            <h4>credit</h4>
            <ul class="ul-row">
              <li><a href="URL">site name</a></li>
              <li><a href="URL">site name</a></li>
              <li><a href="URL">site name</a></li>
            </ul>
            <h4>bookmark</h4>
            <ul class="ul-row">
              <li><a href="URL">site name</a></li>
              <li><a href="URL">site name</a></li>
              <li><a href="URL">site name</a></li>
            </ul>
          </div>
        </div>
        <h3>rule</h3>
        <div class="flex-wrap">
          <div class="flex-item">
            <h4>ok</h4>
            <ul class="ul-column">
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ul>
          </div>
          <div class="flex-item">
            <h4>ng</h4>
            <ul class="ul-column">
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ul>
          </div>
        </div>
        <h3>contact</h3>
        <form class="form-contact center" action="URL" method="post">
          お返事はblogよりx日以内に行います。メッセージのみ必須です。
          <input type="text" placeholder="Name">
          <input type="text" placeholder="Url / Address">
          <textarea placeholder="Message*" rows="6"></textarea>
          <input type="submit" value="send">
        </form>
      </div>
    </section>
    <section id="main">
      <h2>main</h2>
      <form class="form-oneline center" action="URL" method="post">
        <input class="input-multi" type="text" value="苗字">
        <input class="input-multi" type="text" value="名前">
        <input type="submit" value="ok">
      </form>
      <div class="flex-wrap">
        <div class="flex-item">
          <h3>long</h3>
          <dl class="dl-banner">
            <dt><img src="バナー画像URL" class="banner"><a href="URL" class="banner-title">title</a></dt>
            <dd>sample text</dd>
            <dt><a href="URL"><img src="バナー画像URL" class="banner"></a></dt>
            <dd>
              title<br>
              sample text
            </dd>
            <dt><img src="バナー画像URL" class="banner"></dt>
            <dd>
              <a href="URL">title</a><br>
              sample text
            </dd>
          </dl>
        </div>
        <div class="flex-item">
          <h3>short</h3>
          <h4>xxx</h4>
          <ul class="ul-column">
            <li><a href="URL">title</a></li>
            <li><a href="URL">title</a></li>
            <li><a href="URL">title</a></li>
          </ul>
          <h4>xxx</h4>
          <ul class="ul-row">
            <li><a href="URL">title</a></li>
            <li><a href="URL">title</a></li>
            <li><a href="URL">title</a></li>
          </ul>
        </div>
      </div>
      <h3>plan</h3>
      <dl class="dl-column">
        <dt><a href="URL">title</a></dt>
        <dd>sample text</dd>
        <dt><a href="URL">title</a></dt>
        <dd>sample text</dd>
        <dt><a href="URL">title</a></dt>
        <dd>sample text</dd>
      </dl>
    </section>
    <section id="blog">
      <h2>blog</h2>
      <div class="box">
        ここに注意書き
      </div>
      <div class="flex-wrap">
        
        <article class="justify flex-item">
          <time>
            <span class="month">01</span>
            <span class="day">01</span>
          </time>
          ここに本文
        </article>
        
        
        <article class="justify flex-item">
          <time>
            <span class="month">01</span>
            <span class="day">01</span>
          </time>
          ここに本文
          <div class="right">
            <a href="URL" class="btn">more</a>
          </div>
        </article>
        
        
        <article class="justify flex-item">
          <time>
            <span class="month">01</span>
            <span class="day">01</span>
          </time>
          ここに本文
          <div class="toggle-box">
            ここに折りたたみテキスト
          </div>
          <div class="right">
            <button class="btn toggle-btn">more</button>
          </div>
        </article>
        
      </div>
    </section>
  </main>
  <nav>
    <ul>
      <li class="tab tab-hide"><a href="#index">index</a></li>
      <li class="tab"><a href="#info">information</a></li>
      <li class="tab"><a href="#main">main</a></li>
      <li class="tab"><a href="#blog">blog</a></li>
    </ul>
  </nav>
  <footer>
    <button class="menu-btn">menu</button>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function(){
      size();
      $(window).on("resize", function() {size();});
      function size() {
          var wH = $(window).height();
          var navH = $('nav').outerHeight();
          var secH = wH - navH;
          $('#index').css('height',secH);
      }
    });
 
    $(function() {
      $('.menu-btn').click(function () {
        $('nav').slideToggle();
      });
      $('.tab a').click(function () {
        $('section').removeClass('tab-show');
        $($(this).attr("href")).addClass('tab-show');
        var f_color = $('.tab-show').css('background-color');
        $('footer').css('background-color',f_color);
        $('nav').hide();
        var display = $('#index').hasClass('tab-show');
        if (display == true) {
          $('footer').hide();
          $('nav').css('bottom',0);
          $('nav').show();
          $('.tab').first().addClass('tab-hide');
        } else {
          $('footer').show();
          var menuH = $('footer').outerHeight();
          $('nav').css('bottom',menuH);
          $('.tab').removeClass('tab-hide');
        }
        return false;
      });
    });
 
    $(function() {
      $('.toggle-btn').click(function () {
        $(this).parent().prev().slideToggle();
      });
    });
  </script>
</body>
</html>

css

@charset "UTF-8";
/* disign by tsugumi https://miroirs.stars.ne.jp/ */
/* 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 {
  --base1-color: #f0e9e9;
  --base2-color: #d7c6c6;
  --base3-color: #bea3a3;
  --base4-color: #a48080;
  --base5-color: #8b5d5d;
  --link-color: #0B0B40;
  --text-color: #402b2b;
  --strong-color: #8c0000;
  --white-color: #fff;
  --body-font: 'Lora', 'Noto Serif JP', serif;
  --site-title-font: 'Dawning of a New Day', cursive;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--text-color);
}

html {
  overflow: overlay;
  scrollbar-width: none;
}
/* scrollbar END */
/* selection */
::selection {
  color: var(--white-color);
  background: var(--text-color);
}
/* selection END */
/* body */
body {
  position: relative;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--base1-color);
  font-family: var(--body-font);
  font-size: 14px;
  text-align: left;
  letter-spacing: .18em;
  word-break: break-all;
}
/* body END */
/* headline */
h1 {
  font-family: var(--site-title-font);
  font-size: 44px;
  letter-spacing: 0;
}

h2 {
  position: relative;
  margin-top: 40px;
  font-size: 20px;
  text-align: center;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h2::before {
  position: absolute;
  top: -40px;
  right: 0;
  left: 0;
  width: 1px;
  height: 32px;
  margin: auto;
  background: var(--text-color);
  content: '';
}

h3,
h4,
h5,
h6 {
  font-weight: normal;
}

h3 {
  display: flex;
  align-items: center;
  margin: 16px 0;
  font-size: 20px;
  text-transform: capitalize;
}

h3::after {
  flex-grow: 1;
  margin-left: 8px;
  border-top: .75px solid var(--text-color);
  content: '';
}

h4 {
  display: table;
  position: relative;
  margin: 8px 0;
  padding: 2px 16px;
  font-size: 18px;
}

h4::before,
h4::after {
  position: absolute;
  width: 16px;
  height: 16px;
  content: '';
}

h4::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--text-color);
  border-left: 1px solid var(--text-color);
}

h4::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
}

h5 {
  line-height: 1.15;
  margin: 8px 0;
  padding-left: 8px;
  border-left: 4px solid var(--text-color);
  font-size: 16px;
}

h6 {
  line-height: 1.15;
  margin: 8px 0;
  padding-left: 8px;
  border-left: 6px double var(--text-color);
}
/* headline END */
/* text decoration */
a {
  color: var(--link-color);
}

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

em {
  border-bottom: 4px double var(--text-color);
}

mark {
  display: inline-block;
  line-height: 1.5;
  padding: 0 6px;
}

.mark-01 {
  background: var(--base1-color);
}

.mark-02 {
  background: var(--base2-color);
}

.mark-03 {
  background: var(--base3-color);
}

.mark-04 {
  background: var(--base4-color);
}

.mark-05 {
  background: var(--base5-color);
}

[data-ruby] {
  position: relative;
}

[data-ruby]::before {
  position: absolute;
  top: -1.25em;
  right: 0;
  left: 0;
  margin: auto;
  font-size: .5em;
  text-align: center;
  content: attr(data-ruby);
}

ruby rt {
  display: none;
}

.border-l {
  padding: 0 8px;
  border-left: 4px solid var(--text-color);
}

.border-r {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 4px solid var(--text-color);
}

.border-b {
  margin-right: 8px;
  border-bottom: 1px solid var(--text-color);
}

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

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

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

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

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

.btn {
  display: inline-block;
  line-height: 2;
  margin: 4px 0;
  padding: 0 8px;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,.25);
  color: var(--text-color);
  text-decoration: none;
}
/* text decoration END */
/* align */
.justify {
  text-align: justify;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
/* align END */
/* box */
.box {
  position: relative;
  overflow: visible;
  margin: 8px auto;
  padding: 16px;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,.25) inset;
}

.box::before,
.box::after {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  content: '';
}

.box::before {
  top: -4px;
  left: -4px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.25));
}

.box::after {
  right: -4px;
  bottom: -4px;
  filter: drop-shadow(-.5px -.5px 0px rgba(0,0,0,.25));
}

.box-01::before {
  background: linear-gradient(to top left, transparent 50% , var(--base1-color) 50%);
}

.box-01::after {
  background: linear-gradient(to bottom right, transparent 50% , var(--base1-color) 50%);
}

.box-02::before {
  background: linear-gradient(to top left, transparent 50% , var(--base2-color) 50%);
}

.box-02::after {
  background: linear-gradient(to bottom right, transparent 50% , var(--base2-color) 50%);
}

.box-03::before {
  background: linear-gradient(to top left, transparent 50% , var(--base3-color) 50%);
}

.box-03::after {
  background: linear-gradient(to bottom right, transparent 50% , var(--base3-color) 50%);
}

.box-04::before {
  background: linear-gradient(to top left, transparent 50% , var(--base4-color) 50%);
}

.box-04::after {
  background: linear-gradient(to bottom right, transparent 50% , var(--base4-color) 50%);
}

.box-05::before {
  background: linear-gradient(to top left, transparent 50% , var(--base5-color) 50%);
}

.box-05::after {
  background: linear-gradient(to bottom right, transparent 50% , var(--base5-color) 50%);
}

.scroll-box {
  height: 160px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.scroll-box::-webkit-scrollbar {
  width: 2px;
  height: 100%;
}

.box-title {
  display: block;
  margin: 8px auto;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.copy-box {
  display: block;
  width: 100%;
}
/* box END */
/* details */
details summary {
  display: inline-block;
  border-bottom: 1px solid var(--text-color);
}

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

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] summary::before {
  transform: rotate(90deg);
}

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

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

100% {
    opacity: 1;
    transform: none;
  }
}
/* details END */
/* quote */
q,
blockquote,
cite {
  font-style: italic;
}

q::before,
q::after {
  display: inline;
  content: '"';
}

.quote-icon {
  position: absolute;
  top: 0;
  left: 0;
}

cite {
  display: block;
  text-align: right;
  font-size: 10px;
}
/* quote END */
/* list */
.ol-row,
.ol-column,
.ul-row,
.ul-column,
.dl-banner,
.dl-row,
.dl-column {
  padding: 8px 0;
}

.ol-row,
.ol-column {
  list-style-type: decimal-leading-zero;
}

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

.ol-row li,
.ol-column li {
  margin-left: 32px;
}

.ol-row li {
  margin-right: 8px;
}

.ul-row li {
  display: inline-block;
}

.ul-row li:not(:last-child)::after {
  display: inline;
  padding-left: 4px;
  content: '||';
}

.ul-column {
  margin-left: 12px;
  list-style-type: disc;
}

.ul-column li::marker {
  font-size: 75%;
}

.dl-banner dt {
  display: table;
  position: relative;
  padding: 4px;
  border: 1px solid var(--text-color);
  text-align: center;
}

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

.banner {
  display: block;
  width: 200px;
  height: 40px;
  object-fit: contain;
}

.dl-banner dd {
  margin: 4px 0 4px 16px;
}

.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;
}

.dl-row dt {
  float: left;
  margin-right: 4px;
}

.dl-row dt::after {
  display: inline-block;
  padding-left: 4px;
  content: '||';
}

.dl-column dd {
  margin-left: 8px;
}
/* list END */
/* table */
.table-wrapper {
  width: 100%;
  overflow-x: scroll;
  margin: 16px auto;
  padding-bottom: 2px;

scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}

.table-wrapper::-webkit-scrollbar {
  width: 100%;
  height: 2px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--text-color);
}

table {
  min-width: calc(100% - 1px);
  text-align: center;
  white-space: nowrap;
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid var(--text-color);
}

table th {
  color: var(--white-color);
  background: var(--text-color);
}

table th,
table td {
  line-height: 2;
  padding: 4px 16px;
}
/* table END */
/* form */
form {
  padding: 16px 0;
}

input,
textarea,
select {
  line-height: inherit;
  padding: 16px;
  color: var(--text-color);
  background: transparent;
  font-family: 'Font Awesome 5 Free', var(--body-font);
  font-size: 100%;
  text-align: justify;
  letter-spacing: .2em;
}

[type="text"],
textarea,
select {
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,.25) inset;
}

[type="submit"] {
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,.25);
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

label {
  display: block;
  position: relative;
  margin: 5px 0;
}

[type="checkbox"] + label::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border: 1px solid var(--text-color);
  content: '';
}

[type="checkbox"]:checked + label::after {
  display: inline-block;
  position: absolute;
  top: 9px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: var(--text-color);
  content: '';
}

[type="radio"] + label::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border: 1px solid var(--text-color);
  border-radius: 50% 50%;
  content: '';
}

[type="radio"]:checked + label::after {
  display: inline-block;
  position: absolute;
  top: 9px;
  left: 3px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--text-color);
  border-radius: 50% 50%;
  background: var(--text-color);
  content: '';
}

::placeholder {
  color: var(--text-color);
  opacity: .75;
}

.form-contact input,
.form-contact textarea,
.form-contact select {
  width: 100%;
  margin: 8px auto;
}

.form-contact input[type="submit"] {
  text-align: center;
  letter-spacing: 4px;
}

.form-oneline input,
.form-oneline select,
.form-oneline textarea {
  vertical-align: top;
  overflow-x: hidden;
}

.input-single,
.form-oneline select,
.form-oneline textarea {
  width: calc(100% - 60px);
  max-width: 340px;
}

.input-multi {
  width: calc((100% - 66px) / 2);
  max-width: 167px;
}
/* form END */
/* semantic elements */
section {
  display: none;
  overflow-y: scroll;
  margin: 0 auto;
  padding: 32px 24px;
}

.index-wrap {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

section:not(#index) {
  min-height: calc(100vh - 34px);
}

article {
  margin: 32px 0;
}

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.tab-show {
  display: block;
}

.tab-hide {
  display: none;
}

.tab {
  padding: 4px 0;
  text-align: center;
}

.tab a {
  display: block;
  color: var(--text-color);
  text-decoration: none;
}

.tab:nth-child(1),
section:nth-child(1) {
  background: var(--base1-color);
}

.tab:nth-child(2),
section:nth-child(2) {
  background: var(--base2-color);
}

.tab:nth-child(3),
section:nth-child(3) {
  background: var(--base3-color);
}

.tab:nth-child(4),
section:nth-child(4) {
  background: var(--base4-color);
}

.tab:nth-child(5),
section:nth-child(5) {
  background: var(--base5-color);
}

footer {
  display: none;
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 100%;
  box-shadow: 0px -4px 4px 0px rgba(0,0,0,.1);
  text-align: center;
}

.menu-btn {
  width: 100%;
  padding: 8px 0;
}
/* semantic elements END */
/* blog parts */
time {
  display: block;
  position: relative;
  float: left;
  width: 64px;
  height: 64px;
  margin: 0 8px 8px 0;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,.25) inset;
  font-size: 16px;
  text-align: center;
}

time::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 32px;
  margin: auto;
  background: var(--text-color);
  content: '';
  transform: rotate(45deg);
}

time::after {
  display: block;
  clear: both;
  content: '';
}

.month {
  position: absolute;
  top: 4px;
  left: 8px;
}

.day {
  position: absolute;
  right: 8px;
  bottom: 4px;
}

.toggle-box {
  display: none;
}
/* blog parts END */
/* tablet & pc */
@media screen and (min-width: 768px) {
  section {
    padding: 32px calc((100% - 768px) / 2);
  }
  .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

.flex-item {
    width: calc(50% - 30px);
  }
}
/* tablet & pc END */

parts

マーク、マーカー風パーツ、ボックス(角隠し)、スクロールボックス(角隠し)、引用(長)にはカラーバリエーションがあります。
hoge-01の数字部分を変更してください。05まであります。

各パーツ

2カラム

見出しレベル2

見出しレベル3

見出しレベル4

見出しレベル5

見出しレベル6

リンク

太字

斜体

削除

重要

強調

マーク

ルビ

左横線

右横線

下線

マーカー風

ボタン風

両端揃え

中央揃え

右揃え

水平線

ボックス(通常)

ボックス(角隠し)

スクロールボックス(通常)

スクロールボックス(角隠し)

折りたたみボックス

コピーボックス

引用(短)

引用(長)

順序付きリスト - 横並び

順序付きリスト - 縦並び

順序なしリスト - 横並び

順序なしリスト - 縦並び

説明リスト - バナー

説明リスト - 横並び

説明リスト - 縦並び

表 - 横並び

連絡用フォーム

<form class="form-contact" action="" method="post">
  
  <input name="" type="text" placeholder="項目名">
  
  
  <input id="check-01" name="check-item" type="checkbox">
  <label for="check-01">項目名</label>
  <input id="check-02" name="check-item" type="checkbox">
  <label for="check-02">項目名</label>
  <input id="check-03" name="check-item" type="checkbox">
  <label for="check-03">項目名</label>
  
  
  <input id="radio-01" name="radio-item" type="radio">
  <label for="radio-01">項目名</label>
  <input id="radio-02" name="radio-item" type="radio">
  <label for="radio-02">項目名</label>
  <input id="radio-03" name="radio-item" type="radio">
  <label for="radio-03">項目名</label>
  
  
  <h5>選択</h5>
  <select name="">
    <option disabled selected value>選択してください</option>
    <option value="">項目名</option>
    <option value="">項目名</option>
    <option value="">項目名</option>
  </select>
  
  
  <h5>テキストエリア</h5>
  <textarea placeholder="メッセージ" rows="6"></textarea>
  
  
  <input type="submit" value="送信">
  
</form>

一行フォーム - input/テキスト(単体)

一行フォーム - input/テキスト(複数)

一行フォーム - 選択

一行フォーム - テキストエリア

クレジットの表示

デザインの関係で当テンプレートではファーストビューにクレジットを設置しています。気になるようでしたらinformationセクション等の別の場所に移していただいて構いません。

検索避けタグ

当サイトのテンプレートでは、全てのテンプレートに検索避けのmetaタグを挿入しています。
検索避けが不要な方はhtmlの下記のコードを削除してください。


                          <meta name="robots" content="noindex,nofollow">
              <meta name="googlebot" content="noindex,nofollow">

GoogleChrome(スマートフォン版)のタブ色

Chrome(スマートフォン版)のタブ色を設定しています。各head内にある下記のカラーコードを変更するとタブ色が変更できます。


                          <meta name="theme-color" content="#f0e9e9">

色とフォントの管理

色とフォントは各cssの:root{}部分で管理をしています。色やフォントを変更したい場合は:root{}内の値を変えると該当部分の色やフォントが全て変わります。

ブラウザ別スクロールバー

Chrome / Opera / Edge : スクロールバー背景が透過されます。
Firefox : スクロールバー背景を透過させることが出来ませんでしたので、スクロールバーを非表示にしています。解決策が見つかり次第、修正します。
Safari : スクロールバーがカスタマイズ不可となっているため、ブラウザデフォルトのスクロールバーになっています。

Safari - summaryアニメーションのバグ

Safariではsummaryの開閉時アニメーションが一度きりしか動作しないというバグがあるそうです。現在、解決策が見つかりませんのでそのままになっています。解決策が見つかり次第、修正します。

説明リスト - バナー

展示ではバナーをお借りして表示していますが、バナーサイズ(200×40)ではない画像も自動的にバナーサイズにトリミングされます。

パーツのカラーバリエーション

マーク、マーカー風、ボックス(角隠し)、スクロールボックス(角隠し)、引用(長)は各セクションの背景色と同色(計5色)を用意しています。
マーク、マーカー風は背景と同色にすると、背景と一体化してしまうので該当セクションとは違う色のマーク、マーカー風装飾を使用してください。
ボックス、スクロールボックス、引用(長)は背景と同色にすることによって切れ込みがあるように見せています。他の色も使えますが、背景と同色で使用することを推奨します。

labelタグの使い方

labelタグはinputタグと紐付けさせることが出来ます。例えば、ラベルが未設定のチェックボックスはチェックボックス自体をクリックしなければ選択することが出来ません。 labelタグで紐付けることによって、labelタグ自体をクリックしても紐づけられた入力欄がフォーカスされます。
また、主にチェックボックスやラジオボタンの装飾をする際にlabelタグがよく使われ、当サイトのテンプレートも例外ではありません。
<input id="hoge" type="checkbox">
<label for="hoge">項目名</label>
上記のようにinputのidとlabelのforを同じ値にするとinputとlabelが紐付けされ、labelをクリックしても紐付けたinputがフォーカスされるようになります。
idはclassと違い、各ページで一度きりしか使用してはいけません。複数記述があると動作しなくなります。ご注意ください。

nano & XRIE/XRIA - 改行

自動改行をしない設定であることを前提に作っています。
nano : ホムペ設定 > その他共通設定 > 改行を<br>に変換して表示をしない
XRIE/XRIA : 各編集ボックス直下の自動改行しないにチェック
に設定をお願いします。

nano & XRIE/XRIA - headとbody

レンタルスペースではheadとbodyを分離して記述する仕様のため、また外部ファイルを読み込むことができないので
<head></head>の中身
→HEAD・HTML詳細(nano)
→HEAD間編集(XRIE/XRIA)
<body></body>の中身
→◯◯レイアウト(nano)
→ページ編集(XRIE/XRIA)
に記述してください。
また、<link rel="stylesheet" type="text/css" href="ファイル名.css">は


                          <style>
              ここに配布css
              </style>

と置き換えてください。

nano - 一万文字を超えるソースコード

nanoではHEAD・HTML詳細のHEAD内の文字数が一万文字を超えるとエラーを起こしてしまいます。
回避方法としては、

定型文への登録をし、HEAD内に定型文の独自タグを設置する
不要なコメントアウト・改行・スペースを削除する

があります。定型文への登録の方が手間もかからず、管理もしやすいので定型文への登録を推奨します。
定型文の登録は管理者画面トップページ > 定型文 > 定型文の追加から出来ます。#stamp_登録した定型文名#で表示します。

nano - 各フォームカスタム

名前変換


                          <form action="/yourID/novel/N/dream" method="post">
                <input type="text" name="DreamID[1]" value="苗字">
                <input type="text" name="DreamID[2]" value="名前">
                <input type="submit" name="set" value="変換">
                <input type="submit" name="clear" value="消去">
              </form>

valueの値は夢(ドリーム)小説設定>並び替えから確認出来ます。上から1,2,3...と割り振られます。

フォームメール

各タグの横に対応する独自タグを記載しています。です。

プレビュー有


                          <form action="/yourID/form/N/preview" method="post"><!-- #formStart# -->
                一行テキスト
                <input name="Item[1]" value="" type="text"><!-- #formInput1# -->
                複数行テキスト
                <textarea name="Item[2]"></textarea><!-- #formInput2# -->
                ラジオボタン
                <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# -->
                <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# -->
                <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# -->
                チェックボックス
                <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# -->
                <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# -->
                <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# -->
                プルダウン(セレクト)
                <select name="Item[5]"><!-- #formInput5# -->
                  <option value="選択肢名1">選択肢名1</option>
                  <option value="選択肢名2">選択肢名2</option>
                  <option value="選択肢名3">選択肢名3</option>
                </select>
                <input type="submit" value="送信"><!-- #formSubmit_送信# -->
              </form><!-- #formEnd# -->

プレビュー無


                          <form action="/yourID/form/N/posted" method="post"><!-- #formStart# -->
                一行テキスト
                <input name="Item[1]" value="" type="text"><!-- #formInput1# -->
                複数行テキスト
                <textarea name="Item[2]"></textarea><!-- #formInput2# -->
                ラジオボタン
                <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# -->
                <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# -->
                <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# -->
                チェックボックス
                <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# -->
                <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# -->
                <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# -->
                プルダウン(セレクト)
                <select name="Item[5]"><!-- #formInput5# -->
                  <option value="選択肢名1">選択肢名1</option>
                  <option value="選択肢名2">選択肢名2</option>
                  <option value="選択肢名3">選択肢名3</option>
                </select>
                <input type="submit" value="送信"><!-- #formSubmit_送信# -->
              </form><!-- #formEnd# -->

項目追加・編集の項目タイプと各タグの対応

自由入力一行 ⇔ <input name="Item[N]" value="" type="text">
自由入力(複数行) ⇔ <textarea name="Item[N]"></textarea>
選択肢(ﾗｼﾞｵﾎﾞﾀﾝ) ⇔ <input name="Item[N]" value="選択肢名" type="radio">選択肢名
選択肢(ﾁｪｯｸﾎﾞｯｸｽ) ⇔ <input name="Item[N][N']" value="選択肢名" type="checkbox">選択肢名
選択肢(ﾌﾟﾙﾀﾞｳﾝ) ⇔ <select name="Item[N]"><option value="選択肢名">選択肢名</option></select>

Item[N]の確認

項目並び替えから確認出来ます。上から1,2,3...と割り振られます。
checkboxの[N']は登録している選択肢の左から1,2,3...と割り振られます。

拍手

ボタンのみ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <input type="submit" value="拍手">
              </form>

一行テキストタイプ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <input type="text" name="Message" value="">
                <input type="submit" value="拍手">
              </form>

セレクトタイプ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <select name="Message">
                  <option>テキスト1</option>
                  <option>テキスト2</option>
                  <option>テキスト3</option>
                </select>
                <input type="submit" value="拍手"/>
              </form>

リンクタイプ


                          <a href="/yourID/clap/N/?ResultOrder=1">拍手</a>

アンケート


                          <form action="/yourID/enq/N/vote" method="post">
                <input type="radio" name="DataID" value="1">項目1
                <input type="radio" name="DataID" value="2">項目2
                投票理由:<input type="text" name="Reason">
                <input type="submit" value="投票">
              </form>

項目のinputのvalueは項目並び替えで確認出来ます。上から1,2,3...と割り振られます。

XRIE/XRIA - 小説URL

小説本文ページのURLは記事の管理 > 各記事編集ページの下部にあるこの記事の変化しないURLが本文ページのURLになります。
名前変換機能を利用している場合はその後ろに#drm_q#を加えてください。以下は例になります。


                          <a href="http://#id#.N.novel.r.xria.biz/?guid=on&t=0000#drm_q#">タイトル</a>

XRIE/XRIA - 各フォームカスタム

名前変換

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.novel.d.xria.biz/?guid=on" method="post">
                <input type="text" name="n1" value="苗字">
                <input type="text" name="n2" value="名前">
                <input type="submit" value="変換">
                <input type="hidden" name="mode" value="set">
                <input type="hidden" name="page_pass" value="">
              </form>

valueの値は人物名自由設定から確認出来ます。上からn1,n2,n3...と割り振られます。

メールボックス

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.mailbox.xria.biz/?guid=on" method="post">
                タイトル
                <input type="text" name="subject" value="">
                名前
                <input type="text" name="name" value="">
                サイトURL
                <input type="text" name="url" value="http://">
                メールアドレス
                <input type="text" name="email" value="">
                メッセージ
                <textarea cols="30" name="message"></textarea>
                <input type="submit" value="送信">
                <input type="hidden" name="mode" value="send">
                <input type="hidden" name="page_pass" value="">
              lt;/form>

拍手

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。

ボタンのみ


                          <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post">
                <input type="submit" value="拍手">
                <input type="hidden" name="req" value="%request%">
              </form>

一行テキストタイプ


                          <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post">
                <input type="text" name="msg">
                <input type="submit" value="拍手">
                <input type="hidden" name="mode" value="s">
                <input type="hidden" name="req" value="%request%">
              </form>

リンクタイプ


                          <a href="http://#id#.N.clap.xria.biz/?guid=on&req=%erequest%">拍手</a>

アンケート

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.enq.p.xria.biz/?guid=on" method="post">
                <input type="radio" name="t" value="N">項目1
                <input type="radio" name="t" value="N">項目2
                名前
                <input type="text" name="name">
                コメント
                <input type="text" name="message">
                <input type="submit" value="投票">
                <input type="hidden" name="page_pass" value="">
              </form>

投票項目のvalueは投票ページのソースコードから確認してください。
PCは右クリック→ページのソースを表示(ブラウザによって名称の違いがあります)、スマートフォンはスマホ向けWebページの検証を行う方法からご確認ください。