Lecture Notes

4.EPUBの編集 図版の挿入

本文内に図版を入れる場合の手順を説明します。

画像データの準備

本文に挿入する画像は、リーダーアプリによって画像をタップすると画面全体に拡大されるので画面サイズに合わせたサイズで準備します。カラープロファイルは「sRGB」とします。ファイル形式はJPEG形式で保存します。
例では、2560×1600pxで準備しています。

PhotoshopScreenSnapz001

保存場所

準備したJPEGファイルを解凍したEPUBフォルダのOEBPSの「image」フォルダに保存します。
例では「Photo01.jpg」をimageフォルダに保存しています。

FinderScreenSnapz001

 

content.opfファイルの編集

ファイルを追加したので、content.opfファイルを編集します。OEBPSフォルダ内の「content.opf」ファイルをテキストエディットかWebオーサリングソフトで開きます。

FinderScreenSnapz002

 

content.opfファイルのmanifestタグ内に画像ファイルの記述を追加します。
<item id=“Photo01.jpg” href=”image/Photo01.jpg” media-type=”image/jpeg” />

テキストエディットScreenSnapz001

 

imgタグで本文内に画像を挿入する

挿入したい本文があるxhtmlファイルをテキストエディットまたはWebオーサリングソフトで開きます。

FinderScreenSnapz003

 

bodyタグの本文内の画像を挿入したい位置にimgタグで画像を挿入します。
下の例では挿入する画像ファイルがimageフォルダ内の「Photo01.jpg」、表示されない場合の代替テキストをaltで「夜空の写真」とし、cssを指定する際のclass指定を「photo」としています。

<img class=”photo” src=”image/Photo01.jpg” alt=”夜空の写真” />

テキストエディットScreenSnapz002

表示の見え方はCSSファイルでコントロールします。
OEBPSのcssフォルダ内にあるcssファイルをテキストエディットまたはWebオーサリングソフトで開きます。

FinderScreenSnapz004

 

cssに画像の記述を追加します。画像はimgタグで、classをphotoとしているので「img.photo」で指定します。
例では画像の幅を本文の10文字分としたいので、widthを20emとしています。

img.photo {
width:20em;
}

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

 

ChromeのReadiumの表示を確認すると下記のようになっています。

Google ChromeScreenSnapz001

マージンの設定

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

img.photo {
width:20em;
margin-top:4em;
margin-right:2em;
margin-left:2em;
}

Google_ChromeScreenSnapz002

 

回り込みの設定

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

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

img.photo {
width:20em;
margin-top:0em;
margin-right:2em;
margin-left:2em;
margin-bottom:2em;
float:left;
}

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

Google ChromeScreenSnapz004

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

Google ChromeScreenSnapz005

 

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

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

<div class=”figure”>
<img class=”photo” src=”image/Photo01.jpg” alt=”夜空の写真” />
<p class=”figcaption”>何かを暗示する夜空</p>
</div>

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

 

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

div.figure {
-epub-writing-mode: horizontal-tb;
float:left;
margin-right:2em;
margin-bottom:2em;
margin-left:2em;
width:20em;
}
img.photo {
width:100%;
}
p.figcaption {
font-family:sans-serif;
font-size:0.6em;
font-weight:normal;
line-height:2;
margin:0px;
text-align:center;
}

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

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

Google ChromeScreenSnapz001 (1)

Pocket
LINEで送る

URL
TBURL

返信

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

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

Return Top