電子書籍

EPUBに扉ページを設ける方法

EPUBに扉ページを設ける方法

InDesignから書き出したリフローレイアウトのEPUBに、扉ページを設けたい場合があります。
その手順を覚え書きしておきます。

作例として、宮沢賢治の「銀河鉄道の夜」を使わせていただきました。また、今回はInDesign CS6を使用しました。

InDesign CS6からのEPUB書き出し

「銀河鉄道の夜」は9章で構成されていて、章毎に見出しがあるのでInDesignで「見出し」と「本文」の段落スタイルを作成し、段落スタイル毎のタグ書きだしの設定と、書誌情報の設定(ファイル情報とEPUB書き出し時の書誌情報の設定)、目次の設定、カバー画像の準備をして書き出します。

<段落スタイル>段落スタイルパネル
InDesignScreenSnapz002

<段落スタイル>タグ書きだし
InDesignScreenSnapz001

<書誌情報>ファイルメニュー>ファイル情報
InDesignScreenSnapz003

<目次>
InDesignScreenSnapz004InDesignScreenSnapz005

<カバー画像>
PhotoshopScreenSnapz001

 

準備ができたら、ファイルメニューから書き出しでEPUB形式で書き出します。

InDesignScreenSnapz006

<EPUB書き出しオプション> 一般
InDesignScreenSnapz007

<EPUB書き出しオプション> 詳細
InDesignScreenSnapz008

 

書き出したEPUBをMacのiBooksで表示しました。

iBooksScreenSnapz001

 

目次は章の見出しとリンクしています。

iBooksScreenSnapz002

 

扉ページの設定

EPUBファイルの解凍

InDesignから書き出したEPUBファイルを編集するために、フォルダに解凍します。
手順は下記の記事を参考にして下さい。

ターミナルを使ってEPUBファイルを解凍する

 

扉ページの画像データの準備

9章まであるので扉ページ用の画像データを9つ準備しました。編集用にPhotoshop形式での保存と、EPUB用にJPEG形式で準備します。

PhotoshopScreenSnapz002

 

JPEG形式で書き出したファイルは解凍したEPUBフォルダのOEBPSフォルダ内のimageフォルダに移動しておきます。

FinderScreenSnapz001

 

EPUBフォルダ内にファイルを追加したので、content.opfファイルのmanifestタグに追記しておきます。

テキストエディットScreenSnapz001

 

扉ページ用のXHTMLファイルの作成

扉ページ用のXHTMLファイルを作成します。テキストエディットまたはWebオーサリングソフトで新規ファイルを作成します。
下記のように記述します。(1章の場合)

テキストエディットScreenSnapz001 (1)

保存する際には、拡張子を「.txt」ではなく、「.xhtml」とします。拡張子は「.txt」ではなく「.xhtml」とすることに注意しましょう。標準テキストのエンコーディングは「Unicode(UTF-8)」とします。

テキストエディットScreenSnapz010

拡張子を「.xhtml」としたので、拡張子の選択画面が表示されるので、「“.xhtml”を使用」をクリックします。

テキストエディットScreenSnapz005

2章〜9章は先ほどのファイルを別名保存して章番号の数字だけ変更していきます。テキストエディットで「別名で保存」するには、optionキーを押しながらファイルメニューから「別名で保存」を選びます。

<2章の例>

テキストエディットScreenSnapz001

bodyに指定したclass名を覚えておきます。(例では、chapter)
divに指定したclass名を覚えておきます。(例では、chapter)
imgに指定したclass名を覚えておきます。(例では、chapter)

扉ページ用XHTMLファイルのためのopfファイルの編集

扉ページ用のChapter1.xhtml〜Chapter9.xhtmlファイルを追加したので、opfファイルを編集します。
content.opfファイルをテキストエディットかWebオーサリングソフトで開き、manifestタグ内に扉ページ用xhtmlの記述を追加します。

テキストエディットScreenSnapz003

EPUBの表示順の変更

元のEPUBでは、「ReflowEPUB-1.xhtml」〜「ReflowEPUB-9.xhtml」の順番で表示されましたが、扉ページを設けたので下記の順番で表示させるように変更していきます。

カバーページ
1章の扉ページ
1章の本文ページ
2章の扉ページ
2章の本文ページ
3章の扉ページ
3章の本文ページ
4章の扉ページ
4章の本文ページ
5章の扉ページ
5章の本文ページ
6章の扉ページ
6章の本文ページ
7章の扉ページ
7章の本文ページ
8章の扉ページ
8章の本文ページ
9章の扉ページ
9章の本文ページ

content.opfファイルをテキストエディットかWebオーサリングソフトで開き、spineタグ内の記述を下記のように変更します。

テキストエディットScreenSnapz004

本文ページの見出しの削除

扉ページに章タイトルを作成したので、本文ページの見出しは不要になります。本文ページのxhtmlファイルを開いて、h1タグを削除していきます。

FinderScreenSnapz001 (1)

本文用xhtmlファイルをテキストエディットかWebオーサリングソフトで開き、h1タグの行を削除します。

テキストエディットScreenSnapz006

CSSファイルの編集

扉ページの表示をコントロールするためにCSSファイルを編集します。OEBPSフォルダ内のcssフォルダを開きます。

FinderScreenSnapz001 (2)

cssファイルをテキストエディットかWebオーサリングソフトで開きます。

FinderScreenSnapz002

本文ページのxhtmlファイル内のh1タグは先ほど削除したので、cssファイル内のh1も削除します。

テキストエディットScreenSnapz001 (2)

削除後のcssファイル
テキストエディットScreenSnapz003 (1)

扉ページ用のcssを記述します。
扉ページのxhtmlファイルのbody.(class名)、div.(class名)、img.(class名)のcssを追加します。

追記したら、保存しておきます。

テキストエディットScreenSnapz004 (1)

目次ファイルの編集

目次ファイルは本文用のxhtmlファイルのtoc_markerとリンクされているので、扉ページ用のbodyタグに記述した「id=”toc_marker-1」(1章用)〜「id=”toc_marker-9」(9章用)へとリンクを変更します。

扉ページ用xhtmlのid=”toc_marker-1″
テキストエディットScreenSnapz005 (1)

まずはEPUB2用の目次ファイル「toc.ncx」の記述を修正します。「toc.ncx」をテキストエディットまたはWebオーサリングソフトで開きます。修正前は本文用xhtmlファイルのtoc_markerとリンクされているのが確認できます。
テキストエディットScreenSnapz006 (1)

リンク先を扉ページ用xhtmlファイル(Chapter)のtoc_markerに変更します。
テキストエディットScreenSnapz007

次にEPUB3用の目次ファイル「toc.xhtml」を修正します。先ほどと同様に元の目次は本文用のxhtmlファイルのtoc_markerにリンクされているので、扉ページ用のxhtmlファイルのtoc_markerにリンクを修正します。
修正前のtoc.xhtml
テキストエディットScreenSnapz008

修正後のtoc.xhtmlファイル
テキストエディットScreenSnapz009

目次をタップすることで章の扉ページにジャンプするようになります。
iBooksScreenSnapz001

Pocket
LINEで送る

URL
TBURL

コメント&トラックバック

  • Comments ( 1 )
  • Trackbacks ( 0 )
  1. EPUBに扉ページを付けたいと思っていたので、この記事が大変役に立ちました。お陰様で無事、扉ページ付きのEPUBデータが完成し、MACのiBookではきれいに見ることができました。ですが、Kindle Previewerでkindle用のファイルを作成しようとすると、「TOC にハイパーリンクが作成されていません」というエラーが出て、作成できませんでした。どこが悪いのかを検証しているところですが、何か「よくある間違い」があれば、教えて下さると助かります。

返信

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top