電子書籍ファイルEPUBに線を入れたい
最近、学習に役立つ単語帳の電子書籍を作成しているんですが、その際に、
書籍内に「線」を入れたくなってきました。
僕自身、電子書籍の作成にはMacの標準ソフトPagesを使っているんですが、Pages標準装備のグラフィックの線を挿入してみたところ、EPUBのリフローで書き出してみたら、ある問題が発生！！
あくまでも線が画像として認識されているため、文字の大きさ、デバイスの大きさが変わると線の位置がずれてしまうんですね。
そこで、リフローのEPUBでデバイスや文字の大きさに左右されず、電子書籍の中に線を挿入する方法を模索してみました。
線専用の段落スタイルを作る
文書作成ソフトで「線専用の段落スタイル」を作りましょう。
この段落スタイルは、あくまでも線専用なので文字は書きませんので、どんなスタイルでもOK。
ただし、線らしくも文字のサイズを小さめに設定しておくと、後々先を挿入した際により自然な仕上がりになるでしょう。
例えばPagesの場合だと、段落スタイルから「プラスマーク」をクリックし、新規段落スタイルを作成。
そして名前を「線」とでもしておけばいいでしょう。
サイズは小さめで「5ピクセル」に設定しておきました。
線のクラス名を特定
そんなこんなで、線の段落スタイルを適用した段落を、線を挿入したい段落に適用し続け、電子書籍が完成したとします。
今度はEPUBで書き出した電子書籍をSigilで開きます。
「Sigil」とは復習すると、電子書籍ファイルEPUBの中身を閲覧して編集できるソフト。
電子書籍制作の最終段階で活用する活躍するものでしたよね？
この「Sigil」で書き出したEPUBファイルを開きます。
すると、EPUB中身のコードが丸見えになるでしょう。
そしたら、先程作成した線専用の段落スタイルのクラス名を探ります。
具体的にいうと、
chapter-〇〇.
というXHTMLファイルが本文であり、そこから線専用の段落スタイルのクラス名を探すのです。
例えばPagesの場合、クラス名は「p2」でした。
なぜなら、「あ」と「い」の間に入れた線の段落のコードが
|
1 |
<p class="p2" style=""> </p> |
になっていたからです。
「2番目に作られた段落のスタイル」という意味なんでしょうね。
ただし、このクラス名は新しい段落スタイルを作るごとに、クラス名は更新されていきます。
線のスタイルを追加するタイミングは書籍が完成した最終段階をおすすめします。
CSSを追加する
そして最後は線のCSSを追加します。
Sigil上で開いたEPUBのファイルの階層で
Styles
というフォルダをのぞきます。
そこの
book.css
に注目するんです。
ここには電子書籍に適用するCSSのスタイルが記述されています。
ここに先ほど発見した線のクラス名にスタイルを付与するCSSをファイルの末尾に追加しましょう。
線を表示するスタイルは、下記のものでOK。
|
1 |
border-bottom: 1px solid black; |
例えば、「p2」と言うクラスに適用する場合は、
|
1 2 3 4 5 |
.p2{ border-bottom: 1px solid black; } |
と「book.css」の末尾に追記すればいいのです。
すると、「あ」と「い」の間には何もなかったのに、
線（solid, 1px, black）が入ります！
また、CSSで生み出した線は微調整が可能で、
- 線の太さ＝ ピクセル（px）の数値をいじる
- 線の種類＝solidをいじる（破線ならdashedに）
- 色=colorをいじる（red, blue, 16進数のカラーコード）
でいいですね。理想の線を描いてみてください。
以上です。
いやあ、EPUB素晴らしい。
これなら大きめのタブレットでも、小さめのスマホでも、はたまた電子書籍端末Kindleペーパーホワイトで線を表示できます。
もし僕と同じように、電子書籍EPUBに線を挿入したいと方はお試しあれ。
それでは！
Lin
【参考記事】
おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。
ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。
質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。
コメントを残す