- » Kindle
- » iBooks
- » kobo
- » B.W.
- 300円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 200円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 200円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 600円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 400円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 200円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 100円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 200円
- » Kindle
- » iBooks
- » kobo
- » B.W.
- 490円
doncha.net制作・発行:KindleやiBooks、楽天kobo、BOOK☆WALKERで読む電子書籍
固定レイアウトのSVG指定
先日公開した『kindle猫写真集』https://t2aki.doncha.net/?id=1382691748 の固定レイアウト、SVGでの指定について補足自分メモ。
KADOKAWAグループのEPUB制作仕様が公開されたので中を見たところ、画像は固定レイアウトにしてSVGで記述する、ということなのでちょっとだけ調べた。
目次画像用に使ったxhtmlファイル
(画像のサイズは 900x1270 で、画像の中に目次がある)
※KADOKAWAの仕様ではまだ「imageマップは使わない」となっているけど、ibooksなどEPUB3では使えるので目次に使った(クリッカブルマップのSVG版、かな)
上記のxhtml、もろもろ呪文状態で使ってるんだけど
svg(SVGで画像表示の設定。XMLだ)
・viewBox
画像領域のどの部分を切り取るかという指定(画像領域の左上からxyの座標を指定する)上記だと、x座標0、y座標0、幅900、高さ1270
・width height
viewBoxで切り取った画像領域をブラウザ(リーダー)で表示するサイズを指定。上記だと幅100%、高さ100%と目いっぱい表示するように指定(opfや、metaタグのviewportだったりで表示サイズを900x1270に指定してあるので天地左右100%でOK)
image(実際の画像ファイルの指定)
・実際のサイズを指定してファイルを指定する。 HTMLだとimgタグ。
rect(四角領域を作ってクリッカブルマップ)
・xy座標と、幅高さを指定してその四角の中は透明で埋める(fill-opacity)この四角を目次のリンクにする(HTMLのusemapより指定のしかたが分かりやすい)
一枚画像だけのためのxhtmlファイルなので愛想もなにもない短い単純なファイル。
固定レイアウトは画像サイズも揃えるので、画像ファイル名だけが違うxhtmlが画像の数だけ単調に並ぶ。
KADOKAWAのEPUB仕様では、リフローだとspine部で該当ページだけ固定レイアウト指定することになっている。
本文に混じる挿絵や見開き横長挿絵のために固定とリフローの混在がkindleやibooksで使えるようになってからが本番、だな。
KADOKAWA-EPUB PORTAL(EPUB制作仕様ページ)
https://kadokawa-epub.bookwalker.co.jp/home
↑これはかなり細かくて丁寧な資料なので、オススメ。
- 『おかえりください』サウンドノベルWINDOWS版
- 『おかえりください』本編を加筆修正、6つのバッドエンド分岐シナリオを追加してサウンドノベル化!
音と映像が、血まみれのこっくりさんの惨劇を蘇らせる。 - 【無料体験版】はこちら
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」