■はじめに
前回はEPUB変換サービス「でんでんコンバーター」を使用したEPUBファイル制作について、前々回の続きを行いました。前回はテキストファイルに「でんでんマークダウン」を用いて、見出し、リスト(通常、順序)、ファイル分割などを行いました。

特に見出しは、目次の項目となるので非常に重要です。

今回は、過去2回のでんでんコンバーターによるEPUB制作の補足として、画像の埋め込みやCSSの利用について紹介します。なお、今回は補足としての位置づけなので、テキストファイルの全文掲載は割愛します。
■画像について
ここでは、表紙画像と本文への画像の埋め込みについて紹介します。EPUBで使用できる画像ファイルの形式はGIF、JPEG、PNG、SVGです。サイズに関してはEPUB規格では特に制限はありませんが、iBookstore用に作成する場合には画素数が200万ピクセル以内でなければいけません。

・表紙画像について
表紙画像は主にリーダーアプリのライブラリ画面でサムネイル表示に使われます。でんでんコンバーターでは、表紙用の画像はGIF、JPEG、PNGのいずれかで作成する必要があります。そしてファイル名を「cover」とします(「cover.gif」「cover.jpg」「cover.png」)。

・本文への画像の埋め込み
画像を埋め込むには、次の書式でマークを指定します。

![ 代替テキスト ]( 画像ファイル名 )

ちなみに、代替テキストというのは画像ファイルが表示されないときに代わりに表示するテキストです。省略することもできますが、視覚障害のある方など読み上げツールを利用している場合、代替テキストが読み上げられることがあるので、何かしら指定しておくことをお勧めします。
マークした部分は、画像ファイルを埋め込むimgタグに変換されます。

<img src= "画像ファイル名" alt="代替テキスト" />

埋め込まれた画像は、Readiumでは原寸サイズで表示されます。



図では、Readiumの表示領域の幅が画像の幅よりも小さいために、画像が切れてしまっています。ブラウザウィンドウの幅を広げれば全て表示されるので、「それで構わない」という場合には特に追加の設定は必要ありません。

電子書籍でよく利用される設定のひとつに表示領域の幅に画像のサイズを合わせて表示するというものがあります。この設定はCSSで行います。CSSについては次の項目で紹介していきます。

■CSSの追加
CSSはHTMLの表示を制御します。例えば、見出しのh1タグやh2タグは見出しを定義するためのタグです。ブラウザで見ると通常のテキストより大きいサイズかつ太字で表示されますが、h1タグ自体にサイズを大きくするとか太くするとかいう意味はありません。このようなデフォルトの表示は、各ブラウザが持っているデフォルトのCSSによって決まります。

デフォルトの表示を変更したい場合には、制作者がCSSを用意して表示に関する設定を上書きします。前項で触れた、画像のサイズもCSSで指定できます。

今回はCSSで以下のスタイル設定を行います。

●見出し(h2タグで囲んだ範囲)を、通常のテキストの1.25倍の大きさにし、色を赤にする。
●画像(imgタグ)のサイズを表示領域の幅に合わせて拡縮する。


CSSは、拡張子「.css」のファイルを作成し、その内部にスタイルを定義します。

CSSファイルは、中身はテキストデータなので、メモ帳やテキストエディットなどのテキストエディタで作成、編集できます。ここではCSSについて解説は割愛しますが、CSSのコードを見れば意味が何となくご理解いただけるでしょう。

今回使用するスタイルは以下のコードで表現できます。


--------------------------------ここから

h2 {
font-size: 1.25em;
color: red;
}
img {
width: 100%;
}


--------------------------------ここまで


少し補足すると、「em」という単位は標準の文字サイズを表すものです。「1.25em」というのは通常の文字サイズの1.25倍の大きさを意味します。「width: 100%」は、幅のサイズを表示領域と同じサイズ(100%)にすることを意味します。

でんでんコンバーターではCSSファイルは1つだけ使用できます。ファイル名は特に指定されておらず、任意のものを指定できます。

■アップロードと確認
従来のテキストファイルに加えて、画像ファイルやCSSファイルもでんでんコンバーターにアップロードすることになります。でんでんコンバーターの[ファイル選択]ボタンで開くファイル選択ダイアログで、Ctrlキー(Windows)かcommandキー(Mac)を押しながらアップロードする複数のファイルを選択します。

変換できたらReadiumに追加して表示を確認しましょう。まず、ライブラリ画面で表紙画像がサムネイルとして表示されることを確認します。



次に、本文を開いて見出しが赤く少し大きめに表示されることと、画像が表示領域に収まるよう縮小されていることを確認します。



なお、iBooksで表示確認する場合には、Dropboxなどのオンラインストレージサービスを利用すると便利です。

■最後に
私事で恐縮ですが、最近「iBooks Authorレッスンノート 」(2,709円:税込)を出版しました。iBooks AuthorはiBooks 用の電子書籍制作ソフトでMac App Storeから無料で入手できます。2013年7月現在、日本語のiBooks AuthorコンテンツはiBookstore で販売できませんが、遠からず販売できるようになると思われるので、今のうちからチェックしておくのも悪くないと思います。なお、本書はKindle版もあるので、チェックしていただけると幸いです。

※7月27日補足追記
記事中に、でんでんコンバーターで作成したEPUBで、画像サイズがはみ出る旨記述がありますが、でんでんコンバーターではデフォルトで画像の幅を調整するスタイルが適用されています。ただし、制作者が独自のCSSファイルをアップロードすると、でんでんコンバーターのデフォルトのCSSが無効になります。そのため、独自のCSSをアップロードする場合には、記事中のように画像の幅を調整するスタイルも自分で作成する必要が生じます。

■著者プロフィール
林 拓也(はやし たくや)
テクニカルライター/トレーニングインストラクター/オーサリングエンジニア
Twitter:@HapHands
Facebook:https://www.facebook.com/takuya.hayashi


ITライフハック
ITライフハック Twitter
ITライフハック Facebook


iBooks Authorレッスンノート
iBooks Authorレッスンノート [単行本(ソフトカバー)]