章扉のカスタマイズ

EPUB3生成の一般設定画面で「章扉を作る」をチェックしてEPUB3を生成すると、記事タイトルが章扉として生成されます。

「章扉」の<body>には'chapter-titlepage'というクラス属性が付きます。章扉のタイトル文字列は<body>直後に <h1></h1> タグで入ります。

よって、「章扉」タイトルをカスタマイズするときのセレクタは body.chapter-titlepage>h1 となります。

例.縦書の出版物で章扉を左右中央配置にする

縦書の章扉タイトルは、そのままでは右寄りに配置されます。

縦書で左右中央配置にする方法はいくつかありますが、一長一短があり、すべてのリーディングシステムで問題なく表示されることを保証できる方法は今のところありません。

よく使われる方法としては、横書のページに縦書のブロックを配置するというものがあります。

EPUB3生成の一般設定画面で「章扉の文字進行方向」に[横書]を指定すると、html の<html>タグに'hltr'というクラス属性が付きます。縦書のCSSテーマには、<html>タグにクラス属性'hltr'が付けられたら文字進行方向を横書にする設定が含まれています。

文字の進行方向が横書のときに、タイトルブロックを縦書にして左右中央配置にするには、次のように指定します。

/* 章扉タイトルを左右中央配置にする */
html.hltr body.chapter-titlepage>h1 {
  padding:0;          /* タイトルのパディング指定リセット */
  margin-top:1em;     /* タイトルの上を1文字空ける */
  margin-bottom:1em;  /* タイトルの下を1文字空ける */
  text-align:left;    /* タイトル行頭寄せにする */
  margin-left: auto;  /* タイトルを左右中央配置にする1 */
  margin-right: auto; /* タイトルを左右中央配置にする2 */
  -epub-writing-mode: vertical-rl; /* タイトルを縦書にする */
       writing-mode: vertical-rl; /* タイトルを縦書にする */
}
  •  ※ 「章扉」にはクラス属性'.chapter-titlepage'の他に「本文:章」のクラス属性'chapter'も付けられているので、「本文:章」タイトルをカスタマイズしていると「章扉」タイトルにも適用されますのでご注意ください。