AmazonKDP用EPUBファイル生成備忘録
Amazon KDPEPUBファイルを「でんでんコンバータ」で生成した時の備忘録を書き残しておきます。
1.でんでんコンバータでEPUBファイル生成する時のテクニック
次の①〜⑥を順に行うことで、E PUBファイルを生成できる。
①.txtファイルをKindle KDPで本を販売可能なファイルに変換できるツールである"でんでんコンバータ"にアクセスhttps://conv.denshochan.com/
②.販売したい本の元ファイル（原稿）のtxtファイル選択で表紙とテキストを選択
③.”情報を入れてね”に本のタイトルと作者名を入力
④.ぺージ送り方向は右から左（縦書き）を選択
⑤.”ページ自動生成”では"目次ページ"のみをチェック
⑥.”その他”では表紙ページをスキップするのみチェック
2.「でんでんコンバータ」にアップロードする本文ファイル(〇〇.txt)のテクニック
【タイトル】 <h1></h1>でくくること
【タイトル内の数字を縦書きにしたい時】 第<span class="tcy">1</span>でくくること
※１は数字で例え
【改行】 <p><br /></p>を使うこと
【改ページ】 「＝＝＝＝＝＝」を挿入する。前後は改行すること。
※txtファイルを分けても改ページされない。ひとつのtxtファイルに全文章をまとめて、改行したいところに「＝＝＝＝＝＝」を入れることと、txtファイルを分割して改行したいところに「＝＝＝＝＝＝」を入れることは同じため、前者が文字数もカウントしやすくおすすめ。
仮にコードで書きたい場合は本文ファイルとCSSファイル(でんでんコンバータに読み込ませるメインファイルの書式を設定するファイル)を用意し、太文字部分を書くこと。
本文ファイル（〇〇.txt)
<p class="sample1"></p>
CSSファイル(〇〇.css)
@charset "UTF-8";
/* でんでんコンバーター縦書きデフォルト */
@namespace "http://www.w3.org/1999/xhtml";
@namespace epub "http://www.idpf.org/2007/ops";
p.sample1 {page-break-after: always; }
【表紙】 PNGとJPEGの拡張子で生成すること。これはKindleにアップロードするときがこれだから。
【挿入画像の種類】 SVGがオススメ。PNGやJPEGも可能だが、ファイルが重たくなる。重たくなると、AmazonKDPで公開した時、ユーザが本をタップして読もうとした時の読み込み時間が遅くなる。遅くなることは「読まなくてもいいかという気持ちに繋がるため、EPUBファイルはなるべく軽く仕上げたいところ。そのための手段が画像フォーマットをSVGファイルにすること。
【挿入画像の表示位置】画像をどの端末でも中央にしたい場合は本文ファイルとCSSファイルを用意し、太文字のように書く必要がある。この例を使うと端末が横向き、縦向きであっても自動で大きさを幅の小さい方に合わせて表示する。
■本文ファイル（〇〇.txt)
<div class="figure_">
<img src="_1.svg" alt="sample"/>
<p>画像の下に文字が表示される。長い文章でも次のページまで文字が表示されるので見切れることがない。</p>
</div>
■CSSファイル（〇〇.css)
.figure_ {
-epub-writing-mode: horizontal-tb;
margin: auto;
width:100%;
text-align: center;
■本文ファイル（〇〇.txt)の説明
_1.svgは読み込ませたい画像名。ファイル形式はPNGファイルでも大丈夫。img src="_1.svg"で挿入する画像を指定している。でんでんコンバータにtxtファイルをアップロードする際には必ず_1.svgなどの指定した挿入した画像も一緒にアップロードすること。なおtxtファイルより先に読み込ませること。（txtファイルよりも先に選択すればいい）
alt="sample"は画像の名称。例えばH Pなどで画像をタップすると名前が表示される場合があるがその名前のこと。Kindleでは特に表示されないので気にしなくていい。
なお文章はpタグではなく figcaptionタグを使っても同様。
■CSSファイルの説明
「-epub-writing-mode: horizontal-tb」は縦組みを一時的に横組みにするもの。marginは余白を自動調整するもの。width:100%は必須。これにより端末を横にした場合に画面中央に配置させることができる。ないと画像サイズにより横に寄る。
■スマートフォン 縦向き 文字サイズ６
■タブレット 縦向き 文字サイズ６
■Kindle端末 縦向き 文字サイズ６
■スマートフォン 横向き 文字サイズ12
■スマートフォン 縦向き 文字サイズ 10
※タイトルが縦書きで本文が横書きなのは、CSSにはでんでんコンバータの縦書きになる設定ファイルに追加して、cssファイルに「.figure_」のコードを書いたため。-epub-writing-mode: horizontal-tb;は横書き設定。
3.Amazon KDPに作成した本を公開する時のテクニック
【キーワード】 Kindleで検索した時にトップにくるワードにすること。キーワードの選定方法のノリはYoutubeと同じ
【タイトル】 タイトルとキーワードは被らないようにすること。これもYoutubeのキーワード設定と同様
【ジャンル】ジャンルは狭めたところから、伸びてきたら広げること。初めは狭めた方がそれに関連するジャンルとして表示されるため見つかりやすい
4.本文内で自由に行ったり来たりする方法※推奨はしません
問題：そのリンクを本文と脚注に分かれており、本文内でジャンプできなかった。（ページ内で行ったり来たりできなかった。）（リンクを本文中の任意の場所に配置できなかった。）
原因：脚注は改ページ（ファイル分割）に非対応だった。
https://conv.denshochan.com/markdown#footnotes
※でんでんコンバータでは改ページが「===」で定義されており、その「でんでんマークダウン」と呼ばれる「コード」で書く方法が示されていないこともジャンプ対応の方法がわからない要因となっていた。
解決策：でんでんコンバータに読み込ませるtxtファイルを全て「でんでんマークダウン」で書く。（改ページのための「＝＝＝」などを使わないということ）
方法：cssファイルとtxtファイルを用意して下記のように書く。※太字が内容。
■本文ファイル（〇〇.txt)
<p>これは脚注付き<a id="fnref_1" href="#fn_1" rel="footnote" class="noteref" epub:type="noteref" role="doc-noteref">この文字は青くなっていてタップするとジャンプするよ</a>なところです。</p>
<p class="sample1"></p>
<div class="footnotes" epub:type="footnotes" role="doc-endnotes">
<div id="fn_1" class="footnote" epub:type="footnote" role="doc-endnote">
<p>これでジャンプができるのです！<a href="#fnref_1" role="doc-backlink">ここが青くなっていると思いますが、ココを押せばよし！</a></p>
</div>
</div>
■CSSファイル（〇〇.css)
@charset "UTF-8";
/* でんでんコンバーター縦書きデフォルト */
@namespace "http://www.w3.org/1999/xhtml";
@namespace epub "http://www.idpf.org/2007/ops";
p.sample1 {page-break-after: always; }
■cssファイルの説明
<p class="sample1"></p>とあるが、改ページを入れるための定義をしている。
結果：でんでんコンバータにアップロードしてKindleプレビューアで確認したところ、本文内で自由に行ったり来たりできることを確認。
本例であると、「この文字は青くなっていてタップするとジャンプするよ」と書かれているところをタップすると、「次のページにあるここが青くなっていると思いますが、ココを押せばよし！」のページにジャンプすることが確認できました。逆に「次のページにあるここが青くなっていると思いますが、ココを押せばよし！」を押すと前のページの「この文字は青くなっていてタップするとジャンプするよ」にジャンプすることも再現できた。
なお、端末をタブレットやスマホ、Kindle端末にしても挙動は変わらず。文字サイズを異なるサイズにしても同様。
なお、本例は<p class="sample1"></p>というコードで必ず改ページをされるように設定しているため、文字が小さくても「この文字は青くなっていてタップするとジャンプするよ」の文章と「この文字は青くなっていてタップするとジャンプするよ」の文章が同じページに表示されることは内容に設定している。
※この方法は「Amazon Kindle パブリッシング ガイドライン」を参考にした。
これには”セクションの区切りには、CSS の page-break-before 属性と page-break-after 属性を使用してください。”とある。
Amazon Kindle パブリッシング ガイドライン
http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines_JP.pdf
懸念点：AmazonKDPでは本文内でのジャンプはサポートしていない。そのため、文章公開時にAmazon側に弾かれて公開できない可能性がある。これは技術的には可能であったという例である。
5.画像の上に文字を被せたい場合
結論：cssのdisplay: block;を利用することで技術的に可能ではあるが、長文は見切れるため、利用できるものではない。
経緯：SVG画像やPNG画像を掲載した時に、絵の任意の場所に文字を表示したいと思った。
問題点：長い文章であると文字サイズを変更すると文字が見切れてしまう。
原因：AmazonKDPは文字サイズを変更することに特化したシステムとなっているため。画像を本文内に挿入すると、デフォルトでは画像が表示され終わった次の段落から文章が表示されるようになっている。画像を挿入する場合は <img src="_0.svg" alt="image"/>のようにimgタグで挿入するのであるが、特に設定をしないと必ず文章は次の段落からとなる。
所感：今回の例はAmazonが発行している仕様書を元にサポートされているタグを利用して画像と文字を重ねることを試みた。EPUBはHTMLやCSSで構成されるため、HPを作成する際と同じような仕組みになっているだろうと見当をつけて試してみた。（HPはHTMLやCSSを利用して作られることがある。）しかし実際にやってみたところ、Amazon側がKindleアプリ内で本のサイズを変更したりタイトルからジャンプできるようにとHTMLやCSSのタグを任意に調整している挙動が見られ、HP作成時と同様の仕組みにはなっていなかった。この癖を把握するために大変な労力を割いたところ、わかったことは原因にも書いたが、AmazonKDPは文字サイズを変更することに特化したシステムとなっており、絵に文字を重ねたい場合は<div>や<p>タグという文字を管理しているタグに子要素として display: block設定とbackground-image: url設定をすることで可能ということであった。
一番使用できそうなのはNo1とNo9であるが、No1はテキストの長さに合わせて画像サイズが変わる。対してNo9はスマホの画面幅に合わせて画像を変化する。そのためNo9は画面幅に追従して画像サイズを自動で変更するが、横向きの時に画像が見切れてしまう。また文字サイズを10以上など大きくすると画面幅に合わせていたはずなのに、画像が見切れる不具合が見られた。
また、ここには記載していないがimgタグにheight ="1em" vertical-align="bottom" object-fit="contain"などを利用してテキストのインライン画像の挿入を試みたが、大きな画像のまま表示された。他にもimgタグにwidth="20%" object-fit="contain"などを設定して画面の20%のサイズで表示されるようにも設定してみたが、画面幅に表示される様子が見られた。
Amazon Kindle パブリッシング ガイドライン
http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines_JP.pdf
結果：
・画像の上に文字を被せることはできる。
・画面の横向き、縦向きに追従する。
・機種に合わせて表示もできる
■スマートフォン 縦向き 文字サイズ8
■スマートフォン 横向き 文字サイズ8
■タブレット 縦向き 文字サイズ8
■Kindle端末 縦向き 文字サイズ8
■スマートフォン 縦向き 文字サイズ11
文字が見切れる。
■本文ファイル（〇〇.txt)
<div class="intoFigure">
<img src="_0_sample.svg" alt="image"/><!--初めに-->
<p>画像の下に文字が表示される。長い文章でも次のページまで文字が表示されるので見切れることがない。</p>
</div>
<div class="rect">
<div class="overlay1">
<p>【No1】サイズをrectで定義した後に文字の中に画像を背景として表示している。</p>
</div>
</div>
<div><p class="pageBreakAfter"></p></div>
<div class="rect">
<div class="overlay2">
<p>【No2】No1と比較して、background-clip:content-box; background-origin: border-box;をcssに追記。
</p>
</div>
</div>
<div class="rect">
<div class="overlay3">
<p>【No3】No1と比較して、background-clip:content-box; background-origin: border-box;をcssに追記。background-size:contain;からbackground-size:cover;に変更。</p>
</div>
</div>
<div><p class="pageBreakAfter"></p></div>
<div class="rect">
<div class="overlay4">
<p>【No4】No1background-clip:content-box; background-origin: border-box;をcssに追記。 height:auto; padding: auto;を追加/p>
</div>
</div>
<div><p class="pageBreakAfter"></p></div>
<div class="rect">
<div class="overlay5">
<p>【No5】No1に対して background-clip:content-box;に変更し、
background-origin: border-box;を追加 </p>
</div>
</div>
<div><p class="pageBreakAfter"></p></div>
<div class="rect">
<div class="overlay6">
<p>【No6】No1に対して background-size:contain;からbackground-size:cover;に変更
</p>
</div>
</div>
<div><p class="pageBreakAfter"></p></div>
<div class="rect">
<div class="overlay7">
<p>【No7】No1に対して background-size:contain;からbackground-size:cover;に変更。 width:100%;からwidth :auto;に変更し、 height :auto;を追加。
</p>
</div>
</div>
<div class="rect">
<div class="overlay8">
<p>【No8】No1に対して background-size:contain;からbackground-size:cover;に変更。 width:100%;からwidth :auto;に変更し、 height :auto;を追加。更に padding-top: 10%;
padding-bottom: 10%;からpadding-top: 40%; padding-bottom: 40%;にしてテキスト上下の余白サイズを変更。 </p>
</div>
</div>
<div class="rect">
<div class="overlay9">
<p>【No9】No1に対して background-size:contain;からbackground-size:cover;に変更。 width:100%;からwidth :auto;に変更. height :auto;を追加。 更にpadding-top: 10%; padding-bottom: 10%;から padding-top: auto; padding-bottom: auto;にしてテキスト上下の余白サイズを変更。
</p>
</div>
</div>
=================
「タイトル」
著 者：ちょしゃ の なまえ
発行月：^2^ ^0^ ^2^ ^1^ 年 ^1^ ^0^ 月
■CSSファイル（〇〇.css)
@charset "UTF-8";
/* でんでんコンバーター縦書きデフォルト */
@namespace "http://www.w3.org/1999/xhtml";
@namespace epub "http://www.idpf.org/2007/ops";
div.p.pageBreakAfter {page-break-after: always; }
.intoFigure{
-epub-writing-mode: horizontal-tb;
margin: auto;
width:100%;
text-align: center;
}
div.rect
{
-epub-writing-mode: horizontal-tb;
width : 100%;
height : auto ;
text-align: center;
}
div.overall{
display: block;
background:transparent;
background-image: url("_0_sample.svg");
background-size:contain;
background-repeat: no-repeat;
background-position: center;
-epub-writing-mode: horizontal-tb;
line-height: 100%;
width : 100vmin;
height : 100vmin;
}
/* 画像サイズは変わっていないが、 文字のライン意外にも絵が表示される。あとはイメージをサイズによって変更するだけ*/
div.overlay1{
display: block;
margin: auto;
width:100%;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:contain;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid red;
}
/* 画像サイズは変わっていないが、 文字のライン内にしか絵が表示されない。原因はackground-clipかbackground-originを書いているか否かの違い*/
div.overlay2{
display: block;
margin: auto;
width:100%;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-clip:content-box;
background-origin: border-box;
background-size:contain;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid orange;
}
/* background-size:cover;にした 画像大きくなるけど文字のライン内にしか絵が表示されない。*/
div.overlay3{
display: block;
margin: auto;
width:100%;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-clip:content-box;
background-origin: border-box;
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid yellow;
}
/* height:auto; padding: auto;にした
画像全表示されるけどテキストの中
*/
div.overlay4{
display: block;
margin: auto;
width:100%;
height:auto;
padding: auto;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-clip:content-box;
background-origin: border-box;
background-size:contain;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid greenyellow;
}
/*overalをベースに background-size:cover;にした
ついでに
background-clip:content-box;
background-origin: border-box;
も追加*/
div.overlay5{
display: block;
margin: auto;
width:100%;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-clip:content-box;
background-origin: border-box;
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid green;
}
/*overalをベースに background-size:cover;にした
ついでに
*/
div.overlay6{
display: block;
margin: auto;
width:100%;
height:100%;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid lightblue;
}
/*overalをベースに background-size:cover;にした
ついでに width :auto; height :auto;にした。拡大確認
*/
div.overlay7{
display: block;
margin: auto;
width :auto;
height :auto;
padding-top: 10%;
padding-bottom: 10%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid blue;
}
/*overal7をベース マージンを変えたおかげで見切れていたのが見えるようになる マージンはオートにするとて０になる。絵が見切れる
*/
div.overlay8{
display: block;
margin: auto;
width :auto;
height :auto;
padding-top: 40%;
padding-bottom: 40%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid purple;
}
/*overal8をベース マージンを変えたおかげで見切れていたのが見えるようになる
*/
div.overlay9{
display: block;
margin: auto;
width :auto;
height :auto;
padding-top: auto;
padding-bottom: auto;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid pink;
}
div.rectPadding
{
-epub-writing-mode: horizontal-tb;
width : 50%;
text-align: center;
}
div.overalPadding{
display: block;
margin: auto;
width :100%;
padding-top: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid palevioletred;
}
div.hero {
height: 100%; /* 全画面表示 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url("_0_sample.svg");
-epub-writing-mode: horizontal-tb;
text-align: center;
}
/* テキスト */
div.text-box {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
/* 画像サイズは変わっているが、 文字のライン内にしか絵が表示されない。原因はa margin-left: auto;
margin-right: auto;の設定有無*/
div.a{
display: block;
margin: auto;
margin-left: auto;
margin-right: auto;
width:100%;
height:auto;
padding: auto;
background-position: center;
background-repeat: no-repeat;
background-image: url("_0_sample.svg");
background-clip:content-box;
background-origin: border-box;
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid green;
}
div.b{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width:80%;
height:auto;
margin: auto;
padding: auto;
background-position: center;
background-repeat: no-repeat;
background-clip:content-box;
background-origin: border-box;
background-size:cover;
-epub-writing-mode: horizontal-tb;
text-align: center;
border: solid purple;
}
div.overalll{
display: block;
background-image: url("_0_sample.svg");
background-size:contain;
background-repeat: no-repeat;
background-position: center;
-epub-writing-mode: horizontal-tb;
line-height: 100%;
width : 100vmin ;
height : 100vmin ;
}
div.overallll{
display: block;
background-image: url("_0_sample.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-epub-writing-mode: horizontal-tb;
}
div.overalllll {
display: block;
background-image: url("_0_sample.svg");
margin: auto;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
width:100%;
height:100%;
}
html {
-epub-writing-mode: vertical-rl;
}
body {
text-align: justify;
text-justify: inter-ideograph;
font-family: serif, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: serif, sans-serif;
font-weight: normal;
color: inherit;
}
h1 {
font-size: 2em;
margin-right: 0.625em;
margin-left: 0.625em;
}
h2 {
font-size: 1.5em;
margin-right: 0.83333em;
margin-left: 0.83333em;
}
h3 {
font-size: 1.125em;
margin-right: 1.11111em;
margin-left: 1.11111em;
}
h4 {
font-size: 1em;
margin-right: 1.25em;
margin-left: 1.25em;
}
h5 {
font-size: 0.875em;
margin-right: 1.42857em;
margin-left: 1.42857em;
}
h6 {
font-size: 0.75em;
margin-right: 1.66667em;
margin-left: 1.66667em;
}
p {
margin-right: 1.25em;
margin-left: 1.25em;
line-height: 1.8;
}
p, li, dt, dd {
line-height: 1.8;
}
b, strong, dt, caption, figcaption, th {
font-family: sans-serif, serif;
}
blockquote, ul,
fieldset, form,
ol, dl, menu {
margin-right: 1.25em;
margin-left: 1.25em;
padding: 0;
}
blockquote blockquote, blockquote ol, blockquote ul, blockquote dl, ol blockquote, ol ol, ol ul, ol dl, ul blockquote, ul ol, ul ul, ul dl, dl blockquote, dl ol, dl ul, dl dl {
margin-right: 0em;
margin-left: 0em;
}
ol, ul, menu, dd {
margin-top: 2em;
}
a {
color: #0538b2;
}
a:hover {
color: #b2058e;
}
a:active {
color: #b27f05;
}
pre {
white-space: pre-wrap;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
hr {
margin-right: 1.25em;
margin-left: 1.25em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
rt {
font-family: serif, sans-serif;
}
.tcy {
-epub-text-combine: horizontal;
}
.sideways {
-epub-text-orientation: sideways;
}
.upright {
/* -epub-text-orientation: upright; */
-epub-text-combine: horizontal;
}
.pagenum {
color: gray;
font-size: 0.8em;
}
.footnotes hr {
margin-right: 1.25em;
margin-left: 1.25em;
}
.footnotes ol {
margin-top: 2em;
}
.footnotes li {
font-size: 0.875em;
}
a.noteref {
display: inline-block;
border: none;
font-size: 0.75em;
line-height: 1;
vertical-align: super;
-epub-text-combine: horizontal;
}
a.noteref:before {
content: "[";
}
a.noteref:after {
content: "]";
}
h2 {
margin-top: 0.66667em;
}
h3 {
margin-top: 1.77778em;
}
blockquote {
margin-top: 1em;
}
p {
margin: 0;
}
a {
text-decoration: overline;
}
@media print {
h1 {
page-break-before: always;
}
h1, h2, h3,
h4, h5, h6 {
page-break-after: avoid;
}
ul, ol, dl {
page-break-before: avoid;
}
}
この記事が気に入ったらサポートをしてみませんか？