本好きに送る「電子書籍のつくり方」講座

誰でも 簡単 手作り 電子書籍

電子書籍づくり実践(本文ファイルを分割する)

今回は、ここまで作業を進めてきたxhtmlファイル(p-002.xhtml)を、しかるべきパーツごとに分割します。

書籍は通常、

  • 表紙
  • 本扉
  • 目次
  • 本文
  • 奥付

といった要素により成り立っていますが、それに沿った形でファイルを分割していきます。

分割作業をする前に、まずはテンプレートのxhtmlフォルダを開き、そのうち今回使用するファイルだけを残し、それ以外削除します。

残すファイルは下記の通りです。

  • p-cover.xhtml(表紙用)
  • p-titlepage.xhtml(本扉用)
  • p-toc.xhtml(本文目次用)
  • p-002.xhtml(本文用)
  • p-colophon.xhtml(奥付用)

それではパーツごとに作業を進めていきます。

表紙

表紙用のページファイル「p-cover.xhtml」は、現在「ページ上にcover.jpg という名前の画像を目一杯の大きさに表示する」という設定がされており、その「cover.jpg」は仮の画像になっています。なのでこの仮画像を、実際に電子書籍の表紙にしたい画像に差し替えればOKです。

作業手順

始めに、テンプレートのimageフォルダ内の画像ファイルをすべて削除します。そうしたらそのフォルダに表紙で表示させたい画像を入れます。ファイル名は必ず「cover.jpg」としてください。

なお、今回つくり進めている電子書籍『こころ』用の表紙画像を用意しましたので、よろしければ下記よりダウンロードご利用ください。
https://www.dropbox.com/s/9z6ka8oi7k4aa6i/cover.jpg

『こころ』の表紙画像置き場

ダウンロードした表紙画像をお使いになる場合は、上のようになっていればOKです。

もちろん、皆さんご自身で用意した画像を表紙に使うことも可能です。その際は画像の「ピクセル数」に注意してください。

ピクセル数の確認方法

Windowsの場合
画像ファイルを右クリックし、出てきたメニューから「プロパティ」を選んでください。そうすると「cover.jpgのプロパティ」というウィンドウが表示されますので、そこで「詳細」タブをクリックして下さい。そうすると下のようなウィンドウが表示されます。

ピクセル数の確認方法(Windowsの場合)

そのなかの「イメージ」という項目に「幅」と「高さ」のピクセル数が表記されていますが、その「高さ」が1500〜2500ピクセル程度であることが望ましいです。ピクセル数が少ないとぼんやりとした画像に、多過ぎると表示されないなどの問題が発生することがあります。

Macの場合
画像を右クリックして出てくるメニューから「情報を見る」をクリックすると、詳細情報という項目内に「幅」と「高さ」のピクセル数が表示されます。

ピクセル数の確認方法(Macの場合)

デジカメで撮った画像は上記でお伝えした数値より一桁多いレベルで高ピクセルですので電子書籍で使用する際はその数値を減らす必要があります。逆に、もともとピクセル数が少ない画像データについて、その数値を増やしても画像はキレイになりません。

ピクセル数の変更方法

画像のピクセル数変更は、さまざまな画像加工ソフトで対応可能ですが、今回はWindowsMacともに最初からインストールされているソフトでの対応方法を紹介します。

Windowsの場合
「ペイント」というソフトを使います。Windowsのスタートメニュー>すべてのプログラム>アクセサリ>と進んでいくと出てきます。

「サイズ変更と傾斜」のボタンをクリックすると、同名の設定ウィンドウが出てきますのでそこに数値を入力して画像サイズを変更します。

ピクセル数の変更方法(Windowsの場合)

Macの場合
「プレビュー」というソフトを使います。初期設定でDockに設定されています。

Macのソフト『プレビュー』

まず画像ファイルをプレビューで開きます(プレビューのアイコンにドラッグ&ドロップすると開きます)。画像が開いたら、メニューバーの「ツール」をクリックし、そのメニューにある「サイズを調整」とクリックします。そうすると設定ウィンドウが出てきますのでそこに数値を入力して画像サイズを変更します。

ピクセル数の変更方法(Macの場合)

電子書籍づくりに限らず、画像データのピクセル数を変更することは、パソコン仕事をしているとままあります。これを機会にそのやり方を押さえておきましょう。

本扉

p-002.xhtmlをエディタで開いていただき、ファイルの先頭の方を表示すると、

<p>こころ</p>

<p>夏目漱石</p>

という2行が見えると思います。

これが今回本扉で表示させたい内容です。

作業手順

「作品名」と「著者名」の2行を、本文ファイル(p-002.xhtml)から本扉ファイル(p-titlepage.xhtml)へ移動するのですが、その手段としてこの2行を「切り取り」ます*1。また併せて、その下にある【テキスト内に現れる記号に付いて】という説明書き(上下に破線のある部分)を削除します。

本扉は移動。説明は削除。

次に「p-titlepage.xhtml」をエディタで開いて、切り取った内容を下記の通りに貼付けます。

また同時に

<div class="main">

となっている行を

<div class="vrtl block-align-center" style="height:100%;">

に差し替えてください。下のようになればOKです。

本扉のxhtmlファイルの記述

問題なければp-titlepage.xhtml、p-002.xhtmlとも上書き保存してください。次にp-titlepage.xhtmlをブラウザで開きます。

本扉のブラウザでの見え方

このように見えればOKです。先ほどdivタグを変更しましたが、これによって本扉ページのセンター位置に縦書きで文字が配置されるようになりました。

奥付

目次と本文はちょっと後回しにして、先に「奥付」をつくります。

作業手順

p-002.xhtmlをエディタで開いていただき、ファイルの終わりの方を表示します。

奥付のセンテンス(切取り箇所)

上の画像の通り

底本:「こころ」〜
から
〜ボランティアの皆さんです。</p>

までをp-002.xhtmlから切り取ります。

次に「p-colophon.xhtml」をエディタで開いて、先ほど切り取った内容を下記の青くなっている箇所に貼付けます。

奥付の貼り付け先

貼付けたらp-colophon.xhtml、p-002.xhtmlとも上書き保存してください。次にp-colophon.xhtmlをブラウザで開きます。

奥付のブラウザでの見え方

このように見えればOKです。ちなみに奥付はあえて横書きになるように設定してあります。

本文

書籍の本文は、一般的に「章」「節」「見出し」といった階層構造になっていることを皆さんご存知かと思うのですが、電子書籍の場合、いずれかの階層でファイルを分割するのが常となっています。

現在このブログでは夏目漱石の『こころ』の電子書籍を作り進めていますが、この小説の構造を例に見ていきましょう。

下の「p-toc.xhtml」からもわかる通り、この小説は「上」「中」「下」の章に別れており、その中がさらに漢数字で節に別れています。

本文の階層構造の説明

今回、本文ファイルは「章ごと」で分けることとしますので、本文ファイルは3つになります。

作業手順

まず「p-002.xhtml」を二つ複製してください。

本文ファイルの分割手順

増えた2つのファイルを、それぞれ

にファイル名を変更してください。

本文分割後のxhtmlフォルダ内

このようになればOKです。

この3ファイルはファイルネームこそ異なりますが、現時点では内容はすべて同じ(1章から3章まですべて含まれる本文データ)です。ここから各ファイルごとに「必要な内容」だけを残し、それ以外を削除します。

要は

p-001.xhtml → 1章(「上」)だけ残す=2章と3章部分を削除。

p-002.xhtml → 2章(「中」)だけ残す=1章と3章部分を削除。

p-003.xhtml → 3章(「下」)だけ残す=1章と2章部分を削除。 

となればOK、ということになります。

各章とも、始まりは「h1タグの行」からになります。また章と章の間(上と中の間・中と下の間)には

[#改ページ]

という章の区切りとなるマークが入っているので、それらをエディタの検索機能で探しながら、指定されたセンテンスだけを残すように作業してみてください。

また、3ファイルとも「(x)htmlのファイルにお決まりで記述する文言」が入っている必要があるので、誤ってそれまで削除してしまわないよう注意してください。

本文ファイル変更不可部分の説明

目次と本文のリンク

最後に目次ファイル「navigation-documents.xhtml」「p-toc.xhtml」を調整します。

作業手順

navigation-documents.xhtmlテキストエディタで開きます。

全ての行について、その記述には一定の法則があり、その意味は下記の通りとなります。

navigation-documents.xhtmlの記述ルール

ここには目次項目(青いアンダーライン部分)から、本文のどこ(赤のアンダーライン)にジャンプするのかが記述されています。そしてジャンプ先の「id」については、以前の作業で連番が振られているから良いのですが、「ファイル名」の部分は現状のままだと問題があります。なぜならそのファイル名を表す部分がすべて「p-000.xhtml」という仮のファイル名のままになっているからです。なのでこれから、この部分を実情に沿ったファイル名に変更していきます。

現在、電子書籍の作成を進めている『こころ』では、

本文は

第一章(「上」と呼ばれるセンテンス)→p-001.xhtml

第二章(「中」と呼ばれるセンテンス)→p-002.xhtml

第三章(「下」と呼ばれるセンテンス)→p-003.xhtml

の3ファイルになるので、目次内のファイル名もそれに対応するように直します。

その際は検索置換をうまく使って作業を省力化しましょう。

navigation-documents.xhtmlの変更箇所の検索置換説明

置換する際には、選択した範囲のみに置換が掛かるよう設定してから作業します。

正規表現の際のチェックボックス入れ忘れ注意

論理目次のリンクの修正が終わったら、本文目次も同じ要領で作業します。やるとこは同じです(リンク内の「p-000.xhtml」に対応する本文ファイル名に直します)。

今日のまとめ

EPUBの構造。今回はその役割りごとにページファイル(.xhtml)を分割しました。

その内訳は

  • 表紙
  • 本扉
  • 目次
  • 本文×3ファイル
  • 奥付

となりました。

また分割によりできた本文のファイル名を「論理目次」「本文目次」のそれぞれに反映させます。

次回は
電子書籍づくり実践(書誌情報を書く)についてお話します。

*1:コピーでなく切り取り。ショートカットは「ctrl+X」となります。