電子書籍

EPUBに画像を挿入する

EPUBに画像を挿入する

InDesignレイアウトで画像ファイルを配置しておくことで、書き出したEPUBにも画像が挿入されます。
しかし、ストアに合わせた解像度にコントロールしたり、意図したタグにするためには、InDesignから書き出したEPUBファイルを解凍してフォルダに展開した後に、手動で画像ファイルを配置した方が良いかと思います。

EPUBの解凍方法は下記の記事をご覧ください。

ターミナルを使ってEPUBファイルを解凍する

画像ファイルの追加

解凍したEPUBファイル

FinderScreenSnapz001

OEBPSフォルダ内のimageフォルダに配置する画像ファイルを移動します。
FinderScreenSnapz002

 

EPUBフォルダにファイルを追加したので、content.opfファイルに記述を追加します。
FinderScreenSnapz002 (1)

 

content.opfファイルのmanifestタグ内に追加した画像ファイルの記述をします。

テキストエディットScreenSnapz001

 

画像のみを表示する場合

画像を配置する本文のXHTMLファイルをテキストエディターやWebオーサリングソフトなどで開きます。
FinderScreenSnapz003 (1)

画像を配置する場所にHTMLタグを記述します。例では、imageフォルダ内のPhoto01.jpgファイルを挿入し、classを「photo」、代替テキストをaltで「夜空の写真」としました。

テキストエディットScreenSnapz002

 

次に、OEBPSフォルダのcssフォルダにあるcssファイルをテキストエディタやWebオーサリングソフトなどで開きます。
FinderScreenSnapz004

 

先ほどの画像ファイルは、imgタグでclassをphotoとしたので、cssでは「img.photo」としwidthを20文字分としました。

テキストエディットScreenSnapz001 (1)

ChromeのReadiumで表示を確認すると下記のようになります。
Google ChromeScreenSnapz001

 

マージンを設定する

画像の上下左右にマージンを設けたい場合は、CSSファイルに追記します。

 Google_ChromeScreenSnapz002

回り込みの設定

本文が画像を回り込むように設定してみます。ただし、文字サイズが可変できる電子書籍では回り込みを設定することで可読性が下がる場合もあるので注意が必要です。

回り込みの設定をCSSファイルに追記します。下の例では、マージンが画像の上:0em、右:2em、下:2em、左:2emとして、float:leftで画像が上に回り込むように設定しています。縦組みでは上に画像を回り込ませる場合には「float:left」で、下に回り込ませる場合は「float:right」と設定します。

テキストエディットScreenSnapz002

Google ChromeScreenSnapz004

float:rightとすると、縦組みでは下に画像が回り込みます。
Google ChromeScreenSnapz005

 

画像にキャプションを入れる

画像だけでなく、画像の下にキャプションが入る場合の設定の仕方を解説します。
本文のXHTMLファイルでは下記のように記述をしておきます。画像とキャプションの全体をdivで囲み、その中に画像とキャプションが入っています。それぞれにclass指定をしておきます。

テキストエディットScreenSnapz001

 

CSSファイルでは、下記のように設定しています。

テキストエディットScreenSnapz002 (1)

ChromeのReadiumで表示するの下記のようになります。
Google ChromeScreenSnapz001

Mac版iBooksでの表示です。
iBooksScreenSnapz001

Pocket
LINEで送る

URL
TBURL

返信

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top