ひまつぶし雑記帖

doncha.net制作・発行:KindleやiBooks、楽天kobo、BOOK☆WALKERで読む電子書籍

リフロー電子書籍での画像表示

2015/6/2 [14:18:58] (火) 天気

kindleとibooksで指定のしかたや表示が違ってたのでメモ…ていうか今さら。

kindleでは意図通りの表示だったのに、ibooksだと画像のサイズ指定が効かなくてでろ〜んと大きな画像となってしまっていた。もちろんepubcheckではエラーなどない真っ当なepub3ファイルだ。

1ページに1枚の画像だけ、というのはkindleもibooksもほぼ問題はない。同じhtml、cssで意図通りの同じ表示となる。

ところが、本文中に画像が入るケースがよろしくない。
画像のサイズ指定が意図した通りに伝わらず、でろ〜んな画像となってしまった例。
image
iTunes connectのヘルプページにあるibooksの要件(iBooksAssetGuide5.1Revision2_JPN.pdf)にリフローでの画像の指定例が載っていて。

・画像のサイズは画像をくるんだ要素の方(ラッパー、コンテンナ)に指定する
・画像はwidth:100%

てことなので、これはもう随分前から
image
こんなhtmlとcssを使ってたんだけど…ところが、幅(width)の指定が効いてくれていないっぽい。

ということで、リフローで雑誌=写真も多数入りこんでいて、クオリティに定評のある電子雑誌 『トルタル』 をダウンロードしてibooksで拝見したところ、綺麗にレイアウトされている。さすがです。
ダウンロードしたepubファイルを解凍して中身を確認したところ、このiTunes connectの要件PDFと書き方はほぼ同じ。

わたしのファイルと縦横が違うだけやなあ…というところで、もしやといじってみたらほぼ意図通りの画像サイズとなった。
image
なんのこたない。
横で幅(width)指定が効くんだから、縦は高さ(height)指定だろうと。CSS(image-wrap)に幅25%で指定していたところを高さ25%で指定しただけ。

ところが、同じファイルをkindle previewerに読みこませると、これ、高さ25%以上はあるよなあ…。
image

スタイルシートを個別に対応させると管理が大変なので(間違いの元なので)インラインでスタイルを書くか、と思ったらば、どうやらibooksはインラインのスタイルを見てくれない。致命的でもないので、kindleはこれでOKとする。


無料販売本に既刊案内ページをつけるのに、やっぱ表紙画像はあったほうがいいよなあ、ということでゴソゴソやっていて、kindleとibooksのリフローでの画像の違いに気づいた。

kindleはmobiに変換する時に「よきにはからって」幅指定でも大丈夫だったので気づかなかった。
実用書などは横書きばかりなので幅指定で問題なく意図通りとなっていた。
ibooksやkoboでもらう本文中の画像はむしろ小さいもの=原寸表示ばかりだったので縦書きでも指定が効いてないことに気づかなかった。

今まで「たまたま」うまく行ってただけ、という事実に我ながらアキレタ。


[06/02 16:35:51]追記。
kindleはインラインのスタイルが生きるので、そっちで調整。
image
画像に関しては端末やアプリでの差分吸収が面倒くさいでござるなあ。

»電子書籍制作代行についてはこちら

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2019/12>>
       
1234567
891011121314
15161718192021
22232425262728
293031

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』