大扉デザイン

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

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

＞review version
2.5.0

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

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

大扉とは

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

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

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

Re:VIEWの大扉

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

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

# 書名
booktitle: Re:VIEWサンプル書籍
# 著者名。「, 」で区切って複数指定できる
aut: ["新人作家"]
# a-pbl, pbl: 出版社（発行所）
pbl: [□□出版社]

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

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

大扉のデザイン変更

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

  <div class="titlepage">
    <h1 class="tp-title">Re:VIEWサンプル書籍</h1>
    <h2 class="tp-author">新人作家</h2>
    <h3 class="tp-publisher">□□出版社</h3>
  </div>

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

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

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

div.titlepage {
    text-align: center;
    text-indent: 0px;
}
h1.tp-title {
    margin: 0 2em 1.5em 2em;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border-top-left-radius: 25px;
    border-left:  10px solid #326450;
    border-top:   10px solid #326450;
    border-bottom: 3px solid #326450;
    border-right:  3px solid #326450;
    text-align: center;
    font-size: 1.875em;
    font-weight: bold;
    overflow:hidden;
}

h2.tp-author {
    border-top:      3px solid #326450;
    border-bottom:   3px solid #326450;
    margin: 7em 5em 0.5em 5em;
    padding: 0.5em 2em 0.5em 2em;
    font-size: 1.5em;
    text-align: center;
}
h2.tp-author:before {
    content: "―　" ;
}
h2.tp-author:after {
    content: "　―" ;
}

h3.tp-publisher {
    margin: 3em 5em 0.5em 5em;
    padding: 1.5em 1.5em 1.5em 1.5em;
    font-size: 1em;
    text-align: center;
}
h3.tp-publisher:before {
    content: "￣￣＼ " ;
}
h3.tp-publisher:after {
    content: " ＼＿＿" ;
}

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

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

まとめ

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