解説

独自classなどの解説

作品用

<span class="dash">
文中全角ダッシュを2つ(以上)続けるとフォントや文字サイズによってできてしまう隙間を埋めるため
ex.<span class="dash">――</span>
<hr> or <div class="break">
紙面では慣習的に一行以上の余白があけられたり記号が挿入されるような、新たに見出しを設けて章を分けるほどではないちょっとした画面転換でスペースを設けたいときに
ex.<hr>(スペースのみ)
ex.<div class="break">§</div>(任意で記号)

ナビゲーション・作品解説用

<ul class="nav">
前章のページ、次の章のページ、目次に戻る、などのナビゲーション用リストに
<ul class="nav"><li><a href="../">back</a></ul>
<div class="note">
注釈やエンドマークなどなにかしら書き添える場合に(基本的に右寄せの少し小さな字になります)div以外にpuloldlも利用想定しています。
ex.<p class="note">エンドマーク</p>
ex.<dl class="note"><dt>初稿<dd>掲載日</dl>
<div class="notice">
作品を読む前に特別注意を添えるときに(基本的に目立つ色の枠線や背景がついて、下部に大き目のスペースが入ります)div以外にpuloldlも利用想定しています。
ex.<p class="notice">作品を読むにあたっての注意</p>
ex.<ul class="notice"><li>作品を読むにあたっての注意</ul>
<div class="afterword">
あとがきを添えるときに(基本的に上部に大き目のスペースが入ります)div以外にpuloldlも利用想定しています。
ex.<div class="afterword">後書きやメールフォームなど</div>

CSSカスタマイズ

スタイルシートファイルを任意のエディタで開き、自由にカスタマイズしてください。40行目あたりから色や余白等の任意カスタマイズ事項が抜き出されています。

形式段落ごとのインデント

いちいち全角スペースを入れなくても、形式段落を<p>でマークアップしておけばCSSの指定でインデントを取り入れられます。以下強調部削除。

p
{
     /* text-indent: 1em; */
     /* margin-bottom: 0.5em; */
}

かぎかっこなど記号始まりでインデントをなくしたい行は、<p class="mark">にするとインデント削除されます。

<p>彼はやってきて言いました。
<p class="mark">「こんにちは」

形式段落一文が長い場合

形式段落一文が複数行にわたるほど長い作風の場合は、形式段落ごとに上下スペースがあるほうが見やすい気がします(主観です)。形式段落を<p>でマークアップしておけばCSSの指定でスペースを入れられます。以下強調部削除。

p
{
     /* text-indent: 1em; */
     /* margin-bottom: 1em; */
}