見出し画像

でんでんコンバーターを使用した縦書きEPUBでタイトルを左右の中央揃えにする方法

 でんでんコンバーターで縦書きのEPUBを作成する場合、書名や各話のタイトルを独立したページにすることは可能ですが、ページ右寄せになってしまいます。

タイトルが右寄せになってしまう(calibreでの表示例)

 これをなんとかページ左右の中央揃えにしたかったのですが、ようやく方法がわかりました。

 でんでんコンバーターは、自前のCSSをアップロードすることも可能なので、ChatGPT先生に相談しながらCSSを弄っていたのですが、結論から言うと、CSSの修正だけではうまくいかず、EPUB編集ソフトでEPUBファイルのxhtmlファイルを直接修正する方法しか見つかりませんでした(Markdownファイルに直接htmlタグを書き込むのでも大丈夫かも)。

 修正点は次のとおりです。でんでんコンバーターでタイトルを独立ページにしたEPUBを作成したら、caribre等のEPUB編集ソフトで、EPUB内のタイトルのあるxhtmlの中央寄せにしたいヘッダーを`<div class="title">`でラップします。具体例は次のようになります。

     <div class="title"> <!--  追加 -->
        <h1 id="toc_index_1">[私家版]イラストからはじめたショートストーリーズ</h1>
     </div> <!--  追加 --> 

 その後、EPUB内のbook-style.cssを次のとおり修正します。例示ではh1だけ載せていますが、中央揃えにしたいレベルのヘッダーを修正してください。

/* CSSファイルに追加 */
.title {
  -epub-writing-mode: horizontal-tb; /* いったん横書きに戻す */
  text-align: center;               /* 横書き状態で「左右中央」を確定させる */
  width: 100%;
}

h1 {
  font-size: 2em;
  margin-right: 0.625em;
  margin-left: 0.625em;
/* 追加部分 */
  -epub-writing-mode: vertical-rl;  /* テキストだけ縦書きに戻す */
  display: inline-block;
/* ここまで */
}

 以上で終了です。正しく修正されていれば、タイトルが左右中央揃えになっているはずです。

タイトルが中央揃えに!((calibreでの表示例)

 以前公開した『 [私家版]イラストからはじめたショートストーリーズ』について、タイトルを中央揃えにしたEPUBファイルに差し替えて公開していますので、気になった方はどうぞ。公開以降、誤植等もときどき修正して差し替えていますので、以前ダウンロードしてそのままの方もお時間あれば再ダウンロードしてください。

 でんでんコンバーターを利用したEPUBの作成方法については、以下でまとめています。


いいなと思ったら応援しよう!