AI作品を電子書籍で出版⑨SigilでのEPUB編集でやりにくかった点-レイアウト

文字と画像を一体にして絶対改ページされない(画像サイズが可変)ようにできる？

EPUBファイル内で文字と画像を一体にして絶対に改ページされないようにすることは、特定のEPUBリーダーでの表示方法に依存します。EPUBはリフロータイプのフォーマットであり、リーダーやデバイスによって表示が異なるため、改ページの制御は限定的です。

画像と文字を一体化させて改ページができない
変な□が見える
見出しの前で改行はしない方が良い(ワープロソフトでのレイアウト調整のための改行)
Calibreが変なタグをぐちゃぐちゃいれてる

画像と文字を一体化させて改ページができない

一般的なEPUBリーダーでは、画像とテキストを一体にして表示する場合、画像の大きさが可変であっても改ページを完全に制御することは難しいです。EPUBリーダーは画面サイズやフォントサイズに合わせてテキストを自動的に調整し、その結果として改ページが発生する場合があります。

ただし、以下の方法を使用することで、改ページが起こりにくくなる可能性があります：

画像とテキストを同じ段落内に配置する：画像とテキストを同じ段落内に配置することで、EPUBリーダーが画像とテキストを別々の段落として認識し、改ページが起こりにくくなることがあります。ただし、これによってテキストと画像の位置関係が崩れる場合があります。
CSSを使用して改ページを制御する：CSSを使用して改ページの挿入を制御することで、特定の条件下でのみ改ページが行われるようにすることができます。ただし、これはEPUBリーダーによって異なる場合があります。
画像をテキストに組み込む：画像をテキストとして扱う方法もあります。これにより、画像がテキストとして認識され、改ページが起こりにくくなる場合があります。ただし、画像内のテキストは検索や選択ができなくなるため、注意が必要です。

以上の方法を使用して、改ページが発生しにくくすることができますが、完全な制御は難しい場合があります。

漫画みたいに画像データにしちゃった方が良かったかもね…
でもそれだと検索とか、見出し、目次の設定が面倒か…

変な□が見える

sigilとかcalibreで見ると本文とか画像の外側に□の枠が見えるんだけどこれ、kindleでも見えるのかな？

SigilやCalibreでEPUBファイルを表示する際に見える枠線は、EPUBファイルの閲覧ソフトウェアやデバイスによって異なります。この枠線はEPUBファイル内の要素（テキストや画像など）の境界を示すものであり、EPUBファイルを開発する際に便利な表示機能ですが、EPUBリーダーやデバイスによっては表示されない場合もあります。

一般的に、Kindleや他のEPUBリーダーでEPUBファイルを表示する際には、このような枠線は表示されません。EPUBリーダーやデバイスは、EPUBファイルをリフローアブルな形式で表示するため、枠線やその他の編集用のマークアップは無視される傾向があります。

したがって、KindleでEPUBファイルを表示する際には、枠線は通常は表示されません。EPUBファイルをKindleに転送して表示すると、枠線は見えなくなるはずです。しかし、個々のEPUBファイルやEPUBリーダーの設定によっては、異なる場合もありますので、実際にKindleで表示して確認することが重要です。

見出しの前で改行はしない方が良い(ワープロソフトでのレイアウト調整のための改行)

オープンオフィス上でレイアウト整えるのに改行してたけど、これ改ページする見出しの前は改行しない方がいいね。
自動で改ページされていらない白ページが表示されちゃう。

はい、レイアウトを整える際に、改行や改ページの位置を適切に調整することが重要です。特に見出しの前に余分な改行があると、不必要な改ページが発生し、読みやすさに影響を与える可能性があります。

一般的に、見出しの前に改行を入れない方が良いです。これによって、見出しとその直前の段落が密接に結びつき、視覚的にも意味的にも関連付けられることがわかりやすくなります。

オープンオフィス上でレイアウトを整える際には、次の点に注意してください：

見出しの前の改行を削除：見出しの前に余分な改行がある場合は、それを削除してください。
スタイル設定の確認：オープンオフィスで使用するスタイル（見出し、本文など）の設定を確認し、適切なスタイルを適用してください。
改ページの手動設定：必要な場合は、特定の場所での改ページを手動で設定してください。ただし、改ページは適切な箇所でのみ行うようにし、過度に改ページを入れないようにしてください。

これらの手順を実行することで、オープンオフィス上での文書のレイアウトを適切に整えることができます。

Calibreが変なタグをぐちゃぐちゃいれてる

calibreで変換すると画像とかdivでブロック分けられてるけど、これ外した方が綺麗に表示される気がするんだけど、他にも変なclass設定がぐちゃぐちゃついてる

Calibreで変換されたEPUBファイルには、自動生成されたCSSやHTMLが含まれており、時には不要なタグやクラスが多く含まれてしまうことがあります。これが原因で、見栄えや構造が複雑になり、表示が乱れることがあります。

以下は、Calibreで変換されたEPUBファイルを整理し、不要なクラスやタグを削除する手順です：

1. 不要なクラスとタグの削除

Sigilを使った手動の方法

SigilでEPUBを開く：
- Sigilを起動し、変換後のEPUBファイルを開きます。
HTMLファイルを確認：
- 「Book Browser」ペインで、各HTMLファイルを開きます。
不要なタグやクラスを削除：
- HTMLファイルの編集ビューで、不要な<div>, class, idなどを手動で削除します。例えば、以下のようなコードを見つけたら：

<div class="calibre1">
    <p class="calibre2"><img src="Images/image1.jpg" class="calibre3"/></p>
</div>

これを簡略化します：

<p><img src="Images/image1.jpg" alt="Description of image"/></p>

CSSファイルを確認：
- 「Styles」フォルダ内のCSSファイルを開き、不要なクラスやスタイルを削除します。

一括置換の方法

大量の不要なタグやクラスがある場合、一括置換を使用すると効率的です。

検索と置換：
- Sigilの「検索と置換」機能を使用して、特定のクラスやタグを一括で削除します。例えば、特定のクラスを削除する場合：
  - 検索： class="calibre2"
  - 置換：（空欄にする）
複雑な置換：
- 複雑な置換が必要な場合は、正規表現を使用して不要なタグや属性を一括で削除します。

2. Calibreでの再変換

必要に応じて、Calibreで変換の際の設定を調整し、不要なタグやクラスが生成されないようにします。

Calibreの変換設定：
- CalibreでEPUBに変換する際に、以下のオプションを確認・調整します：
  - 「変換オプション」 > 「出力オプション」 > 「EPUB出力」
  - 不要なCSSやクラスの生成を抑える設定に調整します。

3. プレビューと確認

Sigilでプレビュー：
- Sigil内でプレビューし、見た目が整っていることを確認します。
EPUBリーダーでプレビュー：
- 最終的な確認として、Calibreの内蔵ビューアや他のEPUBリーダー（Adobe Digital Editions、Thorium Readerなど）でプレビューし、レイアウトが崩れていないか確認します。

まとめ

不要なタグやクラスの削除：SigilでHTMLとCSSを手動で整理します。
一括置換の活用：大量の不要な要素を効率的に削除するために、一括置換を使用します。
変換設定の調整：Calibreでの変換設定を調整し、不要なタグやクラスの生成を防ぎます。
プレビューと確認：EPUBリーダーで最終的な表示を確認し、レイアウトの整合性をチェックします。

これらの手順を踏むことで、より綺麗で読みやすいEPUBファイルを作成できます。

ちなみに僕は以下のタグをそれぞれ一括置換で消しました。

<div class="p-text_20_body">
<div class="g-fr5">
<div class="g-fr3">
<div class="g-fr6">
<div class="p-p5">
<div class="p-p3">
<div class="g-fr2">
<div class="p-p2">
<div class="p-p6">
<div class="g-fr">
<div class="g-fr1">

</div>

google booksにも登録しようとしたら
エラーがいっぱい出たので
google booksのエラーメッセージに
従って、以下の修正もしました。

<body>を<body><div>に置換
</body>を</div></body>に置換
エラーがでているぺージを手で修正

消したもの

<p class="p-p2">
<strong class="calibre7">
</strong>&#160;</p>
class="calibre"
class="p-p2"
class="calibre7"

TOC(目次のぺージ)

<div><ul>を<body>の下に追加
</ul></div>を<body>の上に追加

<aを<li><aに置換
</a>を</a></li>に置換