ヘルプ | サインイン

このページの使いやすさを評価してください


非常に満足

満足

不満

ご協力ありがとうございます。ご意見は今後のサービス改善の参考にさせていただきます。

問題や不明点がありましたら、こちらからお問い合わせください。

ヘルプトピック

お問い合わせ

フィードバックがありますか? ヘルプページで回答が見つかりませんでしたか?

お問い合わせ

テキストのガイドライン - リフロー型

目次


見出しの配置と両端揃え

リフロー型の電子書籍はデフォルトでは均等割り付けが行われるため (text-align: justify;など)、すべての見出しで CSS の適切な配置プロパティ (text-align: left; text-align: right; text-align: center; など) を指定して、単語間に余分な空白が入らないようにします。





本文のデフォルト

リフロー型の Kindle 本 (フィクションおよびノンフィクション) の本文テキストは、すべてデフォルト設定を使用します。コンテンツ制作者は、見出し、特別な段落、脚注、目次などに創造的なスタイルを使用できますが、本文に対しては推奨していません。埋め込みフォントの使用の詳細をご覧ください。これは、HTML の本文に加えられた変更が読者の好みのデフォルト読書設定を無効にする可能性があるためです。読者はそのような行為をマイナスの読書体験として報告する場合があります。特に重要なポイントを以下に示します。

  • 本文のフォントは CSS の font-family 属性を使用して設定します。本文にはデフォルトのフォントのサイズ (1em) および行間を使用します。本文には、<font size="…"> タグや、CSS の font-size 属性および line-height 属性は使用しないでください。
  • 本文には太字や斜体を適用しないようにしてください。ただし、選択された部分については強調のために使用することができます。この規定は、たとえば、すべてに太字を使用した本を禁止するものです。
  • 本文には、すべての箇所において強制フォント カラーを適用しないでください。部分的に強制フォント カラーを使用したい場合、明るすぎたり暗すぎる色は使用しないでください。白い背景の端末または E-reader 端末では明るい色を十分なコントラストで表示することはできません。暗い色は黒い背景の端末上でうまく表示されません。テキストと背景色の間の読みやすいコントラスト比を保持するための W3C 推奨事項を参照してください。灰色の背景色には、16 進数の #666 ~ #999 の範囲で指定してください。
    • 色がこの範囲に含まれているかどうかを確認するには、ツールを使用して、その色を RGB 値に変換します。そこで得られた 3 つの値を、Y = 0.2126*R + 0.7152*G + 0.0722*B という式に入力します。 Y = (0.2126 * R) + (0.7152 * G) + (0.0722 * B)結果の値 Y が 102 ~ 153 の範囲内であれば、どの Kindle 端末や Kindle アプリケーションでも読みやすい色となります。
    タイプセッティングの改善が有効になっている本では、Kindle の読者は、どのような背景色の前面にどのような色のテキストが表示されても読みやすいことが確認できます。フォントの色は、読者が選択した端末のテーマ色、またはいずれかの要素の背景色に適切なコントラストを実現できるように自動的に適応します。以下の例では、フォントと背景のコンテナの両方に同じ色 ("黄色"、"黒"、および "オレンジ") が適用されていました。背景に対して読みやすいコントラストを実現するために、フォントの色がどのように変わるのかを確認してください。詳細はタイプセッティングの改善をご覧ください。



  • 本文では、背景色を黒または白にしないでください。端末の背景が異なる色に設定されると、画面が読みにくい箱型になり、読者が端末の背景色設定を変更するとき、フォントの色が自動的に入れ替わり、テキストが見えなくなるため、読者はこのような行為をマイナスの読書体験として報告します。
  • 本文のフォントは強制的に指定しないでください。埋め込みフォントのガイドラインに従っていることを確認してください。これらのガイドラインに従わない場合、読者は好みのフォントに変更できなくなることがあります。
  • 本文では、段落内の単語の間に、通常のスペースの代わりに改行なしスペースを適用しないでください。
  • 本文では、すべての箇所において強制的な左/右の余白、または余白を適用しないでください。レシピ一覧やブロック引用など、本文と視覚的に区別するために左/右の余白を必要とする段落の場合、これらのセクションに適用される余白は、em やポイントの値ではなくパーセンテージとして指定する必要があります。
  • アップロード時に次のフォント修正が適用されます。
    • コンテンツの大部分に使用されているフォントのサイズは 1em に正規化されます。
    • コンテンツの大部分に使用されている font-family はルート タグ (本文) に変更されます。
    • 本文に使用されている強制フォント カラーが削除され、テキストの色を変更できるようになります。


段落を設定する

本文は、インデントまたは追加行間隔を使用して段落を区切り、読みやすくします。本文の段落は、CSS の text-indent 属性を使用してインデントの値を 4 em 以下にすることを推奨します。各段落の前または後の行間隔を変更するには、それぞれ CSS の margin-top または margin-bottom のスタイルを使用します。これらの属性については、em の値を使用することを推奨します。height プロパティを使用して、テキスト、またはテキストが折り返されているインスタンスが含まれている要素のサイズを制御しないでください。height プロパティは、リフロー型の本の画像にのみ適用されます。



固定値

font-size、width、height、margin、padding、text-indent のような CSS プロパティに固定値 (ポイント、ピクセルなど) を使用しないでください。さまざまな画面サイズや解像度に対応して表示できるように、値を em またはパーセンテージで指定してください。



余白のフォーマット

左右の margin および padding CSS プロパティを使用する場合は、em 単位ではなくパーセンテージ (%) の値を指定します。これにより、大きいフォントのサイズを用いたときに横の余白が広くなり、読みにくくなることがなくなります。コンテンツが画面の端からはみ出したり、他のコンテンツと重なるのを防ぐために、margin には 0 以上の値を使用してください。読者が端末のデフォルトにあるすべての余白の選択範囲を使用できるように、通常テキストには、常に左右の margin を 0 に設定してください。フォントまたは端末のサイズがどのような場合でも、段落の間隔が簡単に区別できるように、上下の余白を em で指定します。



ドロップ キャップ

ドロップ キャップのような要素もパーセンテージに相対単位 (正/負) を使用し、固定値 (ポイント/ピクセル) は使用しないでください。ドロップ キャップの先頭をメイン ボディ テキストに合わせてください。Amazon では、以下の CSS サンプルの使用をお勧めします。

例:

p.para {
font-size: 1em;
margin-bottom: 0;
margin-top: 0;
text-align: justify;
text-indent: 0;
}

@media amzn-kf8

{

span.dropcaps

{

font-weight:normal;font-size:320%;float:left;margin-top:-0.3225em;margin-bottom:-0.3245em;

}

}

@media amzn-mobi

{

span.dropcaps

{

font-size:3em;font-weight:bold;

}
}

<p class="para"><span class="dropcaps">こ</span>れはサンプルです


ドロップ キャップが意図したとおりに表示されることを確認するには、本をテストしてください。次に、タイプセッティングの改善が有効になっている本で、この方法を使用してフォーマットされたドロップキャップの例を示します。



小さいフォントの設定


大きいフォントの設定


改ページ用の CSS

セクションを区切るには、CSS の page-break-before 属性と page-break-after 属性を使用します。または、新しい HTML 文書の改ページの後に表示されるコンテンツの各セクションを配置します。改ページの作成には空白行を挿入しないでください。



埋め込みフォントを使用する

Kindle では、電子書籍内の埋め込みフォントをサポートしています。OpenType (OTF) または TrueType (TTF) のフォントを使用することができます。Kindle では、Type 1 (PostScript) フォントの使用はお勧めしていません。快適な読書体験を提供するために、Type 1 フォントを使用しているリフロー型の本は、Kindle のフォントによって置き換えられます。KF8 が有効な端末およびアプリケーションでは、出版者によって指定されたフォントのオンとオフを切り替えるオプションがあります。

フォントの許諾権保護は出版者の責任です。意図を伝えるために埋め込みフォントが必要でない限り、Kindle 端末およびアプリケーションにインストールされているデフォルトのフォント セットの使用をお勧めしています。これにより、高画質のテキスト表示が可能になります。

フォントを選択するときは、中程度の視力障害を持つ読者の使いやすさを考慮してください。すべてのタブレットおよび端末の背景に対して見やすく、見やすいように、シンプルで明確なフォントを選択します。

アクセシビリティのヒント: 細いフォントは読みにくく、認識されるテキストと背景とのコントラストに影響する可能性があります。原稿の本文テキストに細いフォントを使用することは避けてください。

Kindle は等幅フォントもサポートしています。次のタグ内のコンテンツは等幅フォントで表示されます :<pre>、<code>、<samp>、<kbd>、<tt>、<font face="courier">、<font face="monospace">。

上記の <pre> 以外のタグではテキストの配置は変わりません。



フォント選択をカスタマイズする

本の基本になるメイン フォントは、<body> レベルで設定してください。太字や斜体のような書式を適用する場合は、読者が選択するどのようなフォントでも、これらのスタイル要素が正しく表示できるように、フォントではなくテキストにそれらのスタイルが設定されていることを確認してください。以下に示すのは、Kindle 本で使用するカスタマイズ フォントの導入に関する正誤表です。

誤った HTML コード

正しい HTML コード

<html>

<body>

<p style="font-family:PrimaryFont">メイン フォントのコンテンツ</p>

<p style="font-family:SecondaryFont">サブ フォントのコンテンツ</p>

<p style="font-family:PrimaryFont">メイン フォントのコンテンツ</p>

<p style="font-family:PrimaryFont">メイン フォントのコンテンツ</p>

</body>

</html>

<html>

<body style="font-family:PrimaryFont">

<p>メイン フォントのコンテンツ</p>

<p style="font-family:SecondaryFont">サブ フォントのコンテンツ</p>

<p>メイン フォントのコンテンツ</p><p>メイン フォントのコンテンツ</p>

</body>

</html>

下記に示すように CSS クラスを使用しても同様の設定が行えます。

誤った CSS コード

正しい CSS コード

body{ font-size: asize; }

.indent { font-size: asize; font-family: PrimaryFont;

}

.sidebar-text { font-family: SecondaryFont; font-weight: bold;

}

body { font-family: PrimaryFont;font-size:asize;

}

.indent {

font-size: asize;

}

.sidebar-text { font-family: SecondaryFont; weight: bold;

}

フォントをコーディングするときは、HTML タグを正しく閉じて優先の競合をなくしてください。優先の競合がある場合、Kindle でフォント設定を選択したときに快適な読書体験が提供されるように、本のフォント ファイルが意図的に削除されます。

例:

誤った HTML コード

正しい HTML コード

<html>

<body style="fontfamily:PrimaryFont">

<p>メイン フォントのコンテンツ</p>

<div style="fontfamily:SecondaryFont">

セカンダリ フォントのコンテンツ

<div style="font-family:ThirdFont">

サード フォントのコンテンツ

</div>

</div>

<p>メイン フォントのコンテンツ</p>

</body>

</html>

<html>

<body style="font-family:PrimaryFont">

<p>メイン フォントのコンテンツ</p>

<div style="fontfamily:SecondaryFont">

セカンダリ フォントのコンテンツ

</div>

<div style="font-family:ThirdFont">

サード フォントのコンテンツ

</div>

<p>メイン フォントのコンテンツ</p>

</body>

</html>


誤った CSS コード

正しい CSS コード

h2.title, h3.title {
text-indent:0;
text-align:center;
font-family:'PrimaryFont';

}
h3.title {
font-family:’SecondaryFont’;
font-size:2em;
font-weight:bold;

}

h2.title  {
text-indent:0;
text-align:center;
font-family:'PrimaryFont';

}
h3.title {
text-indent:0;
text-align:center;
font-size:2em;
font-weight:bold;
font-family:’SecondaryFont’;

}



ページ番号のガイドライン

Kindle 本は、印刷書籍のページ番号とは必ずしも一致しません。「Go To」メニューで Kindle Real のページ番号機能が有効になっていても、電子書籍のページ番号に対する参照は次のように処理する必要があります。

  • 目次: 印刷本の目次にページ番号がある場合、電子版ではページ番号を削除します。セクションの名前は保持して、電子書籍の関連する箇所へハイパーリンクする必要があります。たとえば、印刷本の目次に「第 1 章 ...36 ページ」と表示する場合、電子書籍にはデジタル コンテンツの正しい場所へのハイパーリンクが設定された「第 1 章」のみを表示する必要があります。
  • 内部リンク: "XX ページを参照" のように電子書籍で他のページを参照しているテキストがある場合、このテキストは電子書籍の関連する段落にリンクする必要があります。
  • インデックス: インデックス内のページ番号は、電子書籍の関連する段落 (または関連するイラスト、表、チャート) にリンクする必要があります。
  • インデックス内のリンク: "XXX も参照" のように、インデックス内で他のセクションを参照するエントリーがある場合は、このテキストは、インデックス内の関連するセクションにリンクする必要があります。


実際のページ番号の有効化

読者にとってページ番号は使い慣れたナビゲーションであり、教室や読書クラブなどで印刷版を利用する仲間との読書体験を共有するには、とても有効な方法です。著者と出版者は、Amazon の Real Page Number 機能を使用して、Kindle 本の EPUB に Kindle 端末やアプリケーションに表示されるページ番号を追加できます。

出版者は、電子書籍の Real Page Number をその電子書籍と最も一致度の高い印刷版 (ハードカバー、プリント本など) にマッピングし、ISBN を http://kb.daisy.org/publishing/docs/navigation/pagelist.html#desc に従いメタデータに指定する必要があります。この時、Real Page Number は Kindle Previewer またはサイドロードでプレビューできませんが、電子書籍が出版されると表示され、詳細ページにも記載されます。

Real Page Number 機能を有効にするには、次の操作を行います。

補注:

  • ページ番号は、必ずローマ数字またはアラビア数字で追加してください。(例: i、ii、iii、または 1、2、3、4)
  • ページタグの name 属性に「ページ」などのテキストを追加しないでください (例: 「ページ 1」、「ページ 2」)。Kindle では、page number 属性の前に「ページ」という単語がデフォルトで追加されます。
  • 複数のページで同じ HTML の場所を重複して指定していないか確認してください。
  • 複数の HTML の場所で同じページ ラベルを重複して指定していないか確認してください。
  • 空のページ ラベルがないか確認してください (白紙のページも含みます)。
  • すべてのアンカーに適切なターゲットが指定されているか確認してください。
  • HTML ページへのパスがすべて相対パスであることを確認してください。


脚注のガイドライン

Amazon では、脚注のマーキングには HTML5 の aside 要素を epub:type 属性と組み合わせて使用することを強くお勧めします。その場合、アクセス可能な端末では指示が追加されていない限り脚注を無視することができます。また、いずれの端末でもよりインテリジェントな方法 (ポップアップなど) で脚注に対応できます。さらに、EPUB の semantic が認識されない場合でも、脚注は HTML5 の aside 要素により二次的コンテンツとして処理されます。

aside 要素が使用されているかどうかにかかわらず、脚注には双方向のハイパーリンク (本文から脚注へのリンクと、脚注から本文へのリンクの両方) を設定する必要があります。このようなリンクを設定しておくと、読者が脚注を読んだ後に元の位置に簡単に戻ってくることができます。Kindle Paperwhite など一部の Kindle 端末では、双方向ハイパーリンクが設定されている脚注はポップアップに表示されます。

読みやすくするためには、脚注テキストを章または本の最後に配置することを強くお勧めします。

次のいずれかの方法で、脚注を定義してください。

方法 1 (推奨):

<p> この脚注の例では、epub:type 属性および双方向ハイパーリンクを伴う aside 要素を使用しています。<sup><a id="source" href="#ft-1-1" epub:type="noteref">1</a></sup></p>

...

<aside id="ft-1-1" epub:type="footnote">

<p><a epub:type="noteref" href="#source">1.</a> これは脚注テキストで、章または本の末尾に配置する必要があります。</p>

</aside>

方法 2:

<p> この脚注の例では、双方向ハイパーリンクのみを使用しています。<sup><a href="footnotes.html#fn1" id="r1">[2]</a></sup></p>

...

<p id="fn1"><a href="chapter01.html#r1">2.</a> これは脚注テキストで、章または本の末尾に配置する必要があります。</p>

本に数字や記号のない脚注または巻末の注記が含まれている場合、Amazon は、注記から本にある関連テキストへの単一リンクを作成することをお勧めします。

例:

<p> この例は、<a id="fn1"/> イベントについて記述しています。</p>

...

<p><a href="chapter01.html#fn1"> 発生したイベント </a> これは巻末のテキストで、イベントの詳細への参照を提供します。</p>

方法 2:

<p> この脚注の例では、双方向ハイパーリンクのみを使用しています。<sup><a href="footnotes.html#fn1" id="r1">[2]</a></sup></p>
...
<p id="fn1"><a href="chapter01.html#r1">2.</a> これは脚注テキストで、章または本の末尾に配置する必要があります。</p>

本に数字や記号のない脚注または巻末の注記が含まれている場合、Amazon は、注記から本にある関連テキストへの単一リンクを作成することをお勧めします。

例:

<p> この例は、<a id="fn1"/> イベントについて記述しています。</p>
...
<p><a href="chapter01.html#fn1"> 発生したイベント </a> これは巻末のテキストで、イベントの詳細への参照を提供します。</p>

予期しないエラーが発生しました。後でもう一度試してください。
セッションがタイムアウトしました

続行するにはサインインしてください

サインイン
edit