Re:VIEW(EPUB)で章リード文のデザインを変更する方法

Re:VIEWの章リード文変更

Re:VIEWの章リード文変更

章リード文デザイン

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

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

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

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

リード文とは

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

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

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

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

章リード文

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

章リード文 修正前

章リード文 修正前

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


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

章リード文 好みのデザイン

章リード文 好みのデザイン

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

私好みの章リード文

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

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

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

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

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

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

章リード文 修正後

章リード文 修正後

 

まとめ

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

 

 

 

このエントリーをはてなブックマークに追加

Re:VIEW(EPUB)で章リード文のデザインを変更する方法」への2件のフィードバック

  1. ピンバック: Re:VIEW(EPUB)でテーブルのデザインを変更する方法 | ある計算機屋さんの手帳

  2. ピンバック: Amazon Kindleの電子書籍を作成する方法 | ある計算機屋さんの手帳

コメントは受け付けていません。