夏のカヲリ、宙へ紡ぐ

葉月の訪れとお告げ

01夏が終わることに意味無く涙
02雨のように命が降ったあの日
03憂うな、駆け抜けるのだ
04雨上がりの似合う君の首筋
05ふたりではいれなかった
06これからの日々
07仮想空間にひとり
08わたしの宿命とは
09白いねむりに蝕まれ
10静謐は緑青

滴る雫と芒の挨拶

01 02 03 04 05
06 07 08 09 10

リクエスト内容

ナギさん
素材サイト『空に落ちる』様の素材をワンポイントに使い、全体的に清潔感のあるさわやかな雰囲気で10話以上のお話を置いてもすっきり見えるような小説ページ

イメージカラー緑 / 青

お世話になりました

01シュロ - お題
02空に落ちる - 夏草クリップ
03青空文庫 - 『愛』より引用

テンプレート仕様

01文章ページ

名前変換機能を表紙ページで完結させているため、名前変換ページはありません。

改行を<br>に変換して表示しない、また本文の改行を<br>に変換しない設定にしています。改行が入ってしまうとリンク色が交互になりません。

タイトル一覧バージョン、番号一覧バージョンお好きな方をお使いください。

ソースコード

HTML

#novel#

<header>
    <img src="#夏草クリップ_1_url#" width="30px" />
    <img src="#夏草クリップ_2_url#" width="30px" />
    <img src="#夏草クリップ_4_url#" width="35px" />
    <h1>夏のカヲリ、<span>宙</span>へ紡ぐ</h1>
    <form action="＃dream_url＃" method="post">
    
    <input type="text" name="DreamID[1]" value="＃name＃" />
    <input type="text" name="DreamID[2]" value="＃name1＃" />
    <input type="submit" name="set" value="お名前変換" />
    </form>
    <p>-<a href="">お話設定</a><a href="">登場人物紹介</a>-</p>
</header>
<article>
    <h2>タイトル<span>斜め文字</span>タイトル</h2>
    
    <p class="list">
        ＃list＃
    </p>
    
    
    <h2>タイトル<span>斜め文字</span>タイトル</h2>
    <p class="list_num">
        ＃list＃
    </p>
</article>
<footer>
    <img src="#夏草クリップ_3_url#" alt="">
</footer>

なし

<article>
    <h2>#title#</h2>
    <section>
        #text#
    </section>
</article>
<footer>
    <img src="#夏草クリップ_3_url#" alt="">
</footer>

タイトル：「タイトル名」
一覧表示でのタイトルの左：「<span>番号</span>」
一覧表示でのタイトルの右：「<br>」

タイトル「番号」

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    list-style-type: none;
    box-sizing: border-box;
}

input, button, textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
}

a {
    text-decoration: none;
    color: #1c301d;
}

body {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 1.8;
    color: #888;
    text-align: justify;
    word-break: break-all;
    width: 80%;
    max-width: 400px;
    margin: 50px auto;
}

header {
    text-align: center;
    margin: 50px auto 25px;
    max-width: 200px;
    position: relative;
    background: #f5f5f5;
    box-shadow: 0px 0px 0px 5px #F2F2F2;
    border: 1px solid #fff;
    padding: 15px 15px 0;
    color: #454545;
}

header::after{
    position: absolute;
    content: '';
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #f5f5f5;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

header img {
    margin-top: 20px;
}

header h1 {
   font-family: "Hannari", serif;
    font-size: 15px;
    letter-spacing: -2px;
}

header h1 span {
    font-size: 20px;
    margin: 0 3px;
    display: inline-block;
    transform: rotate(20deg);
    opacity: .2;
}

header form {
    margin: 10px;
}

form input[type=text],
form input[type=submit] {
  line-height: 1.8;
  font-size: 11px;
  font-family: Verdana, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #2C3E50;
  display: inline;
  background: #fff;
  border: none;
  padding: 3px 10px;
  border-radius: 3px;
}

form input[type=text] {
    width: 70px;
    line-height: 22px;
    height: 26px;
}

form input[type=submit] {
    width: 80px;
    height: 24px;
    margin-top: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #7db580;
    color: #fff;
}

header a {
    color: #7EAC7E;
    margin: 0 5px;
}

header p {
    margin-bottom: 10px;
}

footer {
    text-align: center;
}

footer img {
    width: 20px;
}

article {
    margin: 50px 0 0;
}

article p {
    margin-bottom: 20px;
}

h2 {
    text-align: center;
    font-family: "Hannari", serif;
    border-bottom: 1px solid #f2f2f2;
    margin: 20px 0;
    padding-bottom: 10px;
}

h2 span {
    font-size: 17px;
    margin: 0 3px;
    display: inline-block;
    transform: rotate(-10deg);
    opacity: .2;    
}

.list {
    line-height: 2.5;
}

.list a {
    color: #888;
    border-bottom: 1px solid #efefef;
    padding: 0 3px;
}

.list_num {
    text-align: center;
}

.list_num a,
.list span {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #F2F1EC;
    margin-right: 10px;
    font-family: 'David Libre', serif;
    color: #fff;
    text-shadow: 0 0 8px rgba(159, 152, 115,1);
}

.list_num a:nth-child(odd),
.list span:nth-child(odd) {
    background: #CEE3CF;
    text-shadow: 0 0 8px rgba(93, 162, 96,1);
}

.list_num a {
    margin: 5px;
}
</style>