Sigil　縦書き

　日本語の小説は縦書き右綴じ（小学校の国語の教科書と同じ）が主流で、洋書や小学校の理科の教科書のような横書き左綴じとは逆の方向です。　Sigilはデフォールトが理科の教科書と同じく横書き左綴じです。　ここでは縦書きの本を作る実習をします。　（横書き実習ページはここ）

この実習では、表紙に画像を使い、目次があって、本文中に写真を埋め込んである、小説などの基本となる形式の縦書き電子書籍を作ります。

実習で作った電子書籍はAmazonのKindleで発売出来るMOBI形式の検証でエラーのないものになります。


実習のステップです。

縦書き本　実習


(A)　準備するもの

  1.   Sigil  　日本語の電子書籍を作りますのでSigilソフトはバージョン1.0.0以降のものが必要です。　2020年12月で最新はバージョン1.4.3です。　Sigilのインストールは（ここ）で説明してあります。
  2. 原稿　実習に使う原稿を用意して下さい。　ここでは c.txt という原稿を使って実習を進めます。　原稿はテキスト形式(*.txt)であればどのようなものでも構いません。
    この実習では江戸川乱歩の「怪人二十面相」の抜粋を原稿に用意しました。（ここ）をクリックすると、c.txtファイルがダウンロードされます。
  3. 写真　写真を2枚用意して下さい。　ここでは a.jpg、b.jpgとして実習を進めます。

    a.jpg は本文中で使う写真です。　　Kindle書籍では画像サイズは4インチ×6インチをフルサイズとしています。　300ppiですから、1200×1800ピクセル以上であれば十分な品質です。

    b.jpg は表紙に使う写真です。　　表紙は一般に縦長です。　実習では横長写真でもかまいませんが、Kindleで販売する書籍を作るときは縦長の写真を使ってください。


(B)　Sigilを起動し、Sigilの環境設定をする。（この手順は一度行えば、再度行う必要はありません）


  1. Sigilを起動し、初期設定を確認します。
    Sigilのスタート画面（左にブックブラウザー、中央にコードビュー、右にプレビュー）が表示され、プレビューは白紙の状態です。
    画面１

  2. メインツールバーの  編集  ⇒  環境設定  を選択すると設定画面が現れます。
    画面2

  3.   設定画面  ⇒  全般の設定  ⇒  基本  ⇒  新規または空のEPUB作成時の形式  の中のバージョン3にチェックを入れます。
    画面3

  4.   言語  を選択し
      ユーザーインターフェイス言語  を日本語に、
      メタデータのデフォルト言語  を日本語に設定します。

  5.   OK  ボタンを押し、上記の設定を保存して、一度Sigilを終了します。　その後はSigilを起動すると、上記の設定となっています。
    画面4

(C)　Sigilを起動し、用意したテキストファイル(c.txt)を読み込みます。


  1. Sigilを起動します。
    Sigilのスタート画面（左にブックブラウザー、中央にコードビュー、右にプレビュー）が表示され、プレビューは白紙の状態です。　右が「目次」と表示されていたら、ツールバーの「表示」をクリックしサブメニューの「目次」をクリックしチェックを外してから「プレビュー」をクリックしチェックを付けるとプレビューに変更できます。
    画面5

  2. 設定環境を確認します。
    Sigilスタート画面の左上に"untitled.epub - epub3.0 - Sigil"と表示されているはずです。もしepub2と表示されていたら、上の手順「Sigilの環境設定をする」を実施してください。

  3. メインメニューバーの  開く  をクリックすると、どのファイルを開くかを選択するフォルダー画面が開きます。画面5

  4. 開いたファイルフォルダー画面で、ファイル形式を テキストファイル(*txt) に変更し、画面に表示されたテキスト c.txt を選択し、  開く  ボタンを押します。
    Windowsの場合、ダウンロードした c.txt ファイルはダウンロード・ディレクトリーに保存されています。

画面5

読み込まれたテキストは自動的にHTMLファイルに変換され、コードビューに表示されます。　コードビューには元テキストで改行の場所ごとに段落でまとめたテキストになっており、HTMLファイルがプレビューに本の形で表示されています。　この時点では本は横書きになっていますが、これは縦書きの指定が未了であるためです。


(D)　用意の写真 a.jpg b.jpg を読み込む。


  1. 写真 a.jpgを読み込みます。
    メインメニューバーの ファイル  ⇒  追加   ⇒ 既存のファイル  を選択し、
    画面a3

    フォルダーからa.jpgを選択し、 開く(O)  ボタンを押します。
    画面a4

  2. ブックブラウザー内のImagesをダブルクリックすると、そこに a.jpgがあります。
    画面a5　これで写真 a.jpgがbook.epubに取り込まれ、準備ができました。

  3. 同様の操作をして、b.jpgを準備します。

(E)　スタイルシートを組み込む。

　次のステップは本のレイアウトを整えるスタイルシートの組み込みです。

スタイルシートは電子書籍のスタイル（縦書き・横書き指定、本文のレイアウト指定、挿入写真の位置や大きさ指定）を統一して指定できるシートです。　この実習では縦書きの指定と写真の大きさ指定をします。

  1. 空のスタイルシートを組み込みます。
    初めてSigilを使って、EPUB文書を作りますので、まず空のスタイルシートを組み込みます。
    メインメニューバーにある  ファイル(F)  ⇒  追加  ⇒  空のスタイルシート とクリックします。
    画面6

    ブックブラウザーを見ると、 Styleフォルダーに Style0001.css が追加されています。
    画面7

  2. スタイルシートを開きます。
    ブックブラウザーのStyle0001.cssをダブルクリックし、編集可能にしてください。
    中央のコードビューでStyle0001.cssが開いたことを確認。　初めて開いたので何も記入されていないはずです。
  3. スタイルシートに写真の大きさ指定を書き込みます。
    Style0001.cssに下記青字部を入力又はカット＆ペーストする。
    html { -epub-writing-mode: vertical-rl; }
    img { width: auto; height: 100%; }

    .floattop25 {
    float: left;
    height: 25%;
    padding-top: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em; }

    .floatbottom25 {
    float: right;
    height: 25%;
    padding-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0; }
    注意：　上記文字はスペースを含め、すべて半角文字です。　スペースに全角を使うと動きません。 html、img、.floatleft25と.floatright25の前にスペースを入れてはいけません。

    この記述は、本文、写真や挿絵を本文に差し込むとき、
    1行目は縦書きで行送りが右から左へ
    2行目は写真の高さをいっぱい使い（100%）、縦横比を維持して表示する
    次のブロックは写真の高さを25％にして、縦横比を維持し文章を下側に回り込ませる
    次のブロックは写真の高さを25％にして、縦横比を維持し文章を上側に回り込ませるという指定です。

    画面b1

(F)　本文とスタイルシートをリンクする。

Section0001.xhtml（本文）をStyle0001.css（スタイルシート）でレイアウトするため、この二つのファイルを結びつけるリンクをします。

  1. ブックブラウザーの Section0001.xhtmlを右クリックしメニューの中の「スタイルシートにリンク…」をクリックすると、スタイルシートメニューが開きます。
    画面8　その中のStyle0001.cssにチェックマークを付け、OK」ボタンを押して、Style0001.cssをリンクします。
    画面9中央のコードビューのSection0001.xhtmlに
    <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
    が組み込まれているのを確認して下さい。
    画面a2

本文とスタイルシートのリンクができたので、プレビューは縦書き表示になりました。


(G)「右綴じの本」（ページ送りを右から左にする）であることをOPFファイルに設定します。

　綴じ方指定とは、ページ送りを左送りにするか、右送りにするかという指定になります。　この指定は本のタイトルや著者など本に関する情報を記述するファイル（content.opf）内のデータを修正、設定します。

  1. 左のブックブラウザー内のcontent.opfをダブルクリックし、content.opfを編集できるようにします。
  2. 中央のコードビューにcontent.opfが開きました。　記述の中に <spine>があります。　その記述に次の赤字部を追加します。
    <spine page-progression-direction="rtl" >
    注意：全て半角文字です。　スペースも半角スペースです。　全角スペースがあると動きません。
    画面b2

この記述は「ページ送りを右から左へ」という指定になります。

(H)　原稿を本の形に組みなおします。


原稿の読み込み、写真の読み込みとスタイルシートの準備もできましたので本の素材準備は完了です。　次のステップはばらばらの素材を本の形にレイアウトする作業です。

  1. Section0001.xhtmlを開き、編集できるようにします。（＝ブックブラウザーの中のSection0001.xhtmlタブをダブルクリックする。）　読み込んだ原稿がコードビューに表示され、現在の本のレイアウトがプレビューに表示されています。
    画面10
  2. 見出しを作ります。

    　上の画面の  はしがき  を見出しにします。
    コードビューの「はしがき」をドラッグして（選択して）、メインツールバーの左端の h*  ⇒  h2  を押します。

    画面11

    「はしがき」が見出しとして設定されました。

    コードビューでは はしがき  が<h2>と</h2>で囲まれています。 プレビューでは はしがき  の大きさが本文より大きくなっています。　見出しは使えるレベルが1から6まであり、この実習ではレベル2を使いました。　レベルに応じて本の中の文字の大きさが変わります。

    見出し文の中から目次が作られます。


  3. 同様に本文中のにある次の言葉　「鉄のわな」、「人か魔か」も同様の手順で見出しレベル2にします。

(I)　目次を作ります。


見出しと本文の整理ができたので、写真を組み込む前に目次を作ります。　日本語の電子書籍はEpub3ですから、目次はnav.xhtmlに作成されますが、既存のnav.xhtmlがある場合、その内容は廃棄され新しいnav.xhtmlが作られます。

  1. メインツールバーの  ツール  ⇒  目次  ⇒  目次を生成  を選択します。
    画面15

    目次にする項目が表示されますので、選択したうえで「OK」ボタンを押せば目次（nav.xhtml)が生成されて、本文の後ろに追加されます。
    画面16

  2. 本文の後ろに追加された目次ファイルを本文の前に動かしましょう。
    • ブックブラウザーのnav.xhtmlをドラッグしてSection0001.xhtmlの前に移動させます。
    • 目次はまだ横書きの状態です。　nav.xhtmlをStile0001.cssにリンクさせ、目次を縦書き表示にします。
      ブックブラウザーで  nav.xhtmlを右クリック   ⇒  スタイルシートにリンク…   ⇒  Style0001.cssにチェックマークを付ける   ⇒  OK  　

    画面17

Amazonで販売する電子書籍は必ず移動させましょう。：　Amazonでは論理ファイルのほかに本文の前にHTML目次を置くのを推奨しています。　その理由は表紙をめくったらそこに目次があるのが読者にとって便利だからです。　Sigilで作成するNav.xhtmlは論理ファイルですが、html形式でもありますので、nav.xhtmlを本文前に移動させることでAmazonのリコメンドを満たします。　詳しい説明は ここ にあります。

　目次が表示されているプレビューの「はしがき」をクリックすると、プレビューは本文の「はしがき」に移動して表示されているはずです。　目次の作り方と機能を実感してください。

(J-1)　100％高さの写真を本文の中に組み込みます。

写真 a.jpgを本文の見出し「はじめに」の最初の段落の後に挿入してみます。

  1. コードビューの本文の写真を挿入する位置にカーソルを置きます。
  2. メインメニューバーの  挿入(I)  ⇒  ファイル(F)  とクリックします。
    画面a14画像ファイルリストの中から a.jpgを選択します。「OK」ボタンを押すと、
    画面a6写真が本文中に組み込まれます。
    　プレビュー画面で確認できます。
    画面a7

(J-2)　25％高さの写真を本文の中に組み込み、下に本文を回しこみます。

写真 a.jpgを本文の次の段落の後に挿入してみます。

  1. 本文の次のパラグラフの後の写真を挿入する位置にカーソルを置き、上と同じ要領で写真挿入操作をします。
  2. 挿入されたコードに赤字部を追加します
    <img class="floattop25" alt="a" src="../Images/a.jpg"/>
    画面a15

(J-3)　25％高さの写真を本文の中に組み込み、上に本文を回しこみます。

写真 a.jpgを本文の次の段落の後に挿入してみます。

  1. 本文の次のパラグラフの後の写真を挿入する位置にカーソルを置き、上と同じ要領で写真挿入操作をします。
  2. 挿入されたコードに赤字部を追加します
    <img class="floatbottom25" alt="a" src="../Images/a.jpg"/>
    画面a16

(K)　表紙を作成します。

Amazonの電子書籍は表紙に写真を使います。　Amazonではcover.jpg 名の写真を表紙に使う決まりなので、cover.jpg がないと警告が出ます。　Sigilではどんな写真でも表紙にできますが、Amazonでの販売を目指すなら写真の名前を変えておきましょう。

  1. b.jpgの名前をcover.jpgに変更します。
    1. ブックブラウザー内の  Images  をダブルクリックして写真一覧を表示します。
    2.   b.jpg  を右クリック⇒  名前を変更  をクリックして名前を  cover.jpg  とします。
    画面a16

  2. メインメニューバーの  ツール(T)  ⇒  表紙を追加(C)  とクリックし画面b-36

  3. 写真一覧から  cover.jpg  を選択し  OK  をクリックします。
    画面b-37

ブックブラウザー内にcover.xhtmlが作られました。　表紙です。　プレビューアーに表紙が表示されています。
画面b-38

(L)　メタデータ（書籍情報）を作る。

　電子書籍の書籍情報には最低限「本のタイトル」と「著者名」が必要です。　そのほかに出版社名、出版日や版など任意で追加できますが、Amazonでは本のタイトルと著者名がないとエラーとなり、販売できません。

表紙にタイトルが書かれていると思いますが、表紙のタイトルは写真の中の情報でありメタデータではありません。　書籍情報（メタデータ）が記述される場所（content.opf）に文字でタイトルと著者名を書いておかねばなりません。

  1. メインメニューバーの  ツール(T)  ⇒  メタデータエディター(M)  とクリックし、メタデータエディターテーブルを開きます。
  2. 一番上はこの本が日本語であることを示しています。
  3. その下の  dc:title  が本のタイトルです。　値の所をダブルクリックし、本のタイトルを入力します。
    画面b-39

  4. 右端の  メタデータを追加  ⇒  メタデータのプロパティーを追加  一覧の中から  Author(著者)  を選択し  OK  ボタンを押しメタデータエディタテーブルに著者欄を追加します。
    画面b-40

  5. メタデータエディターに著者欄が追加されましたので、ダブルクリックし、名前を入れます。最後に  OK  ボタンを押しメタデータへの記入が完了です。
    画面b-41
  6. 本のタイトルと著者名がメタデータに入っているのを確認します。
    メタデータはブックブラウザーの中の content.opf ファイルにあるので、このファイルをダブルクリックします。　中央のコードビューにその内容が表示されますので、タイトルと著者名が正しく記入されているのを確認できます。
    画面b-42
  7. 出版年月日など他にも色々な項目（メタデータ）がありますので、試してください。

(M)　試作した電子書籍をセーブしてSigilを終了します。

EPUBファイルの試作が終わりました。　ファイルに保存してください。


(N)　最後の確認　MOBIファイルに変換して警告が出ないことを確認

AmazonではKindleにアップロードする前に電子書籍は警告がないように修正することを進めています。

Sigilで作った電子書籍ですので大きい間違いはないと思いますが、念のためにパソコン上でMOBIファイル変換をして、横書き　実習は終わりです

パソコン上でのMOBE変換の手順は「Kindleフォーマットの電子書籍を試作してみる」に記載しています。
　ここ　をクリックするとその手順に変わります。

↑ PAGE TOP