Re:VIEWの章リード文変更
章リード文デザイン
2018年8月、Re:VIEWのEPUB生成による章リード文のデザインをCSS定義で変更しました。
Re:VIEWのバージョンは2.5.0です。
＞review version 2.5.0
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）は、スタイルの変更で見え方を変更できるので便利です。
記事の検索