echo

info
credit
code
custom

demo グラスモーフィズムを使用した1ページ完結型のテンプレートです。
背景にcssアニメーションを使用しました。

2023.04.30一部素材差し替え
2022.11.14ver 1.0.1 - クレジット修正・背景アニメーション改善
2021.09.20Release

material

banner / texture: suiren様より
バナー - 10,000hit記念企画ログ - Q.1 Result & Banner - サイケデリック
おまけ - Texture - 10000hit Q1 // サイケデリック
texture No.001
banner No.001-1
banner No.001-2
banner No.001-3
配布元レンタルスペースのサービス終了のため幣サイト素材に差し替えました。

sample text

日本語サンプルテキスト: 青空文庫様より
音に就いて著者：太宰治

font

Lora / Playfair Display SC / Shippori Mincho: Google Fonts様より
Lora
Playfair Display SC
Shippori Mincho
Font Awesome 5 Free: Font Awesome様

code

nanoのスマホ向け自動出力CSSの消去: sikaku様より
ナノのスマホ向け自動出力CSSの消去
※管理人の飯様より再配布の許可をいただいております。
リセットcss(改変元): Richard Clark様より
HTML5 Reset Stylesheet
ライセンス : MIT License
スムーズスクロール(改変元): 125naroom様より
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
グラデーションアニメーション(改変元): CodePen様より
gradation-animation by aochaan
キューブアニメーション(改変元): CodePen様より
Pure Css Animated Background by Mohammad Abdul Mohaiman
区切り線 / 見出しレベル2 / 見出しレベル3 (改変元): coliss様より
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

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="#fff">
                  <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=Josefin+Sans&family=Montserrat&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>
                  <div id="bg"></div>
                  <div class="cube-wrapper">
                    <ul class="cubes">
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </div>
                  <header id="top">
                    <div class="fv-wrapper">
                      <h1>site title</h1>
                      <nav>
                        <ul class="ul-menu">
                          <li><a href="#info"><i class="fas fa-question-circle menu-icon"></i><span class="menu-text">info</span></a></li>
                          <li><a href="#main"><i class="fas fa-book menu-icon"></i><span class="menu-text">main</span></a></li>
                          <li><a href="#contact"><i class="fas fa-envelope menu-icon"></i><span class="menu-text">contact</span></a></li>
                        </ul>
                        <ul class="ul-row">
                          <li><a href="URL">rank</a></li>
                          <li><a href="URL">rank</a></li>
                        </ul>
                      </nav>
                    </div>
                  </header>
                  <div class="content-wrapper">
                    <main>
                      <section id="info">
                        <h2><span>information</span></h2>
                        <h3>introduction</h3>
                        ここに内容
                        <div class="box">
                          <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>xxxx.xx.xx-</dd>
                          </dl>
                        </div>
                        <h3>link</h3>
                        <h4>me</h4>
                        link free
                        <textarea class="copy-box" rows="1" onclick="this.select()"><a href="http://xxx.xx.xxx/">site name</a></textarea>
                        <div class="flex-wrapper">
                          <div class="flex-item">
                            <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>
                          </div>
                          <div class="flex-item">
                            <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-wrapper">
                          <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>
                      </section>
                      <section id="main">
                        <h2><span>main</span></h2>
                        <form class="form-oneline center" action="URL" method="post">
                          <input type="text" class="input-multi" value="苗字">
                          <input type="text" class="input-multi" value="名前">
                          <input type="submit" value="◯">
                        </form>
                        <h3>long</h3>
                        <div class="flex-wrapper">
                          <div class="card">
                            <img src="画像URL" class="card-img">
                            <div class="caption">
                              <a href="URL" class="caption-title">title</a>
                              ここに内容
                            </div>
                          </div>
                          <div class="card">
                            <img src="画像URL" class="card-img">
                            <div class="caption">
                              <a href="URL" class="caption-title">title</a>
                              ここに内容
                            </div>
                          </div>
                          <div class="card">
                            <img src="画像URL" class="card-img">
                            <div class="caption">
                              <a href="URL" class="caption-title">title</a>
                              ここに内容
                            </div>
                          </div>
                        </div>
                        <h3>short</h3>
                        <div class="flex-wrapper">
                          <div class="flex-item">
                            <h4>genre</h4>
                            <dl class="dl-column">
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                            </dl>
                          </div>
                          <div class="flex-item">
                            <h4>genre</h4>
                            <dl class="dl-column">
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                              <dt>character name</dt>
                              <dd>
                                <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>
                              </dd>
                            </dl>
                          </div>
                        </div>
                        <h3>plan</h3>
                        <dl class="dl-banner flex-wrapper">
                          <div class="flex-item">
                            <dt><a href="URL" class="banner-title">title</a><img src="画像URL" class="banner"></dt>
                            <dd>ここに内容</dd>
                          </div>
                          <div class="flex-item">
                            <dt><a href="URL"><img src="画像URL" class="banner"></a></dt>
                            <dd>
                              title<br>
                              ここに内容
                            </dd>
                          </div>
                          <div class="flex-item">
                            <dt><img src="画像URL" class="banner"></dt>
                            <dd>
                              <a href="URL">title</a><br>
                              ここに内容
                            </dd>
                          </div>
                        </dl>
                      </section>
                      <section id="contact">
                        <h2><span>contact</span></h2>
                        <form class="form-contact center" action="URL" method="post">
                          <input type="text" placeholder="name">
                          <input type="text" placeholder="address/url">
                          <textarea rows="6" placeholder="message"></textarea>
                          <input type="submit" value="send">
                        </form>
                      </section>
                    </main>
                    <footer>
                      <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                    </footer>
                  </div>
                  <a href="#top" class="jump-btn">top</a>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                  <script>
                    $(function() {
                      $('a[href^="#"]').click(function () {
                        var speed = 1000;
                        var href= $(this).attr("href");
                        var target = $(href == "#" || href == "" ? 'html' : href);
                        var position = target.offset().top;
                        $('body,html').animate({scrollTop:position}, speed, 'swing');
                        return false;
                      });
                    });
                
                    $(function () {
                      var upper = $('.jump-btn');
                      $(window).scroll(function () {
                        var main = $('main').offset().top;
                        if ($(this).scrollTop() > main) {
                          upper.fadeIn();
                        } else {
                          upper.fadeOut();
                        }
                      });
                    });
                  </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="#fff">
  <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=Josefin+Sans&family=Montserrat&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>
  <div id="bg"></div>
  <div class="cube-wrapper">
    <ul class="cubes">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <header id="top">
    <div class="fv-wrapper">
      <h1>site title</h1>
      <nav>
        <ul class="ul-menu">
          <li><a href="#info"><i class="fas fa-question-circle menu-icon"></i><span class="menu-text">info</span></a></li>
          <li><a href="#main"><i class="fas fa-book menu-icon"></i><span class="menu-text">main</span></a></li>
          <li><a href="#contact"><i class="fas fa-envelope menu-icon"></i><span class="menu-text">contact</span></a></li>
        </ul>
        <ul class="ul-row">
          <li><a href="">rank</a></li>
          <li><a href="">rank</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="content-wrapper">
    <main>
      <section id="info">
        <h2><span>information</span></h2>
        <h3>introduction</h3>
        ここに内容
        <div class="box">
          <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>xxxx.xx.xx-</dd>
          </dl>
        </div>
        <h3>link</h3>
        <h4>me</h4>
        link free
        <textarea class="copy-box" rows="1" onclick="this.select()"><a href="http://xxx.xx.xxx/">site name</a></textarea>
        <div class="flex-wrapper">
          <div class="flex-item">
            <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>
          </div>
          <div class="flex-item">
            <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-wrapper">
          <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>
      </section>
      <section id="main">
        <h2><span>main</span></h2>
        <form class="form-oneline center" action="URL" method="post">
          <input type="text" class="input-multi" value="苗字">
          <input type="text" class="input-multi" value="名前">
          <input type="submit" value="◯">
        </form>
        <h3>long</h3>
        <div class="flex-wrapper">
          <div class="card">
            <img src="画像URL" class="card-img">
            <div class="caption">
              <a href="URL" class="caption-title">title</a>
              ここに内容
            </div>
          </div>
          <div class="card">
            <img src="画像URL" class="card-img">
            <div class="caption">
              <a href="URL" class="caption-title">title</a>
              ここに内容
            </div>
          </div>
          <div class="card">
            <img src="画像URL" class="card-img">
            <div class="caption">
              <a href="URL" class="caption-title">title</a>
              ここに内容
            </div>
          </div>
        </div>
        <h3>short</h3>
        <div class="flex-wrapper">
          <div class="flex-item">
            <h4>genre</h4>
            <dl class="dl-column">
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
            </dl>
          </div>
          <div class="flex-item">
            <h4>genre</h4>
            <dl class="dl-column">
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
              <dt>character name</dt>
              <dd>
                <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>
              </dd>
            </dl>
          </div>
        </div>
        <h3>plan</h3>
        <dl class="dl-banner flex-wrapper">
          <div class="flex-item">
            <dt><a href="URL" class="banner-title">title</a><img src="画像URL" class="banner"></dt>
            <dd>ここに内容</dd>
          </div>
          <div class="flex-item">
            <dt><a href="URL"><img src="画像URL" class="banner"></a></dt>
            <dd>
              title<br>
              ここに内容
            </dd>
          </div>
          <div class="flex-item">
            <dt><img src="画像URL" class="banner"></dt>
            <dd>
              <a href="URL">title</a><br>
              ここに内容
            </dd>
          </div>
        </dl>
      </section>
      <section id="contact">
        <h2><span>contact</span></h2>
        <form class="form-contact center" action="URL" method="post">
          <input type="text" placeholder="name">
          <input type="text" placeholder="address/url">
          <textarea rows="6" placeholder="message"></textarea>
          <input type="submit" value="send">
        </form>
      </section>
    </main>
    <footer>
      <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
    </footer>
  </div>
  <a href="#top" class="jump-btn">top</a>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('a[href^="#"]').click(function () {
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
      });
    });

$(function () {
      var upper = $('.jump-btn');
      $(window).scroll(function () {
        var main = $('main').offset().top;
        if ($(this).scrollTop() > main) {
          upper.fadeIn();
        } else {
          upper.fadeOut();
        }
      });
    });
  </script>
</body>
</html>

css

@charset "UTF-8";
/* disign by tsugumi https://miroirs.stars.ne.jp/ */
/*
Copyright (c) 2022 by aochan (https://codepen.io/aochaan/pen/MvzNJw)

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.
*/
/* 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 {
  --bg-color: linear-gradient(124deg, hsl(345, 100%, 40%), hsl(15, 100%, 40%), hsl(45, 100%, 40%));
  --glass-bg: rgba(255,255,255,.1);
  --glass-border: 3px solid rgba(255,255,255,.2);
  --glass-shadow: 0 5px 20px rgba(0,0,0,.25);
  --glass-blur: blur(10px);
  --selection-color: rgba(255,255,255,.5);
  --strong-color: #fc6888;
  --text-color: #fff;
  --body-font: 'Montserrat', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --headline-font: 'Josefin Sans', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

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

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

html {
  overflow: overlay;
  scrollbar-width: none;
}
/* scrollbar END */
/* selection */
::selection {
  background: var(--selection-color);
}
/* selection END */
/* body */
body {
  line-height: 1.8;
  overflow-y: scroll;
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: 14px;
  text-align: left;
  letter-spacing: .2em;
  word-break: break-all;
}

#bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-color);
  background-size: 1000%;
  background-attachment: fixed;
  animation: rainbow 15s infinite alternate;
}

@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg);
  }

100% {
    filter: hue-rotate(360deg);
  }
}

.cubes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.cubes li {
  display: block;
  position: absolute;
  bottom: -150px;
  width: 20px;
  height: 20px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  list-style: none;
  animation: float 25s linear infinite;
}

.cubes li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.cubes li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-duration: 12s;
  animation-delay: 2s;
}

.cubes li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.cubes li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-duration: 18s;
  animation-delay: 0s;
}

.cubes li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.cubes li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.cubes li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.cubes li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-duration: 45s;
  animation-delay: 15s;
}

.cubes li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-duration: 35s;
  animation-delay: 2s;
}

.cubes li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-duration: 11s;
  animation-delay: 0s;
}

@keyframes float {
  0% {
    border-radius: 0;
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-1000px) rotate(720deg);
  }
}
/* body END */
/* headline */
h1 {
  display: table;
  position: relative;
  margin: 32px auto;
  padding: 0 32px;
  font-family: var(--headline-font);
  font-weight: normal;
  font-size: 32px;
  text-align: center;
  letter-spacing: .05em;
}

h1::after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 4px;
  margin: auto;
  background: var(--text-color);
  content: '';
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--headline-font);
  font-weight: normal;
  text-align: center;
}

h2 {
  display: flex;
  align-items: center;
  margin: 32px 0;
  font-size: 22px;
}

h2 span {
  display: inline-block;
  padding: 0 16px;
  border-right: 3px solid var(--text-color);
  border-left: 3px solid var(--text-color);
}

h2::before,
h2::after {
  height: 3px;
  flex-grow: 1;
  background: var(--text-color);
  content: "";
}

h3 {
  display: flex;
  align-items: center;
  margin: 16px auto;
  font-size: 20px;
}

h3::before,
h3::after {
  height: 2px;
  flex-grow: 1;
  background: var(--text-color);
  content: "";
}

h3::before {
  margin-right: 8px;
}

h3::after {
  margin-left: 8px;
}

h4 {
  margin: 16px auto;
  border-bottom: thin solid var(--text-color);
  font-size: 18px;
}

h5 {
  position: relative;
  margin: 4px 0;
  padding-left: 8px;
  border-left: 3px solid var(--text-color);
  font-size: 16px;
  text-align: left;
}

h6 {
  display: table;
  margin: 4px 0;
  border-bottom: 1px solid var(--text-color);
}
/* headline END */
/* text decoration */
a {
  color: var(--link-color);
}

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

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

mark {
  display: inline-block;
  line-height: 1.25;
  padding: 0 6px;
  color: var(--text-color);
  background: rgba(255,255,255,.25);
}

[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-a {
  position: relative;
  margin-right: 48px;
}

.border-a::after {
  position: absolute;
  top: 50%;
  right: -40px;
  width: 32px;
  height: 1px;
  background: var(--text-color);
  content: '';
}

.marker {
  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.25) 60%);
}

.btn {
  display: inline-block;
  line-height: 1.8;
  padding: 0 8px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  color: var(--text-color);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* text decoration END */
/* align */
.justify {
  text-align: justify;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
/* align END */
/* separator */
hr {
  width: 216px;
  margin: 16px auto;
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="rgba(255,255,255,1)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
/* line END */
/* box */
.box,
.scroll-box {
  margin: 16px auto;
  padding: 16px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.scroll-box {
  height: 160px;
  overflow-y: scroll;
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}

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

.copy-box {
  display: block;
  width: 100%;
  max-width: 400px;
}
/* box END */
/* quote */
q,
blockquote,
cite {
  font-style: italic;
}

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

blockquote {
  position: relative;
  margin: 16px auto;
  padding: 40px 16px 16px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

blockquote::before {
  display: block;
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  padding-bottom: 16px;
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  text-align: center;
  content: '\f10d';
}

cite {
  display: block;
  font-size: 10px;
  text-align: right;
}
/* quote END */
/* details */
details summary {
  display: inline-block;
  border-bottom: 2px 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: .5s;
}

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

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

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

100% {
    opacity: 1;
    transform: none;
  }
}
/* details END */
/* list */
.ol-column,
.ul-row,
.ul-column,
.dl-banner,
.dl-row,
.dl-column {
  padding: 16px auto;
}

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

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

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

.ol-row li::marker,
.ol-column li::marker {
  font-size: 12px;
}

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

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

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

.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;
  object-fit: contain;
}

.dl-banner dd {
  margin: 4px 0 32px 16px;
  padding-left: 8px;
  border-left: 2px solid var(--text-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(--text-color);
  font-weight: bold;
  text-decoration: none;
}

.dl-row dt {
  float: left;
}

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

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

.dl-column dd {
  margin-left: 12px;
}
/* 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 th,
table td {
  line-height: 2;
  padding: 4px 16px;
}

table th {
  font-family: var(--headline-font);
}

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

table tr:first-child {
  border: 2px solid var(--text-color);
}
/* table END */
/* form */
form {
  padding: 16px 0;
}

input,
textarea,
select {
  line-height: inherit;
  padding: 8px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  color: var(--text-color);
  background: var(--glass-bg);
  font-family: var(--body-font);
  text-align: justify;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

option {
  color: #000;
}

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

label {
  display: block;
  position: relative;
  padding-left: 20px;
}

[type="checkbox"] + label::before,
[type="radio"] + label::before {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  margin-right: 8px;
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  color: var(--text-color);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  content: '';
}

[type="checkbox"] + label::before {
  border-radius: 4px;
}

[type="radio"] + label::before {
  border-radius: 50%;
}

[type="checkbox"]:checked + label::after {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 4px;
  width: 10px;
  height: 4px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  content: '';
  transform: rotate(315deg);
}

[type="radio"]:checked + label::after {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  content: '';
}

::placeholder {
  color: var(--text-color);
}

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

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

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

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

.input-multi {
  width: calc((100% - 58px) / 2);
  max-width: 171px;
}
/* form END */
/* semantic elements */
header {
  display: flex;
  position: relative;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.fv-wrapper {
  position: relative;
  z-index: 1;
  width: calc(100% - 64px);
  max-width: 520px;
  margin: auto;
  padding: 16px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px auto;
  text-align: center;
}

nav ul li a {
  text-decoration: none;
}

.ul-menu li {
  width: 64px;
  height: 64px;
  margin: 8px 16px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.menu-icon {
  display: block;
  line-height: 40px;
  font-size: 16px;
}

.menu-text {
  display: block;
  line-height: 24px;
  font-size: 10px;
  letter-spacing: 1px;
}

.content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}

main {
  width: calc(100% - 32px);
  max-width: 672px;
  margin: 32px auto;
  padding: 16px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

section {
  margin: 0 auto 16px;
}

footer {
  width: calc(100% - 32px);
  max-width: 672px;
  line-height: 2;
  margin: 32px auto;
  text-align: center;
}
/* semantic elements END */
/* flex */
.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-item {
  width: 100%;
}
/* flex END */
/* card */
.card {
  width: 100%;
  margin: 32px 0;
  text-align: center;
}

.card-img {
  display: block;
  width: 80px;
  height: 80px;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  margin: auto;
  object-fit: contain;
}

.caption-title {
  display: block;
  margin: 4px auto;
}
/* card END */
/* jump button */
.jump-btn {
  display: none;
  position: fixed;
  right: 8px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-bottom: var(--glass-border);
  border-left: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  text-align: center;
  text-decoration: none;
}
/* jump bottun END */
/* display */
.ja {
  display: none;
}

menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 32px 0;
}

menu button {
  width: 150px;
  margin: 8px auto;
}
/* display END */
/* tablet & pc */
@media screen and (min-width: 520px) {
  .flex-item,
  .card {
    width: 50%;
    padding: 0 8px;
  }

.jump-btn {
    right: 16px;
    width: 64px;
    height: 64px;
    line-height: 64px;
  }
}
/* tablet & pc END */

parts

各パーツ

2カラム

カード

見出しレベル2

見出しレベル3

見出しレベル4

見出しレベル5

見出しレベル6

リンク

太字

斜体

削除

重要

強調

マーク

ルビ

左横線

右横線

後線

マーカー風

ボタン風

両端揃え

中央揃え

右揃え

水平線

ボックス

スクロールボックス

折りたたみボックス

コピーボックス

引用(短)

引用(長)

順序付きリスト - 横並び

順序付きリスト - 縦並び

順序なしリスト - 横並び

順序なしリスト - 縦並び

説明リスト - バナー

説明リスト - バナー(2カラム)

説明リスト - 横並び

説明リスト - 縦並び

表 - 横並び

連絡用フォーム

<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/テキスト(複数)

一行フォーム - 選択

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

検索避けタグ

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


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

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

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


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

色とフォントの管理

色とフォントは各cssの:root{}部分で管理をしています。色やフォントを変更したい場合は:root{}内の値を変えると該当部分の色やフォントが全て変わります。
echoではガラス風の背景色やborder設定、影、ぼかしも:rootにて一括設定しています。

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

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

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

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

Firefoxの仕様

~~Firefoxではガラスのぼかすコードであるbackdrop-filterが効かないので、ガラス部分が半透明(ぼかし無し)になります。~~2022.09.19 対応したようです。
また、スクロールバーについても他ブラウザとの違いがありますが、閲覧するにあたり支障はありません。

説明リスト - バナー

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

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ページの検証を行う方法からご確認ください。