奥付デザイン

2018年11月、Re:VIEWのEPUB生成による奥付のデザインをCSS定義変更とconfig.ymlの修正で行いました。

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

＞review version
2.5.0

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

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

奥付とは

出版に関して素人の私は、「奥付（おくづけ）」という言葉を知りませんでした。

本の巻末によくある、書名、著者、発行者、印刷者、出版年月日等を書いている部分です

そういえば、どんな本にも巻末に記載されていますね。本を購入するときなんかは、出版年月日を見て最近の本かどうか確認したりしています。

Re:VIEWで奥付を生成

review-initで作成したひな形のデフォルトでは、奥付を作成しません。

config.ymlを修正します。

# 著者名。
aut: ["新人作家"]

# 奥付を作成するか。デフォルトでは作成されない。
# colophon: null
　　↓
colophon: true

EPUBを生成すると、奥付を作りました。

奥付としては、ちょっとさみしいですね。

制作情報を追加

config.ymlに本の制作情報を追加します。

# a-csl, csl: 監修者
csl: ["○○大学△△教授"]
# a-dsr, dsr: デザイナ
dsr: ["Yuki"]
# a-ill, ill: イラストレータ
ill: ["Yuki"]
# a-pbl, pbl: 出版社（発行所）
pbl: [□□出版社]

EPUBを生成します。今度は、どうでしょうか。

追加した本の制作情報を出力しました。

---

PDFを生成します。

PDF生成した奥付は、本らしいデザインですね。EPUB生成も、このようなデザインに変更してみます。

奥付のデザイン変更

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

  <div class="colophon">
    <p class="title">Re:VIEWサンプル書籍</p>
    <div class="pubhistory">
      <p>2018年11月29日　初版第1刷　発行</p>
    </div>
    <table class="colophon">
      <tr><th>著　者</th><td>新人作家</td></tr>
      <tr><th>監　修</th><td>○○大学△△教授</td></tr>
      <tr><th>デザイン</th><td>Yuki</td></tr>
      <tr><th>イラスト</th><td>Yuki</td></tr>
      <tr><th>発行所</th><td>□□出版社</td></tr>
    </table>
  </div>

• 奥付全体は、colophonクラス指定しています。
• 書名は、titleクラスで出力しています。
• 発行履歴は、pubhistoryクラスで出力しています。
• 著者などは、colophonクラスのテーブルで出力しています。

スタイルシート（style.css）で、colophonの定義を確認します。

/* Colophon */
div.colophon {
    margin: 3em auto;
}
div.colophon p {
    text-indent: 0;
}
div.colophon p.title {
    font-size: 1.5em;
}
div.colophon table {
    margin: 1em 0 2em;
    border: none;
}
div.colophon table tr th {
    background-color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}
div.colophon table tr td {
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}

私好みの奥付のデザインに変更します。

スタイルシートstyle.cssを以下のように変更します。

/* =========================================
 * 奥付 デザイン    [Colophon]
 * =========================================
 */
div.colophon {
    margin: 3em auto;
}
div.colophon p {
    text-indent: 0;
}
div.colophon p.title {
    font-size: 1.5em;
    border-bottom: 4px orange double;
}
div.pubhistory p {
    font-size: 0.8em;
    line-height: 0.9;
}
div.colophon table {
    margin: 1em 0 2em;
    border: none;
}
div.colophon table tr th {
    background-color: #fff;
    font-size: 1em;
    font-weight: bold;
    border: none;
    padding: 2px 10px 2px 2px;
}
div.colophon table tr td {
    font-size: 1em;
    font-weight: normal;
    border: none;
    padding: 2px 4px 2px 16px;
}

EPUBを生成します。

いい感じになりました。

奥付に権利表記

Copyrightを追加します。

config.ymlに権利表記を追加します。

# 権利表記(配列で複数指定可)
# rights: (C) 2016 Re:VIEW Developers
rights: |
 Copyright (C) 2018 Yuki. All Rights Reserved.

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

  <div class="colophon">
    ・・・
    <table class="colophon">
        ・・・
    </table>
    <p class="copyright">Copyright (C) 2018 Yuki. All Rights Reserved.</p>
  </div>

権利表記は、copyrightクラスで出力しています。

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

div.colophon p.copyright {
    margin: 3em 1em 1em 0;
    border-top: 4px orange double;
}

EPUBを生成します。

自分好みの奥付となりました。

まとめ

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