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