電子書籍の作り方

誰もがKindle本で出版できる時代になった

Sigilで縦組みの電子書籍を作る方法

Sigilで縦組み(縦書き)の電子書籍を作る作例です。縦書きの電子書籍はスタイルシート、および contetnt.opfファイルへの記述が必須になります。

青空文庫の芥川龍之介著『藪の中』からルビを除いた原稿を使います。

作例

『藪の中』全文をコピーして、ブックビューで、Sigilの新規xhtmlファイル(Section0001.xhtml)へ原稿をペーストします。

コードビューでの入力ではタグを手動で書かなくてはいけないが、ブックビューで原稿を入力すると自動的に段落タグが付く。という訳で、ブックビューで原稿をペーストする方が楽です。

ペーストする原稿はプレーンテキストでないと、装飾のタグなどがいろいろ付いてしまうので、DOC形式やRTF形式などの場合は、TXT形式に変換しておきます。同時にテキスト形式変換時に、文字コードを Sigilに合わせて UTF-8になるようにします。

近年は標準の文字コードが UTF-8になっていますが、以前は Shift_JISが多かったので注意。文字コードの違いは文字化けの原因になります。

f:id:potex:20160413235942p:plain

タイトル『藪の中』のテキストにカーソルを置いたまま、h1ボタンをクリックして、タイトルをh1見出しに設定します。ブックビューでの見出し設定では、タグが自動的に付加されます。

f:id:potex:20160414000219p:plain

次に、タイトル下の見出しにカーソルを置いて、h2ボタンをクリックして、h2見出しに設定します。本文中にある同等の見出しも h2見出しに設定します。

f:id:potex:20160414000229p:plain

見出しと段落の間にある空白行(ソースでは、<p><br /></p>などになっている)を削除。空白行は文章的価値を持たないので意味はありません。

コードビューでソースコードを見て、同じく意味を持たない改行<br />タグ(改行の意味がある部分はそのままに)や半角空白(&nbsp;)の実体参照なども削除しておきます。

行頭に字下げのために「全角空白」があるので、その部分を削除します。空白は文章的な意味は持たず、単なる段落の始まりを示しているだけなので、スタイルシートでインデント(字下げ)します。

f:id:potex:20160414000250p:plain

メニューから、検索 > 検索と置換…

f:id:potex:20160414000259p:plain

検索/置換ウィンドウで、<p> __→<p>にすべて置換して全角空白を削除。

f:id:potex:20160414000309p:plain

次に、Textフォルダ上で右クリックして、「空のHTMLファイルを追加」し、新規HTMLファイルを追加します。

f:id:potex:20160414000319p:plain

新規ファイルは奥付ページにします。タイトル、著者、発行日を書き込む。

f:id:potex:20160414000328p:plain

必要なHTMLファイルの作成が終われば、新規スタイルシートを追加します。Stylesフォルダの上で右クリックで追加メニューが表示されます。

f:id:potex:20160414000339p:plain

Textフォルダにあるファイルを選択して右クリックで、「スタイルシートにリンク…」を実行。

f:id:potex:20160414072400p:plain

本文を縦書きにするための記述を追加。『日本語サポート補足資料(pdf), 3-1 組方向』には、「cssプロパティ "-webkit-writing-mode"を使用する」と書かれています。作例では他の同等のプロパティも記述していますが、それらは必要ありません(個人的な習慣です)。

f:id:potex:20160414000350p:plain

本文の要素に対する記述を追加。 段落のマージンを0にすることで段落間の隙間がなくなります。行頭の字下げは text-indentで行います。後でこのデザインで良いか検証するので大体で構いません。

f:id:potex:20160414000358p:plain

ブックビューにして、本文を見るとスタイルシート設定が反映されています。文字が90度横向きになっているのは Sigilが対応していないためです。電子書籍リーダーで表示させると、全角文字は上向き、半角文字は横向きになります。

f:id:potex:20160414000407p:plain

奥付も縦書きになっていますが、段落のマージンが0になっているので隣の行と接近しすぎていてごちゃっとして視認性がよくありません。

f:id:potex:20160414000432p:plain

奥付ページだけ違うデザインにするため、body に idを指定。

f:id:potex:20160414000441p:plain

奥付ページの段落のみ、マージンを設定します。

f:id:potex:20160414000452p:plain

奥付ページの段落(項目)の間隔が開きましたが、発行日が半角だと横向きになるので修正する必要があります。数字2桁のみ横並びにしたいので縦中横を使います。4桁の数字は横並びにできないので縦並びにするため全角に書き換えます。フォントのバランスを考えて1桁も全角にします。

f:id:potex:20160414000507p:plain

スタイルシートに縦中横のクラス設定を追加します。

f:id:potex:20160414000521p:plain

2桁のみ縦中横のクラスを指定して、あとは全角数字に書き換えます。

f:id:potex:20160414000531p:plain

メニューバーから、ツール > 表紙を追加…

f:id:potex:20160414000541p:plain

別に作っておいた表紙画像(2,560 x 1,600ピクセルのJPG形式画像)を指定します。Textフォルダに表紙ページの「cover.xhtml」が生成されます。

f:id:potex:20160414000558p:plain

メニューバーから、ツール > メタデータエディター…

f:id:potex:20160414000619p:plain

書誌情報を追加します。使用言語(language)、書籍タイトル(title)、著者名(creator)を入力します。creator項目は、Add Metadataから、Authorで追加できます。

f:id:potex:20160414000628p:plain

ツール > 目次を生成(論理目次の生成)

f:id:potex:20160414000651p:plain

論理目次は電子書籍内部で使用する目次です。目次メニューに必要がないものはチェックを外します。

HTMLファイルで見出しに設定したものが自動的に表示されるので、目次の項目にするためには見出しを設定しておく必要があります。

f:id:potex:20160414000714p:plain

ツール > HTML目次の作成

f:id:potex:20160414000747p:plain

TextフォルダにTOC.xhtmlファイルとその為のスタイルシート(Styles/sgc-toc.css)が生成され、目次が自動的に出来上がります。

f:id:potex:20160414000757p:plain

自動生成される目次は横書きになるため、縦書きにする設定を目次用のスタイルシート(sgc-toc.css)に追加します。

f:id:potex:20160414000810p:plain

目次をブックビューで見ると縦書きになっていますが、横書きのものを単に縦書きに直しただけなので、h1見出しとh2見出しに差がなく、この書籍の構造を視覚的に判断できません。「目次」という見出しも本文のページとは違った位置にあります。

f:id:potex:20160414000823p:plain

目次のスタイルシートを修正します。

f:id:potex:20160414000836p:plain

h1見出しとh2見出しに差がつき、『藪の中』の中にいくつかの物語があるのがわかるようになりました。 「目次」の見出しの位置も修正しました。

f:id:potex:20160414000850p:plain

ページ送り方向を縦書き用にするため、content.opfファイルを開いて記述を追加。

<meta content="vertical-rl" name="primary-writing-mode" />

f:id:potex:20160414000859p:plain

ファイル > 保存(EPUBデータの完成)

f:id:potex:20160414000913p:plain

Kindle電子書籍リーダーで検証/スタイルシートの修正

EPUBデータをKindle本で読める形式に変換(参考:制作したEPUBをKindle本に変換して各端末に転送する方法)して、電子書籍リーダーで表示させます。

以下の書籍ページは Fire HDX 8.9のスクリーンショットです。

奥付ページ

f:id:potex:20160414000924p:plain

文章中にある h2見出しの位置が良くないですね…

f:id:potex:20160414000937p:plain

Sigilに戻り、h2見出しのマージンを修正します。

f:id:potex:20160414000947p:plain

EPUBを再保存して、Kindle本データに変換後に再確認。 バランスが良くなりました。

f:id:potex:20160414001001p:plain

書籍ページのデザイン確認は必ずKindle端末の実機で行うようにします。ソフトウエア上だけの判断で電子書籍を作ってしまうと不自然な誤りに気づけないことがあります。