章リード文デザイン

2018年8月、Re:VIEWのEPUB生成による章リード文のデザインをCSS定義で変更しました。

Re:VIEWのバージョンは2.5.0です。

＞review version
2.5.0

Windows10に書籍執筆支援システム「Re:VIEW」をインストールして使用しています。

Windows10に Re:VIEW 執筆支援システムをインストールする方法

リード文とは

一般的な本は、章のはじめにリード文があります。リード文とは、見出しのすぐ下に配置した短い導入文章で、その後に続く本文の内容を要約して本文へ「導く（lead）」ものです。

章の構成は次に示すようになります。

• 見出し : 読者の興味を引きつける
• リード : 読者の心をつかみ本文に関心を持たせる
• 本文 : 本文で詳細に説明する

特に技術書のリード文は、本文でどのような内容を学ぶことができるのかを示します。

章リード文

Re:VIEWのreview-initで生成するサンプルプロジェクトでは、リード文は次のようなデザインになります。

リード文と本文は、ほとんど同じデザインです。また、リード文の後に節タイトルが続きます。

---

紙の書籍で私がよく目にした好みのデザインとは違います。

私好みの章リードのデザインは、左マージンを大きくとり上下をラインで区切ります。また、章リード文の後ろは改ページします。すぐ次の節タイトルとはなりません。

私好みの章リード文

私好みの章リード文のデザインに変更します。

Re:VIEWで生成したEPUBの内容を解析してみます。EPUBをzip解凍して、第2章のコードを確認します。（OEBPS＞02_chapter.xhtml）

<div class="lead">
<p>この章では・・・使い方を紹介します。</p>
</div>

リード文はクラス指定（lead）しています。classを指定してスタイルを変更することにより、リード文のデザインを変更します。

スタイルシートは、config.ymlで指定します。

# CSSファイル(配列で複数指定可)
stylesheet: ["style.css"]

スタイルシートstyle.cssに下記コードを追加します。

div.lead {
    margin: 1em 2em 1em 6em;
    border-top:    2px dimgray double;
    border-bottom: 2px dimgray double;
    page-break-after: always;
}

左側のマージンを大きくします。また、上下のボーダラインを二重線で灰色にします。そして、page-break-after: alwaysによりリード文の後で改ページします。

 

まとめ

書籍執筆支援システム「Re:VIEW」の章リード文のデザインを変更しました。Re:VIEW（EPUB）は、スタイルの変更で見え方を変更できるので便利です。