段組設定

一太郎で見映えのいい縦書き ePub を作るコツ 『Sigil』でXHTMLを整形する

段組設定

一太郎の便利な点は、ワンクリックでePubファイルを作成できる点ですが、見映えのいい縦書きePubを作るには、ちょとしたコツがあります。

あくまで個人の環境なので、誰にでも共通するコツではありませんが、何かの参考に。

GoogleブックスとePubに関しては、こちらの記事もご参照ください。

なお、プレビューの確認は、SigilやCalibreに付属するプレビュー機能でもいいですが、ブラウザの方が速くて分かりやすいです。

右クリックで「アプリケーションから開く」→好みのブラウザ、もしくは、ePubビューアを設定します。

ファイルを更新する度に、リアルタイムで変更箇所が表示されるので、分かりやすいです。

ブラウザ表示を設定

pの属性を設定する

一太郎からePub出力した、デフォルトの状態では、フォントが汚いです。

CSSで、p(段落)のフォント設定をした方が見映えがいいので、一つのやり方を紹介。

まず出力時の設定で、「リフロー」→「フォント名をCSSに出力する」をオフにします。

一太郎の文書で、凝ったフォントを使用していると、PDFでは問題ありませんが、ePubの場合、指定したフォントがリーダーの環境にない場合、MS明朝みたいな、もやーっとしたフォントが表示されるので。

CSSでフォントの埋め込みを無効にする

CSSを開いて、p のクラスを設定し、適切なフォントを指定します。

明朝体であれば、遊明朝か、IPA明朝あたり。

文字の太さも、font-weight:700; ぐらいに設定しておくと、遊明朝でも、かなりいい感じになります。

段落フォントの指定

もう少し行間が欲しい場合は、body の属性の line-height の数値を大きくすると、行間が開きます。

行間の指定

行間は「改行」ではなく、『段落属性』で調整する

ePubに関しては、ビューアによって、テキストの表示がまちまちなので、あまり神経質になる必要はありませんが、一太郎で設定した行間やマージンがきれいに反映されないこともあるので、スタイルシートで調整します。

たとえば、一太郎の『段落属性』で行取りや段落間のマージンを指定しても、ePubビューアで確認すると、下図のように、きれいに反映されない箇所があります。

見出しの行間を調整

これも一太郎の文書では、ちゃんと行間のスペースが設定されているが、ePubでは潰れている。

行間が反映されない

xhtmlファイルで該当箇所を探します。

<p class=”div2b”>《第三章 海洋情報ネットワーク》に続く</p>

該当箇所のDIVクラスを確認する

CSSファイル(この場合、stylevertical.css)で、 クラス= div2b を探し、左右のマージンを指定します。

スタイルシートでマージンを調整

ブラウザで確認すると、行間がちゃんと修正されています。

行間が修正されているか確認

同じ要領で、気になる箇所は、CSSで調整します。

行間を「改行」で取るケースも多いと思いますが、xhtmlファイルでは、

<p>__</p>
<p>__</p>
<p>__</p>

のように、スペースが連続して挿入されるので、それよりは『段落属性』で行の前後のマージンを指定した方がスマートです。

なお、「属性・改行幅」に関しては、「改行幅」→「行取り」で調整する人も少なくないと思いますが、ePubでは上図のように潰れる確率が高いです。

それよりは、「段落間」→「段落上」もしくは「段落下」でマージンを調整した方が上手くいきます。

行取りより段落間でマージンを指定する

これは絶対ではなく、好みの問題です。いちいち修正するのが面倒な人向け。

本文のスタイルは「付けない(解除)」を推奨

本文のスタイルは、『本文』で調整する人もあるかもしれませんが、これをやると、ePubの中では、全ての段落タグにスタイルが適用されて、ファイル自体が重く、複雑になってしまいます。

divで、段組を解除する

一太郎で電子書籍を作成する場合、段組している方も少なくないと思います。
しかし、段組したまま、ePubを出力すると、きれいに縦書き表示されません。
かといって、ePub出力の度に、段組を解除したり、設定し直したりは面倒くさいですね。

そんな場合は、段組を指定している div クラスを削除します。

私の環境の一太郎文書の場合、Siglで確認すると、 div class=”mcdiv1 というDIVクラスが確認できます。

bodyタグの次に挿入されています。

個人の環境によって、位置やクラス名はまちまちですが、本文が始まる直前に段組設定しているなら、この div で囲まれた部分を削除すると段組だけが解除されます。

括りの </div> は、</body>の直前にあります(多分)。

段組設定

まとめ: xhtmlファイルを見れば、一太郎のコツが分かる

一太郎は、一見、WORDのようにドキュメントファイルを作成している印象がありますが、実体は、xhtmlファイルに近いのかなと感じます。

私もSigilを開いてみるまでは分からなかったのですが、改行幅とか、見出しとか、インデントとか、、、そういうことだったのか、と。

ePubを意識しなければ、今まで通りでいいのかもしれませんが、そうと分かれば、今まで通り……とはいきません。

特に、行取りと段落間の違いなど、ePubビューアで確認するまで、分からないものです。

半分、HTMLエディタみたいなもの……と思えば、段落属性や文字装飾の仕方もちょっと変わってきますね。

ePubも、これからますます複雑かつ高度化していくと思うので、今のうちに、スキルを身に付けておくのも悪くはないと思います。

※ あとは随時更新

一太郎+Sigilで作ったePubの見本

NO IMAGE

海洋小説『曙光』MORGENROOD

宇宙文明の根幹を支える稀少金属『ニムロディウム』をめぐる企業と海洋社会の攻防を描く人間ドラマ。生き道を見失った潜水艇パイロットと、運命を握る娘の恋を通して仕事・人生・社会について問いかける異色の海洋小説です。
Kindle Unlimited、Googleブックスで公開中。無料PDFもダウンロードできます。

CTR IMG