Re:VIEW(EPUB)で大扉のデザインを変更する方法

Re:VIEWの大扉

大扉デザイン

2018年11月、Re:VIEWのEPUB生成による大扉のデザインをCSS定義で変更しました。

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

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

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

大扉とは

出版に関して素人の私は、「大扉(おおとびら)」という言葉を知りませんでした。

書籍の巻頭につく表題紙。通常は本の題名、著者名、出版社名が入る。

そういえば、本の最初にありますね。

Re:VIEWの大扉

review-initで作成したひな形のデフォルトで大扉を作成します。

config.ymlを修正して、書名、著者名、出版社を入力します。

EPUBを生成すると、大扉を作りました。

大扉の初期デザイン

大扉の初期デザイン

簡単な大扉を生成しました。

大扉のデザイン変更

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

  • 大扉全体は、titlepageクラス指定しています。
  • 書名は、h1タグをtp-titleクラスで出力しています。
  • 著者名は、h2タグをtp-authorクラスで出力しています。
  • 出版社は、h3タグをtp-publisheクラスで出力しています。

スタイルシート(style.css)で、titlepageクラスの定義を確認します。何も定義していませんので、標準のH1タグ、H2タグ、H3タグのスタイルで出力しています。

私好みの大扉のデザインに変更します。スタイルシートstyle.cssを以下のように変更します。

「:before」や「:after」を定義することにより、元のテキストの前後に飾り文字をいれることが出来ます。
EPUBを生成します。

大扉のデザイン

大扉のデザイン

自分好みの大扉となりました。

まとめ

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