KindleはKF8ではレイアウトの表示機能が強化された。これからの流れとしてはepubで表現可能はレイアウトは再現するのが当たり前になる。レイアウトの機能はほとんどがスタイルシートで指定する。したがって、スタイルシートをあらかじめ作成しておけばそれをcssファイルにペーストするだけで済む。InDesignでは段落スタイルにスタイルシート名を記入しておくと、あとは書き出したepub内のスタイルシートの内容を差し替えるだけでよい。
Kindleのスタイルシートで可能ことは「ビューア別EPUB表示テスト（電書魂）」に整理されてまとめられている。Kindleで可能なレイアウトでスタイルシートを使うものに
テキストの回り込み
罫線囲み
罫線角丸囲み
表組
背景イメージ
ドロップキャップス
ボックスシャドウ
テキストシャドウ
重ね順指定
字間アキ・ツメ
縦中横
などがある。epubはテキストだけであれば作成は簡単だが、少しレイアウト要素を追加すると、作成が煩雑になる。htmlとcssを読んでレイアウトの仕上がりを想像できなけば、効率的な作業は望めない。とはいえ上記にあるようなレイアウトのリクエストを受ければ「できません」とは言えなくなることは間違いない。
こうしたレイアウトでスタイルシートで指定可能なものは、InDesignでスタイルシート名を段落スタイルに名にしておく。あとからスタイルシート編集する。ここで注意したいのは、epubに書き出した後、再度InDesignでレイアウト編集を行う場合だ。epubに書き出してもう一度epubを編集することはできるだけ避けたい。InDesignから再度書き出すときは、別名でepub書き出しして、スタイルシートは変更がない限り、以前ものをまるごと差し替えればよい。
たとえば罫線囲みでは、
border
というスタイルシートを使うが、段落スタイルでも「border」にしてテキストに適用する。段落スタイルの内容は「body」のままでいい、わかりやすくするためにフォントを変更してもよい。本文フォントが明朝だったら、「border」はゴシックにしておく。
テキストの回り込み
罫線囲み
罫線角丸囲み
表組
背景イメージ
ドロップキャップス
ボックスシャドウ
テキストシャドウ
重ね順指定
字間アキ・ツメ
縦中横
などがある。epubはテキストだけであれば作成は簡単だが、少しレイアウト要素を追加すると、作成が煩雑になる。htmlとcssを読んでレイアウトの仕上がりを想像できなけば、効率的な作業は望めない。とはいえ上記にあるようなレイアウトのリクエストを受ければ「できません」とは言えなくなることは間違いない。
こうしたレイアウトでスタイルシートで指定可能なものは、InDesignでスタイルシート名を段落スタイルに名にしておく。あとからスタイルシート編集する。ここで注意したいのは、epubに書き出した後、再度InDesignでレイアウト編集を行う場合だ。epubに書き出してもう一度epubを編集することはできるだけ避けたい。InDesignから再度書き出すときは、別名でepub書き出しして、スタイルシートは変更がない限り、以前ものをまるごと差し替えればよい。
たとえば罫線囲みでは、
border
というスタイルシートを使うが、段落スタイルでも「border」にしてテキストに適用する。段落スタイルの内容は「body」のままでいい、わかりやすくするためにフォントを変更してもよい。本文フォントが明朝だったら、「border」はゴシックにしておく。
＊InDesignで罫線囲みするテキストに「border」の段落スタイルを指定する。
そうすると段落スタイル「border」は通常のテキストの指定としてスタイルシートが書き出される。
p.border {
-adobe-ruby-align:center;
-adobe-ruby-overhang:none;
-epub-ruby-position:over;
color:#000000;
font-family:"Hiragino Kaku Gothic ProN W3", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
text-align:justify;
text-decoration:none;
text-indent:9px;
}
もちろんこのままではKindleでは罫線囲みにはならない。このスタイルシートの中身を丸ごと変更する。
p.border {
border:solid 3px #cccccc;
padding-top:1em;
padding-bottom:1em;
padding-left:1em;
padding-right:0em;
}
などとする。3ピクセルのグレースケール線幅で天と地はそれぞれ一文字分アキを設定する。またKindleでは後ろが詰まってしまうので、後ろも一文字分空けておく。これでKindle Previewerで変換してプレビューしてみよう。
そうすると段落スタイル「border」は通常のテキストの指定としてスタイルシートが書き出される。
p.border {
-adobe-ruby-align:center;
-adobe-ruby-overhang:none;
-epub-ruby-position:over;
color:#000000;
font-family:"Hiragino Kaku Gothic ProN W3", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
text-align:justify;
text-decoration:none;
text-indent:9px;
}
もちろんこのままではKindleでは罫線囲みにはならない。このスタイルシートの中身を丸ごと変更する。
p.border {
border:solid 3px #cccccc;
padding-top:1em;
padding-bottom:1em;
padding-left:1em;
padding-right:0em;
}
などとする。3ピクセルのグレースケール線幅で天と地はそれぞれ一文字分アキを設定する。またKindleでは後ろが詰まってしまうので、後ろも一文字分空けておく。これでKindle Previewerで変換してプレビューしてみよう。
＊Kindle Previewerすると罫線は段落単位で作成されてしまった。
Kindle Previewerすると、テキストには罫線がかかっている。が、段落単位で罫線が指定されてしまうではないか。意図するところは、段落をまたがって罫線で囲むことである。htmlはこうなっている（ルビタグは削除）。
<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい</p>
<p class="border">舞台などの謎が明かされた時が物語の終わる時</p>
罫線が段落それぞれに適用されていることがわかる。段落として分離されたテキストを一つの段落にするしかない。そうすれば罫線も一つになる。つまり、テキストを<br />でつなぐしかない。
<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい<br />
舞台などの謎が明かされた時が物語の終わる時</p>
このhtmlタグの修正を手動で行うのか。それは面倒である。レイアウトを修正したとき、その都度修正していると、修正忘れは必ず起こると思った方がいい。そこで、InDesignで<br />タグを書き出しそうな方法を考えてみた。InDesignで強制改行（段落内改行）ぐらいしか方法はなさそうだ。。いわゆるソフトリターン（shift+returnキー）である。ソフトリターンした行が両端揃えになるので、InDesign上の見栄えは良くないが、ソフトリターンでは段落は分離されないはずである。
Kindle Previewerすると、テキストには罫線がかかっている。が、段落単位で罫線が指定されてしまうではないか。意図するところは、段落をまたがって罫線で囲むことである。htmlはこうなっている（ルビタグは削除）。
<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい</p>
<p class="border">舞台などの謎が明かされた時が物語の終わる時</p>
罫線が段落それぞれに適用されていることがわかる。段落として分離されたテキストを一つの段落にするしかない。そうすれば罫線も一つになる。つまり、テキストを<br />でつなぐしかない。
<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい<br />
舞台などの謎が明かされた時が物語の終わる時</p>
このhtmlタグの修正を手動で行うのか。それは面倒である。レイアウトを修正したとき、その都度修正していると、修正忘れは必ず起こると思った方がいい。そこで、InDesignで<br />タグを書き出しそうな方法を考えてみた。InDesignで強制改行（段落内改行）ぐらいしか方法はなさそうだ。。いわゆるソフトリターン（shift+returnキー）である。ソフトリターンした行が両端揃えになるので、InDesign上の見栄えは良くないが、ソフトリターンでは段落は分離されないはずである。
＊InDesign上で改行をソフトリターンで行う。
そこでもう一度epubに書き出してSigilでepubを開いてみた。そうするとちゃんとソフトリターンは<br />に置き換えられているのである。スタイルシートを差し替えてKindle Previewerすると一つの罫線でテキストは囲まれていた。ソフトリターンの本来の使い方ではないが、epub書き出しでは使い道がありそうだ。
そこでもう一度epubに書き出してSigilでepubを開いてみた。そうするとちゃんとソフトリターンは<br />に置き換えられているのである。スタイルシートを差し替えてKindle Previewerすると一つの罫線でテキストは囲まれていた。ソフトリターンの本来の使い方ではないが、epub書き出しでは使い道がありそうだ。
＊書き出したepubのhtml。ソフトリターンは<br />として書き出されている。
＊ソフトリターンのepubをKindle Previewerで変換。想定通りに表示されている。
InDesignでソフトリターンしてepub書き出しすると、改行が<br />になるというのは、やってみるまでわからなかった。epub書き出しの一般パネルには「強制改行を削除」という設定がある。強制改行はソフトリターンのことなので、もちろんここはオフにして書き出す必要がある。ここをチェックすると<br />が挿されないまま書きだされる。
InDesignの段落スタイルを使用する場合、あとでSigilで編集しないようにレイアウト指定が必要だ。htmlを分割したりは仕方がないが、htmlのタグはできるだけ触らないような工夫は必要だろう。しかし、それができれば、InDesignでは複雑なレイアウトは簡単にepubに反映できる。InDesignの段落スタイルとスタイルシートをマッチングさせておけばいいだけなのである。
◆ビューア別EPUB表示テスト（電書魂）
http://densyodamasii.com/?page_id=2066
◆InDesignでKindleのepubをラクラク作成する方法［Kindle版］
http://amzn.to/PfcrXi
◆InDesignでKindleのepubをラクラク作成する方法［ツール版］
http://bit.ly/1iSgkZZ
※PDF版とテンプレートを同梱
