【epub】目次と本文を分ける

一太郎で生成されたepubは、分解すると本文と目次が同じXHTMLファイルになっています。
Kindleにするだけなら特に問題はありませんが、他書店で販売するときにエラーが起こる可能性があるので分けます。


変更するファイルは下記。

document1.xhtml
content.opf

下記を追加。

toc.xhtml


まずdocument1.xhtmlのコピーを作成する。
document1.xhtmlのコピーをtoc.xhtmlに変更。
目次部分を残してあとは削除する。

変更前



変更後



これでtoc.xhtmlの生成は完了。
toc.xhtmlが生成されたら、document1.xhtmlに記載されている、目次部分を削除する。



次にcontent.opfの変更箇所について


下記のように色が変わっている部分を追加する。




また、一番下に追加されている、

＜itemref idref="toc"/＞

も追加しないとエラーの原因になるので、忘れずに追加する。

【epub】目次へランドマークを追加

大きくわけて、

表紙
もくじ
本編

に分けて目次上に表示する。


変更する項目は下記。

nav.xhtml


一番下に下記を追加する。


＜nav epub:type="landmarks" id="guide"＞
＜h1＞Guide＜/h1＞
＜ol＞
＜li＞＜a epub:type="cover" href="cover.xhtml"＞表紙＜/a＞＜/li＞
＜li＞＜a epub:type="toc" href="toc.xhtml"＞目次＜/a＞＜/li＞
＜li＞＜a epub:type="bodymatter" href="document1.xhtml"＞本編＜/a＞＜/li＞
＜/ol＞
＜/nav＞

本編の箇所には本文の開始場所を設定する。

これでランドマークの設定はOK

【epub】SVGラッピング

やっと・・・！
やっと解決したかも・・・！


SVGラッピングのやり方わかったかも・・・！


SVGでラッピングをすると、どのデバイスで見ても画像のサイズが画面いっぱいにできるらしい・・・。
これをしないと、解像度の高いデバイスで見たときに画像が小さく、左上に表示されてしまう。






変更する箇所は下記

cover.html
coverstyle.css
content.opf






① まずはcover.htmlから


一太郎から吐き出したままのコード

＜?xml version="1.0" encoding="UTF-8" standalone="no"?＞
＜!DOCTYPE html＞
＜html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja" lang="ja"＞
＜head＞
＜title＞タイトル＜/title＞
＜link type="text/css" rel="stylesheet" href="coverstyle.css"/＞
＜/head＞
＜body＞
＜img src="images/coverimage.jpg" alt="表紙画像"/＞
＜/body＞
＜/html＞



これを下記のように変換

＜?xml version="1.0" encoding="UTF-8" standalone="no"?＞
＜!DOCTYPE html＞
＜html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja" lang="ja"＞
＜head＞
＜title＞タイトル＜/title＞
＜link type="text/css" rel="stylesheet" href="coverstyle.css"/＞
＜/head＞
＜body＞
＜svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 817 1200"＞
＜image width="817" height="1200" xlink:href="images/coverimage.jpg"/＞
＜/svg＞
＜/body＞
＜/html＞




② content.opf
manifest部分の一部を変更する。


一太郎から吐き出したままのコード

＜item id="cover" href="cover.xhtml" media-type="application/xhtml+xml"/＞


下記のように変換

＜item id="cover" href="cover.xhtml" media-type="application/xhtml+xml" properties="svg"/＞




③ coverstyle.css


一太郎から吐き出したままのコード

@charset "utf-8";

html { }

body {
margin: 0;
padding: 0;
border: none;
font-size: 1em;
font-style: inherit;
font-weight: inherit;
font-family: inherit;
vertical-align: baseline;
}
img {
margin: 0;
padding: 0;
max-height: 100%;
max-width: 100%;
}



変更後


@charset "utf-8";

html,
body {
margin: 0;
padding: 0;
font-size: 0;
}
svg {
margin: 0;
padding: 0;
}



余計なものが多いのでいらないものはカットする。
これでSVGラッピングが完成！
1週間以上悩んだけど、ネットに全然落ちてないからすごく苦労した・・・。