2015年03月06日

電子書籍ゲームブック制作D Sigil編集編2

前回からの続きです。

【目次の作成】

では目次を作成してみましょう。ゲームブックの電子書籍を作る人によって目次なんて要らないという人からパラグラフ番号も目次に加えたいという人まで様々な意見の人がいると思います。

今回は「はじめに」「ゲームブックのルール」「ゲームブック本編(プロローグ)」「あとがき」に対して目次を設定することとします。
そういった文は書いてないし目次なんていらないという方は無視して先へ進んでください。

「はじめに」の挨拶文が書かれた「hajimeni.html」をダブルクリックして開きます。

1.jpg

テンプレート使用で作成した場合、冒頭の「はじめに」という文字があるのでそれをドラッグして選択状態にします。

2.jpg

テキストが反転し選択状態になりましたら、上のアイコン群の中の一番左にある「h1」と書かれたアイコンをクリックしましょう。

3.jpg

文字が太字になり大きく表示されました。これらの「h1」〜「h6」は見出しを表すものです。「h1」へ行くほど大きい見出しとなります。HTMLのタグと考え方は同じです。

例えば一冊の電子書籍に複数のゲームブックを混在させる場合、その各ゲームブックタイトルを「h1」にして、その中の一つのゲームブックが一章二章に分かれていればその章の頭を「h2」にし、さらに1日目と2日目に分かれていればその頭を「h3」にするといった応用ができます。

ここのサンプルでは「はじめに」と「ゲームブックのルール」と「ゲームブック本編開始(プロローグ)」、「あとがき」にh1タグを仕込みました。
各パラグラフ番号をを目次に入れたいとお考えの方はパラグラフ番号そのものにタグを仕込みましょう。しかしながらパラグラフ番号を目次に入れてもあまり役にたつということはなさそうです。

目次に入れたい項目の先頭にタグを仕込みましたら目次のページを作成しましょう。

4.jpg

「ツール」メニューの「目次」を選択すると隣に「目次を生成」という項目が現れるのでそれをクリック。

5.jpg

すると上の画像のようなウィンドウが出ます。リストに入っているのは先ほど「h1」タグを仕込んだ文字です。「h1」から「h6」までのタグを仕込んだ項目がここに並びます。

リストの右のチェックボックスで目次に入れたい項目と入れたくない項目で分けることができます。入れたくない項目があればチェックを外します。

確認してOKをクリック。

6.jpg

ウィンドウ右端の空欄だった所に設定した目次が表示されるようになりました。クリックするとそこのページに飛びます。

しかし電子書籍の中に目次のページが設置されたわけではないので注意です。そこで目次のページ作成して電子書籍の最初に設置します。

7.jpg

もう一度「ツール」メニューの「目次」を選択すると隣に現れる項目から今度は「HTMLの目次を作成」という所をクリックします。

8.jpg

ウィンドウ左側のファイルリストの一番上に「TOC.xhtml」というファイルが追加され、それをダブルクリックで開くと目次が生成されています。各項目をクリックすればそこのページに飛びます。

これで目次の作成は終了です。


【画像の挿入】

では画像の挿入をしましょう。

サンプル作品では表紙画像を始め、幾つかの画像を作りました。
電子書籍そのものはそれほど画像に対する制限はないようですが、出版販売するサービス側で色々と制限をもたせているようです。

例えばKDP(キンドルダイレクトパブリッシング)では

• 長辺が最低1000ピクセル
• 理想的な縦横比は1.6
•長辺が2500ピクセルの表紙画像を推奨

とされています。

多くの電子書籍出版サービスでは読者の端末に応じて最適なサイズで画像を表示させるため、それほど画像にナーバスにならなくてもいいような気がします。

挿入用の画像はないよという方でも表紙画像は用意しておく必要があると思いますので、色々と素材サイトから探して作成しておくといいと思います。

あと申し訳ありませんが、画像の編集や加工に関してはこちらのブログでの範囲外となるため詳しい作り方などは別のサイトを検索してご覧になさってください。

では画像を挿入しましょう。
まず挿入するすべての画像のファイルを「Sigil」側に投入します。

9.jpg

ウィンドウ左側のファイルリストに「Images」という名のフォルダアイコンがあると思います。それをクリックして選択したら今度は右クリックします。

10.jpg

出てきたメニューから「既存のファイルを追加」を選択してクリックします。

11.jpg

ウィンドウが出てきますので電子書籍に挿入したいすべての画像を選択します。今回サンプルでは6枚の画像を使用します。選択したら「開く」をクリックします。

12.jpg

「Images」のフォルダにすべての画像が保存されました。

そうしましたらまず表紙画像を設定しましょう。表紙にしたい画像のアイコンを選択して右クリック。
表示されたメニューから「セマンティクスを追加」を選び、新たに表示された「表紙の画像」をクリックしましょう。

13.jpg

もう一度メニューを表示してみると「表紙の画像」にチェックが入っていると思います。これで表紙画像の設定は終わりです。


次は文章内に表示させる画像を設置しましょう。
左のリストから画像を表示したいパラグラフのファイルをダブルクリックで開きます。
文章の中で画像を表示したい箇所にカーソルを合わせます。

後々思ったのですがシャッフルした後に画像を挿入する場所を探すのって大変ですね。ま、検閲の時にでもこの画像はこのパラグラフ番号というようにメモしておくといいですよ。

14.jpg

挿入したい箇所にカーソルを合わせたら右クリックします。現れたメニューから「ファイルを挿入」をクリックします。

15.jpg

新たに画像挿入のウインドウが現れます。先ほど読み込ませた画像のリストが出てきますので挿入したい画像を選択してOKをクリックして下さい。

16.jpg

画像サイズが大きいと大きい画像がそのまま表示されてしまいますが、電子書籍化して読者が読む際には適切なサイズに変わりますので心配しないでそのまま続けて下さい。

この要領で他の画像も埋め込んでしまいましょう。
その画像を中央揃えにすると縦書き出力の際に真ん中に画像が配置されます。
これで画像の挿入は終わりです。


【縦書き設定】

Sigilでは縦書き非対応のePub2形式までしか対応していませんが、スタイルシートの活用によって縦書きにはできます。ただ公式に推奨されているわけではないのでその辺を考慮の上、お読みください。

横書きでいいという方はこの項目は必要ありません。

この項目はパソコン初心者の方には少々難しい面もあると思います。できる限り詳しく説明する努力はしますが、一読されてみて何が何だかわからないという方がいらっしゃいましたら横書きで作成するか、Sigilよりも一太郎をお使いすることをお勧めします。Sigilよりも一太郎の方がはるかに使いやすく初心者に優しいです。

では、左のリストビューから「Styles」のフォルダアイコンを選択して右クリック。

17.jpg

メニューから「空のスタイルシートを追加」をクリックします。

18.jpg

「Style0001.css」というファイルが「Styles」のフォルダ下に生成され、中央の編集ウインドウに表示されます。この時はまだ空白で何も書かれていません。

この「Style0001.css」の本文内に下の赤字で書かれたテキストをコピー&ペーストして写してください。


html, body {
writing-mode:
vertical-rl;
-webkit-writing-mode:
vertical-rl;
-epub-writing-mode:
vertical-rl;
-moz-writing-mode:
vertical-rl;
-o-writing-mode:
vertical-rl;
}

span.tny {
writing-mode: horizontal-tb;
-epub-writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
}



(本文中に半角英数字を使用していない場合は「span.tny」から下の部分はペーストしなくても結構です。)

19.jpg


続いてリストビューの下の方にある「content.opf」のファイルもダブルクリックして開いてください。

20.jpg

何やら難しそうな文字列ですがこれはタグの羅列です。この中の60行目あたり(文章の構成によって前後しますので探してください)の
<spine toc="ncx">
という文字を
<spine page-progression-direction="rtl" toc="ncx">
に書き換えてください。

21.jpg

これは左から右へページ送りする構成を逆にして縦書きの書籍のように右から左へとページ送りするものに変更するものです。縦書きにする際は必ず設置してください。


この「Style0001.css」というファイルはスタイルシートと言われるものです。HTMLに詳しい方はご存知のものですね。電子書籍のePUBという形式はHTMLや各ファイルの集合体をZIP圧縮したものだったりします。

スタイルシートは書き込んだだけでは機能いたしません。
各HTMLファイルごとにスタイルシートを読み込みますという宣言をしないことには反映されないのです。

かといって難しく考える必要はありません。これから反映させます。

左のリストビューにあるすべてのHTML(XHTMLも含む)、要するに電子書籍として表示されるコンテンツのあるページを選択します。
サンプルで言うなら一番上の「TOC.xhtml」から「atogaki.xhtml」までのすべてのファイルを選択します。

23.jpg

ドラッグで囲ってもいいですし、最初に一番上のファイルを選択した状態で[Shift]キーを押しながら一番下のファイルをクリックしても選択できます。

24.jpg

選択したならそこで右クリックして出てきたメニューの「スタイルシートにリンク」を選択してクリックします。

25.jpg

ウィンドウが開かれますので先ほど書き込んだ「Style0001.css」の左のチェック欄にチェックを入れてOKをクリックします。

そうすると選択したすべてのページでスタイルシートを読み込んで反映できるようになります。
試しにコードビューで見てみると
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
の構文が新たに追加されているのがわかるでしよう。

ブックビューに戻して確認してみましょう。

26.jpg

変な縦書きになっていますが「Sigil」は海外製のソフトウェアなため正式な縦書き表示はできません。電子書籍ファイルにすればちゃんと縦書き表示されるため問題ありません。

こんな表示なので文章の編集はやりづらいです。横書き表示の時にやっておきましょう。


【縦中横】

あと付け加えますが、半角英数字を文中に使われた方。このまま電子書籍化してしまうと文章は縦書きですが半角英数字の部分だけ寝た表示になってしまいます。

27.jpg

これを立てて表示することを「縦中横」といいます。
Sigilでの編集時にすべての半角数字の前後にタグを加えないといけません。

コードビューにして
<span class="tny">半角英数字</span>

のようにspanで囲いましょう。

28.jpg

Sigilではすべてのファイルを通して検索置換できますのでそれらを使用すると効率よくできると思いますが面倒かも。


【ルビ】

ルビとは難しい漢字などの横に付ける小さい文字で振られたよみがなです。
子供向けにゲームブックを作られる方は配置しておいたほうが良いでしょう。

ルビはコードビュー画面にしてタグで打ち込みます。

<ruby>漢字<rt>よみがな</rt></ruby>


というように一連のデータをrubyで囲み、その中のよみがなをrtで囲むという方法で設置します。

30.jpg

31.jpg

ちなみにサンプルでは最初の「はじめに」の部分だけルビを入れてあります。
とりあえず完成品を見てどんなものかを確かめてみてください。(ただ単に面倒だからなんですが…)



またまた長くなりましたので次回の記事に続きます。
もうちょっとの辛抱です。
posted by 文芸遊戯研究会 at 19:11| Comment(0) | ゲームブック創作 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]