EPUBでは画像の表示が難しい
PagesでEPUBファイルを作っていて苦戦したのが「画像の表示」。
Pagesの画像の挿入は「イメージギャラリー」からやるか、
もしくは、Pagesのウインドウに画像ファイルをドラッグ＆ドロップする方法があります。
ただ、Pagesで画像表示が問題なくても、電子書籍ファイルEPUB形式で書き出してから異常が発生するケースが後を絶ちません。
画像が小さすぎたり、スマホで表示したら切れていたり、何か沈んでしまったり・・・・などなど。
これでは運任せでEPUBに画像を挿入することになります。
現状では、PagesはEPUB専用ソフトではないので、細かく画像の設定ができないのです。
そこで今回、EPUBファイルに画像を挿入する方法を掘り下げてみました。
EPUBにちゃんと画像を挿入する方法
その方法はずばり、EPUBのコードを直接編集することです。
Pagesなどの文章作成ソフトに惑わされないためには、書き出した後にコードを自分で編集するしかありません。
前回、縦書き対応のところで、EPUBのファイルの中身を編集する方法を学びましたね？
その方法では、一旦EPUBファイルを解凍して、中に入っているファイルを編集していきました。
そして、中身を編集した後に、zip圧縮してepubに戻す作業をしていました。
今回、画像挿入でも同じようにEPUBファイルの内部を編集していきますよ。
EPUBファイルの中身を見ると、
OPS
というフォルダの中に、
XHMLファイルがいくつか入っています。
これが書籍本文の内容が記載されている重要なファイルたちです。
それ以外にもtoc.xhmlというXHMLファイルもありますが、これはテーブルオブコンテンツ（Table of Contents）の略で、つまり目次のファイルです。
そのため、toc.xhml以外のXHTMLを編集して、画像を文中に挿入していきましょう。
ズバリ、EPUBの中のXHTMLファイルで、画像を挿入するためには次のコードです。
|
1 |
<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/ 画像ファイル名” でオッケーです。
なぜなら、imagesと本文のXHTMLファイルは同じOPSフォルダに入ってますから。
残りの代替属性altはなんでも構いません。
適当に画像ファイル名でいいでしょう。
例えば、apple.jpgという画像をEPUBファイルで表示したい場合、
|
1 |
<img src="images/apple.jpg" alt="apple.jpg"/> |
です。
するとどうでしょうか？
小さくなったり沈んだりしていた画像が適切に表示されるではありませんか。
しかも、デバイス幅を変えても、ちゃんと表示されるときてます。
これなら、タブレットでもスマホでも、電子書籍リーダーでしっかり画像を表示できそうです。
画像のサイズを変更したいときは？
以上、EPUBファイルにちゃんと画像を表示する方法でした。
ただ、時にによっては画像の大きさを自分で指定したい時がありますよね？
そういう時は、またもやHTMLの記述とだいたい同じです。
ズバリ、width属性・height属性をimg要素に指定すればいいのです。
例えば、
|
1 |
<img src="images/apple.jpg" alt="apple.jpg" width="300" height ="200"> |
とすれば、
幅300ピクセル 高さが200ピクセルの画像のサイズに変更できます。
もし、サイズ関係なく、画面いっぱいに画像を表示したい場合ならば、
width = “100%”
としてやればいいですね。
|
1 |
<img src="images/apple.jpg" alt="apple.jpg" width="100%" /> |
いやーEPUBは深い。
ちゃんと書籍中に画像を挿入するなら、書き出した後にEPUBの中身を分解し、編集しなければいけないなと思った次第です。
EPUBで画像の表示がイカれているときは試しみてください。
それでは！
Lin
コメントを残す