章タイトルデザイン

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

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

＞review version
2.5.0

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

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

EPUB リフロー型

EPUBの書籍は次に示す2種類があります。

• フィックス型 : 紙の本のように文字などのレイアウトが固定する方法
• リフロー型 : 表示するデバイスの画面サイズや文字サイズの変更などに合わせて、テキストやレイアウトが流動的に変化する方法

Re:VIEWで作成するEPUBは、リフロー型です。

---

EPUBリーダーのフォントサイズ変更により「第2章　Re:VIEWのステップアップ」という章タイトルがどのように変化するでしょうか？

【１】フォントサイズが小さい場合

【２】フォントサイズが普通の場合

【３】フォントサイズが大きい場合

フォントサイズの変更により、端末の画面サイズに収まるように章タイトルを折り返します。このように、リフロー型はユーザー好みの指定フォントサイズで読むことができる特徴があります。しかし、紙の本で章タイトルが折り返している本は見たことがありません。見た目にもあまり美しくありません。

章タイトル改善

章タイトルが長い場合、リフロー型では端末の画面サイズや文字サイズによっては章タイトルが折り返してしまいます。その改善として、章タイトルを2行構成として1行目を章番号、2行目をタイトルとします。

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

<h1><a id="h2"></a><span class="secno">第2章　</span>Re:VIEWのステップアップ</h1>

章番号はクラス指定（secno）しています。classを指定してスタイルを変更することにより、章番号の後ろで改行します。

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

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

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

h1 .secno:after  {
    content: "\A" ;
    white-space: pre ;
}

章タイトル（h1）のsecnoクラスの後ろで改行します。contentプロパティで、改行コード（”\A”）を挿入します。white-spaceプロパティで、ソース中の改行をそのまま表示するように指定します。

章番号の後ろで改行して、タイトルが行の先頭から表示しました。

まとめ

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