電子書籍制作でEPUBに線を挿入する方法




電子書籍ファイルEPUBに線を入れたい

最近、単語帳の電子書籍を作成しているのですが、その際に、

書籍内に「線」を入れたくなりました。

 

電子書籍の作成にはMacの標準ソフトPagesを使っています。

Pages標準装備のグラフィック線を挿入し、EPUBのリフローで書き出したら、ある問題が発生!!

 

あくまでも線が「画像」として認識されているのでしょう。

文字・デバイスの大きさが変わると線の位置がずれるのです。

Image from Gyazo

そこで、外部要因に左右されない方法を模索しました。

 

線専用の段落スタイルを作る

文書作成ソフトで「線専用の段落スタイル」を作りましょう。

あくまでも「線専用」で文字は書きません。

どんなスタイルでもOK。

例えばPagesだと、段落スタイルから「プラスマーク」をクリックし、新規段落スタイルを作成。
Image from Gyazo
そして名前を「線」とすればOK。

サイズは小さめで「5ピクセル」に設定。
Image from Gyazo

線のクラス名を特定

そんなこんなで、電子書籍が完成したとします。

今度はこいつをSigilで開きます。

 

「Sigil」とは、EPUBの中を閲覧して編集できるソフトで、コードが丸見えに!!

そしたら、「線専用」の段落スタイルのクラス名を探ります。

Pagesでいうと、

chapter-〇〇.

というXHTMLファイルが本文。

そこから線専用の段落スタイルのクラス名を探すのです。

今回、クラス名は「p2」でした。

「2番目に作られた段落のスタイル」という意味なんでしょうね。

ただし、新しい段落スタイルを作るごとに、クラス名は更新されます。

線のスタイルを追加するタイミングは、書籍完成の最終段階をおすすめします。

 

CSSを追加する

そして最後は「線のCSS」を追加。

EPUBファイル階層の

Styles

をのぞき、そこの

book.css

に注目。

ここには電子書籍用のCSSが記述されています。

 

ここに「線のクラス名」のスタイルを追加。

線のスタイルは、下記のものでOK。

 

例えば、「p2」に適用する場合は、

と末尾に追記すればいいのです。

すると、「あ」と「い」の間には何もなかったのに、

 

 

線(solid, 1px, black)が入ります!

 

線は微調整が可能で、

  • 線の太さ= ピクセル(px)の数値をいじる
  • 線の種類=solidをいじる(破線ならdashedに)
  • 色=colorをいじる(red, blue, 16進数のカラーコード)

と、好みに応じて描いてみてください。

 

それでは!

Lin

 

【参考記事】




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。