Sigli で ePubを作る　ワープロ『一太郎』から出力→ 編集のコツ

2020 8/24

2020.08.24

ジャストシステムのワープロ『一太郎』のメリットは、クリック一つで ePub 形式のファイルを出力できる点ですが、そのままでは縦書きに対応しないケースもあり、様々な電子書籍リーダーで正常に表示するには、自分で、ePubファイルを編集して、読みやすい書籍スタイルにアレンジする必要があります。

電子書籍エディタ（実際には、XHTMLエディタ）の Sigli を使えば、比較的簡単に修正することができますので、HTMLタグの経験がある方は、ぜひトライしてください。

ePubファイルの構造を理解する

ePub形式というと、Kindleの mobi ファイルみたいに、得たいの知れない新型ファイル形式を想像する人も少なくないと思いますが、なんてこたーない。

XHTMLファイルと、CSS（スタイルシート）、その他のコンポーネントファイルの詰め合わせです。

インターネット老人会で、ウェブサイトを作成するのに、自分でHTMLタグを打っていた世代には、「なーんだ」って感じですね。

私も、全く新しいファイルかと思って身構えていましたが、実際に Sigli で開いてみて、びっくり。

「IBM　ホームページ・ビルダーの世界やん！」

ePubファイルの実体は、XHTMLファイルといっても過言ではありません。

身構えていたインターネット老人会の皆さん、ホッとしたでしょう。

これがePubの中身ですよ。

こちらがファイル構造。

ePubのファイル構造

これがエディタ画面です。

懐かしのホームページ・ビルダー、そのものです。

しかし、一太郎から出力したePubは余計なタグが入り交じっていて、ソースとしては、すっきと美しい部類には入りません。

余計なタグを抜いて、ファイルを軽量化し、class名も分かりやすいものに置き換えた方がいいです。

以下、そのコツについて、ご紹介します。

Sigliのインストール＆セットアップ

下記ページから、自身のOSに合ったバージョンをダウンロードします。

概要のページ
https://sigil-ebook.com/

ダウンロードリンク（Github）
https://github.com/Sigil-Ebook/Sigil/releases/tag/1.0.0

通常の手順でインストールしたら、最初に『編集』→『環境設定』を開き、バージョン設定とUIのフォントを設定します。

ePub と CSS のバージョン設定は非常に重要なので、最新版にチェックを忘れずに。

ePubのバージョン設定

CSSのバージョン設定

あとは、エディタ画面、および、プレビュー画面のフォントを指定します。

いずれも、アプリで使用するフォントであり、実際にePubに読み込むフォントとは異なります。

エディタ画面のフォント設定

プレビュー画面のフォント設定

縦書きに合わせたCSSの設定とXHMTLの編集

classを調整する

ここでは、「HTMLのタグ打ちができる」ということを前提に話を進めます。

下記のソースコードを見れば分かるように、内容的にはHTMLファイルとほぼ同じです。

XHTMLにおいて、通用するタグと、通用しないタグがあり、それについては、個別に調べるしかないのですが、Sigli にも独自のチェック機能がありますし、Google ブックスの場合、ファイルエラーも細かく提示してくれるので、一から勉強し直す必要はありません。エラーが出たら、その都度、調べる程度で対応できると思います。

とりあえず、ヘッダーはそのまま。

title タグ、keywords 、content（メタデスクリプション）あたりをしっかり記入しておきましょう。

重要なのは、 body 以降。

class　の調整ですね。

XHTMLの修正

一太郎の場合、各classは自動的に割り当てられます。

たとえば、大見出し、中見出し、小見出し、本文と続く場合、下記のように出力されます。

classの自動スタイル設定

一太郎の　「段落スタイルセット』で設定した、大見出し、中見出し、小見出し、本文が、上図のような「見出しタグ」に変換されるわけですね。

一太郎　見出し　スタイル

このうち、data-ichitaro-para-stylename というのは、一太郎専用のタグなので、ePub には特に必要ありません。

data-ichitaro-para-stylename="大見出し(ｵｰﾄｽﾀｲﾙ)"

data-ichitaro-para-stylename="中見出し(ｵｰﾄｽﾀｲﾙ)"

data-ichitaro-para-stylename="小見出し(ｵｰﾄｽﾀｲﾙ)"

data-ichitaro-para-stylename="本文(ｵｰﾄｽﾀｲﾙ)"

特に、段落タグの全てに、data-ichitaro-para-stylename="本文(ｵｰﾄｽﾀｲﾙ)"　が挿入されて、悪夢のような状況になっています。

一太郎独自の段落スタイルは削除する

こうした、一太郎独自の不要なタグは、プレビュー画面を見ながら削除します。

検索・置換で通常の＜P＞タグに置き換えたり。

検索・置換で不要なタグを削除する

こちらは、荒技になりますが、不要な文字列を削除します。誤って、余計な半角スペースなどを挿入しないように。

不要なタグを削除

これだけでもファイルがだいぶ軽量化されます。

次に、各 classの要素をアレンジします。

OEBPS/stylevertical.css で右クリックして、外部エディタを呼び出します。

他のアプリケーション...　で、自分の好きなエディタを登録することができます。

CSSを外部エディタで編集する

初期のCSSでは、大見出し（h1）の設定は下記の通り。

h1.h11b {
-epub-break-after: always;
-moz-break-after: always;
-ms-break-after: always;
-o-break-after: always;
-webkit-page-break-after: always;
break-after: always;
margin-right: 12.6em;
padding-bottom: 0.00em ;
padding-top: 4.15em;
page-break-after: always;
}

プレビューは下図のように表示されます。

大見出しと中見出しの間が狭まって、見にくいですね。

初期の表示

そこで、　 margin-left:3em;　を追加すると、ちゃんと左側に余白ができます。

CSSの修正後

また、

font-family: Meiryo;
font-weight: 900;

を追加して、大見出しだけフォントをメイリオ+極太にしてみると、下図のように反映されます。

CSSでフォントスタイルを調整

万事、このように、CSSで調整すれば、見映えのいい ePub を作成することができます。

HTML式のホームページと同じ要領ですね。

フォントは、　『縦書き+明朝体』を重視するなら、遊明朝か、IPA明朝あたりが無難だと思います。

HTMLサイトと異なり、ePubは、リーダーによって、全く見え方も異なるので、凝ったフォントは指定しない方がいいです。

私も最初、リュウミンを使っていましたが、やはり一般のePubリーダーやブラウザでは綺麗に表示されず、遊明朝に変えました。

font-family:"Yu Mincho","Arial","Osaka","IPA Mincho","IPAmj明朝","Georgia","Hiragino Mincho ProN","'Hiragino Kaku Gothic ProN";

class 名も、自分が管理しやすい名称に置き換えることも可能です。

CSSは横書き用・縦書き用と分けて調整

CSSは、横書き用、縦書き用の二種類が梱包されています。

OEBPS/stylehorizontal.css　（横書き）

OEBPS/stylevertical.css　（縦書き）

CSSは二種類存在し、どちらも同じように対応しなければならないということです。

また、行間にmargin を取り入れる場合、横書きと縦書きでは、margin-◎　の上下左右の指定も異なります。

訂正は数カ所で済みますが、うっかり忘れていると、横書きの時だけ、文字列の間隔がアンバランスになったりしますので、上下左右の指定を間違えないように。

ちなみに、縦書き指定のclassは、下図のような感じです。

writing-mode: vertical-rl;

設定の仕方は、「CSS 縦書き」で検索すれば、いろんな情報がUPされていますので、個別に調べてみてください。

文字列の縦書きの指定

あと、改ページは、下記の通りです。

-epub-break-after: always;
-moz-break-after: always;
-ms-break-after: always;
-o-break-after: always;
-webkit-page-break-after: always;
break-after: always;

これも、ビューワによって、見え方がまちまちなので、もう少し、共通性が欲しいところです。

改ページの指定