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

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

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

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

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

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

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

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

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

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

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

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

どんなスタイルでもOK。

例えばPagesだと、段落スタイルから「プラスマーク」をクリックし、新規段落スタイルを作成。

そして名前を「線」とすればOK。

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

線のクラス名を特定

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

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

FREE SWORDER

電子書籍のEPUBを編集するならSigilがおすすめ

https://freesworder.net/epub-sigil

 電子書籍制作で手間取っていたのがEPUBファイルの編集でした。Macの文書作成ソフト「Pages」で出力したEPUBは完璧ではありません。EPUBのソースコードをいじって「最終調整」する必要がありました。たとえば、 縦書きの対応 画像の挿入 CSSスタイルの適用などですね。 文書作成ソフトではいじれない領域で、ソースファイルをいじらねばなりません。そしてお察しの通り、ソースコードをいじるのは煩雑さを極め、次の手順を踏む必要があったのです。 EPUBファイルをzipに変換 解凍して中のファイルを編集 再びZIPに戻し...

「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

【参考記事】

にししふぁくとりー

 

8 Users

21 Pockets

1本だけ線を引くCSS - スタイルシートTipsふぁくとりー

https://www.nishishi.com/css/line-border-hr.html

文章や話題の区切りを示す目的とか、何らかのデザインなどでウェブページ内に「1本だけ線を引きたい」と思うことがあります。細い1本の横線を。CSS(スタイルシート)を使えば、太さ1ピクセルの線を1本だけ横方向に引くのも簡単です。「ボックスの枠線を活用する」方法と「hr要素を装飾する」方法がありますので、その2通りを解説。

www.htmq.com

 

26 Users

50 Pockets

border－スタイルシートリファレンス

http://www.htmq.com/style/border.shtml

HTMLタグ・スタイルシート・特殊文字等の早見表

飯橋凛（いいはし りん）

おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。

ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。

質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。