エンプティルーム

テンプレートについて

落ち着いた色合いの小説ページです。目に優しい配色で、数字またはタイトル表記両方に対応できる小説ページのリクエストをもとに作成しました。
線が細いフォントなのでPC版は文字サイズを若干大きくしています。

class名listで横並びになります。（小説ページ「番外編」部分参照）
携帯向けサービスの小説機能が使えないのでURLを直接貼り付けてご使用ください。

更新履歴

９月２９日：モバイル用CSSを一部変更しました。

ソースコードと画像

PC

zipファイルをダウンロード

head

<meta charset="UTF-8"> <style> /* リセットCSS */ /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bolder}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} /* PC、モバイル共通設定 */ @font-face { font-family: はれのそら明朝; src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2') format("woff2"); } /*------------------------------------------------- このフォントはIPAフォントライセンスv1.0の下で提供されています。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html オリジナルのフォントは以下から取得できます。 http://ipafont.ipa.go.jp/ <blockquote data-secret="uoFEK7mhQX" class="wp-embedded-content"><a href="http://fontopo.com/?p=377">はれのそら明朝</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="http://fontopo.com/?p=377&embed=true#?secret=uoFEK7mhQX" data-secret="uoFEK7mhQX" title="埋め込まれた WordPress の投稿" marginwidth="0" marginheight="0" scrolling="no" width="500" height="282" frameborder="0"></iframe> -------------------------------------------------*/ html { background: transparent; font-size: 62.5%; } </style> <style type="text/css" media="screen and (min-width:600px)"> /* 共通設定 */ body { background: url('画像URL') center / contain no-repeat fixed #f4ffff; color: #0c3231; font-size: 1.4rem; font-family: はれのそら明朝, serif; letter-spacing: 0.2em; line-height: 180%; } a { color: #0c3231; text-decoration: none; } a:visited { color: #24716e; } h1 { padding: 2em 0em 1em; color: #678181; font-size: 3rem; text-align: center; } h2 { padding-top: 1em; font-size: 1.5rem; } h3 { padding: 0.5em 0em 2em; font-family: 'はれのそら明朝', serif; font-size: 1.3em; } em { font-style: normal; font-weight: bolder; } input,textarea { background: rgba(255,255,255,0.5); border: solid 1px #639b99; font-family: inherit; font-size: 100%; } input[type="text"] { width: 6em; margin-right: 1em; } /* メインコンテンツ設定 */ main { display: block; margin: 5rem auto; width: 55%; min-width: 500px; } /* 小説ページ設定 */ ul { padding: 2em 0em; list-style: none; } ul li { padding: 0.1em 0em; } ul li a { margin: 0em 1em; } .list { display: flex; flex-wrap: wrap; padding: 0em; margin: 1em 0em; } .list .title { padding-right: 1em; } .list li a { margin: 0em 1em 0em 0em; } form { padding: 1em 0em; text-align: center; } /* 本文ページ設定 */ .text { padding: 5vh 2em; margin: 5vh auto; width: 40%; background: rgba(244,255,255,0.5); font-size: 1.3rem; letter-spacing: 0.3em; line-height: 200%; } .text p { text-indent: 1em; } .ps { padding: 1em; margin-top: 2em; border-top: solid 1px #4b5959; color: #4b5959; } </style> <style type="text/css" media="screen and (max-width:599px)"> /* 共通設定 */ body { background: #f4ffff; color: #0c3231; font-size: 1.2rem; font-family: はれのそら明朝, serif; letter-spacing: 0.2em; line-height: 180%; } a { color: #0c3231; text-decoration: none; } a:visited { color: #24716e; } h1 { margin: 1em auto 0em; width: 1em; color: #709a99; font-size: 2rem; font-weight: normal; line-height: 1em; text-align: center; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } h1 span { display: inline-block; transform: rotate(-20deg); } .bg { background: url('画像URL') center / contain no-repeat; } h2 { padding-top: 1em; font-size: 1.5rem; } em { font-style: normal; font-weight: bolder; } input[type],textarea { border: none; font-family: inherit; font-size: 100%; } input[type="submit"], input[type="reset"] { background: #dddddd; } input[type="text"] { padding: 0.2em; width: 6em; margin-right: 1em; border: solid 1px #ffffff; } /* メインコンテンツ設定 */ main { margin: 2rem auto; width: 90%; max-width: 500px; } /* 小説ページ設定 */ ul { padding: 1em 0em; list-style: none; } ul li a { margin: 0em 1em; } .list { display: flex; flex-wrap: wrap; padding: 0em; margin: 1em 0em; } .list .title { padding-right: 1em; } .list li a { margin: 0em 1em 0em 0em; } form { padding: 1em 0em; text-align: center; } /* 本文ページ設定 */ .text { margin: 10vh auto; width: 90%; line-height: 200%; } .text p { text-indent: 1em; } .ps { padding: 1em; margin-top: 2em; border-top: solid 1px #4b5959; color: #4b5959; } </style>

body(novel)

<main> <div class="bg"> <h1>小<span>説</span>タイトル</h1> </div>  <form> <input type="text" value="名字"><input type="text" value="名前"><input type="submit" value="送信"> </form>  <h2>第一章</h2> <ul> <li><span>佐藤</span><a href="">タイトル１</a></li> <li><span>鈴木</span><a href="">タイトル２</a></li> </ul> <h2>第二章</h2> <ul> <li><span>高橋</span><a href="">タイトル３</a></li> <li><span>田中</span><a href="">タイトル４</a></li> </ul> <h2>番外編</h2> <ul class="list"> <li class="title">タイトル</li> <li><a href="">１</a></li> <li><a href="">２</a></li> <li><a href="">３</a></li> <li><a href="">４</a></li> <li><a href="">５</a></li> </ul> </main>

body(text)

<main class="text"> <h3>タイトル</h3> <section> <p>本文本文本文</p> </section> <section class="ps"> class名psであとがき用セクションになります。 </section> </main>

画像

パブリックドメインの画像です。こちらからお持ち帰りください。

元画像をダウンロード（Pixabay）

名前変換

ダミーフォームの部分を以下に変更してください。

ナノ

<form action="/ユーザーID/novel/??/dream" method="post"> <input type="text" name="DreamID[1]" value="#name1#"> <input type="text" name="DreamID[2]" value="#name2#"> <input type="submit" name="set" value="送信"> </form>

XRIA

<form action="http://ID.数字.novel.d.xria.biz/?guid=on" method="post"> <input type="text" name="n1" placeholder="名字"><input type="text" name="n2" placeholder="名前"> <input type="submit" value="送信"> <input type="hidden" name="mode" value="set"> <input type="hidden" name="page_pass" value=""> 設定中：#name1##name2# </form> ※名前変換について注意※ こちらのサイトでは名前変換後の文字列が【<font color="">名前</font>】といった形で表示される仕様になっており、valueに#name1#を指定するときちんと表示されなくなります。その代替策としてplaceholderを使用しているのですが、この場合【変換後の名前入力欄が空欄】になります。上記タグでは【設定中：名字名前】の追加で対処しています。

Alice+

<form action="./" method="post" > <input type="text" name="DreamID[1]" value="#name1#" /><input type="text" name="DreamID[2]" value="#name2#" /> <input type="submit" name="dream_name_set" value="送信" /> </form>