- 絳アト日記: ePub 2.0 ことはじめ (1) シンプルな ePub を作る
- 絳アト日記: ePub 2.0 ことはじめ (2) iBooks で確認
- 絳アト日記: ePub 2.0 ことはじめ (3) HTML 整形
- 絳アト日記: ePub 2.0 ことはじめ (4) Makefile を作る
- 絳アト日記: ePub 2.0 ことはじめ (5) 目次の作成
- 絳アト日記: ePub 2.0 ことはじめ (6) 画像の挿入
の続きです。
ePub 2.0 ことはじめ (3) と (6) で構造化テキストの作成ができる様になりました。本章では、構造化したテキストにスタイルを追加して見栄えを良くする方法を説明します。
スタイルは CSS 2.1 で設定します。
スタイルの追加
最初に、スタイルの適用前と適用後の違いをお見せします。
今回はシンプルに、p
要素で出来る「空行」をなくすスタイルを適用してみます。
スタイル適用前は上のスクリーン・ショットの様に空行が空いています。スタイル適用後は、下のスクリーン・ショットの様に空行がなくなります。
ちょっと見た目が悪いですかね? text-indent
なども設定すると良いと思います。今回は、一番シンプルで分かり易いサンプルということで、勘弁して下さい。
Stylesheet の追加
スタイル・シート「style.css」を OEBPS ディレクトリーの中に置きます。style.css の中身は下記の通りです (サンプルなので、かなり大雑把です m(_ _)m):
p {
margin: 0;
}
XHTML ファイルから style.css へリンク
CSS ファイルを使う全ての XHTML ファイルから、style.css へのリンクを張ります。
XHTML の head
要素に次の link
要素を追記します。
<link rel="stylesheet" href="style.css"/>
content.opf の変更
最後に、ePub ドキュメントに style.css を認識させる作業が必要です。
content.opf ファイルの manifest
要素にスタイル・シートの item
を追記します。次の様になるでしょう。
<manifest>
<item id="ncx" href="toc.ncx" media-type="text/xml" />
<item id="style" href="style.css" media-type="text/css" />
...
以上で、スタイル・シートの追加作業はおわりです。CSS の参考書を頼りに、読み易いスタイルを作成しましょう。
0 件のコメント:
コメントを投稿