EPUBでは画像の表示が難しい
Pagesで電子書籍を作っていて苦戦したのが「画像の表示」。
画像挿入は「イメージギャラリー」からやるか、
画像ファイルをドラッグ＆ドロップする方法があります。
一見、簡単そうに見えますが、油断してはなりません。
Pagesで問題なくても、EPUBに書き出してから異常発生するケースがあるのです。
画像が小さすぎたり、スマホで表示したら切れていたり、沈んでしまったり・・・・などなど。
これでは「運任せ」で画像を挿入することになります。
現状では、PagesはEPUB専用ソフトではないので、細かく設定できないのです。
そこで今回、EPUBに画像を挿入する方法を掘り下げてみました。
EPUBにちゃんと画像を挿入する方法
その方法はずばり、EPUBのコードを直接編集することです。
EPUBで書き出した後、コードを自分で編集するしかありません。
前回、縦書き対応のところで、EPUBの「中身を編集する方法」を学びました。
その方法では、一旦EPUBファイルを解凍し、中に入っているファイルを編集。
中身を編集後、zip圧縮してEPUBへ戻す作業をしていました。
今回、画像挿入でも同じようにEPUB内部を編集しますよ。
EPUBの中身をみると、
OPS
というフォルダ中に、「XHMLファイル」がいくつか入っています。
これは、書籍本文の内容が記載されている重要なファイルたち。
Pagesでは、chapter-1.xhtmlなどのようにchapterごとに分かれていますね。
それ以外にもtoc.xhmlというXHMLファイルもあります。
これはテーブルオブコンテンツ（Table of Contents）の略で、つまり「目次のファイル」です。
toc.xhml以外のXHTMLを編集して、画像を文中に挿入していきましょう。
ズバリ、XHTMLファイルで、画像を挿入するためには次のコード。
<img src="images/画像名" alt="なんでもよい"/>
これをXTMLファイル中に記述すると、画像が書籍内で表示されるのですね。
幸運なことに、 HTMLの記述とだいたい一緒。
唯一の違いは、タグの終了の記述。
XHTMLの場合は /> で終わっていて、スラッシュが必須なのです。
それもそのはず。
XHTMLとは、
XHTMLとは、Webページの記述などに用いられるマークアップ言語であるHTML（HyperText Markup Language）をXMLの仕様に従って定義しなおした言語。
IT用語辞典より
のことなので、基本ルールはHTML。
記述方法だけがXMLになっているわけです。
HTMLとXHTMLは親戚なので、記述方法が似ていることにも納得です。
さて、ここで重要なのが画像のファイルパスです。
img要素のsrc属性に何を指定するのでしょうか？
EPUBの画像はファイル階層の、
OPSのimages
に入っています。
したがって、OPSフォルダ内のXHTMLファイルからの相対パスは
images
になります。
ゆえに、src属性は “images/ 画像ファイル名” でオッケーです。
残りの代替属性altはなんでも構いません。
適当に画像ファイル名でいいでしょう。
例えば、apple.jpgをEPUBファイルで表示したい場合、
<img src="images/apple.jpg" alt="apple.jpg"/>
です。
するとどうでしょうか？
画像が適切に表示されるではありませんか。
しかも、デバイス幅を変えても、ちゃんと表示されます。
タブレットでもスマホでも、電子書籍リーダーでしっかり画像を表示できそうですね。
画像サイズを変更したいときは？
以上、EPUBに画像を表示する方法でした。
ただ、時によっては画像の大きさを指定したい時がありますよね？
そういう時も、HTMLの記述とだいたい同じ。
ズバリ、width属性・height属性を指定すればいいのです。
例えば、
<img src="images/apple.jpg" alt="apple.jpg" width="300" height ="200">
とすれば、
幅300ピクセル 高さが200ピクセル
のサイズへ変更できます。
もし、画面いっぱいに表示したい場合、
width = “100%”
とすればいいですね。
<img src="images/apple.jpg" alt="apple.jpg" width="100%" />
いやーEPUBは深い。
画像を挿入するなら、書き出した後にEPUBの中身を分解して編集しましょう。
EPUBで画像表示がうまくいかないときに試しみてください。
それでは！
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
