改造版AozoraEpub3では電書協EPUBベースのEPUBを生成している。そのために基本的には電書協CSSを利用する。それに加えて各電子書籍ビュワーでの表示の問題を減らすために、KADOKAWA EPUB、KDPガイド、Apple Books アセットガイドも参考にしながら修正している。
脚注の問題になるのが、同一HTMLの最後にリンクを貼るのか、べつのHTMLにまとめてそこにリンクを貼るのかという問題。１つ目はページ分割した場合にページ分割することを事前にしる必要がある。EPUBのページ分割破壊ページを挟むとそこで分割される。
[https://twitter.com/imagawatatsuya/status/1633696669756964864:embed#KDP脚注テスト■本文赤い小紙幣１■脚注部分（章末/巻末）
電書協から抜粋
→「■注釈」
【変更前】
【CSS class】
class="cyu" : 文字色は青、傍線つきがデフォルト
class="key" : inline-block 要素、文字サイズのデフォルトは「smaller」 電書協 EPUB 3 制作ガイド
| 107
class="ref" : inline-block 要素、文字サイズのデフォルトは「smaller」
※「ref」は「reference（リファレンス、参照）」の略
【HTML elements】
<a class="cyu" href="ファイル名#ref-001">項目<span class="key" id="key-001">＊</span></a>
： 注釈記号側
<p id="ref-001"><a class="cyu" href="ファイル名#key-001">項目</a>□テキスト。</p>
： 注釈の受け側
<a class="cyu" href="ファイル名#ref-001">項目１<span class="key" id="key-001">＊</span></a>
<a class="cyu" href="ファイル名#key-001">項目２<span class="ref" id="ref-001">＊</span></a>
： 注釈の相互リンク（<p>で指定した文が数行に渡るなど、どうしても必要な場合に利用）
例）
---------------------------------[sample code]---------------------------------
<a class="cyu" href="cyushaku.xhtml#ref-001">蜘蛛の糸<span class="key" id="key-001">＊</span></a>
<p id="ref-001"><a class="cyu" href="p-001.xhtml#key-001">＊蜘蛛の糸</a> ドストエフスキイ「カラマゾ
フ兄弟」第七篇第三「一本の葱」に取材。</p>
-------------------------------------------------------------------------------
【変更後】
【CSS class】
class="noteref" ： 文字色は青、傍線つきがデフォルト
class="note" ： 文字色は青、傍線つきがデフォルト
class="footnote"： 特に指定なし（「footnote」は「脚注」の意）
class="super" ： 上付文字指定（「上付文字、下付文字」の項を参照）
※ここでは注釈記号用として利用
【HTML elements】
<p><a class="noteref" id="noteref-001" href="ファイル名#note-001">項目<span class="super">＊
</span></a></p>
： 注釈参照側 （注釈記号の部分は、class 含め、作品にあわせて自由に指定して構いません）
<p><a class="note" id="note-001" href="ファイル名#noteref-001">＊項目</a>□テキスト</p>
： 注釈内容側
<div class="footnote" id="note-001">
<p><a class="note" href="ファイル名#noteref-001">＊項目</a>□テキスト</p>
<p>□テキスト</p>
</div>
： 注釈内容側を <div> で指定したい場合の一例
例）
---------------------------------[sample code]---------------------------------
<p><a class="noteref" id="noteref-001" href="p-002.xhtml#note-001">蜘蛛の糸<span class="super">＊</span></a></p>
<p><a class="note" id="note-001" href="p-001.xhtml#noteref-001">＊蜘蛛の糸</a>□ドストエフスキイ「カラマゾフ兄弟」第七篇第三「一本の葱」に取材。</p>
------------------------------------------------------------------------------- 電書協 EPUB 3 制作ガイド
| 108
【参考情報】
注釈を表す「epub:type」を挿入することで、RS がその情報を利用することも可能になります。
RS がどのような利用をするかは EPUB の仕様では定められておらず、その利用方法を指定することもでき
ないため、事前に RS の挙動を確認し、版元とよくご相談の上ご利用ください。
・注釈
【備考】
指でタップする際の利便性などを考慮して、注釈記号だけでなく、注釈が指定された単語そのものにリンク指定するようにします。単語の範囲が注釈の受け側を見てもわからない場合は、適切と思われる範囲に指定してください。
【CSS class】
class="noteref" ： 文字色は青、傍線つきがデフォルト
class="note" ： 文字色は青、傍線つきがデフォルト
class="footnote"： 特に指定なし（「footnote」は「脚注」の意）
class="super" ： 上付文字指定（「上付文字、下付文字」の項を参照）
※ここでは注釈記号用として利用
【HTML elements】
<p><a class="noteref" id="noteref-001" href="ファイル名#note-001">項目<span class="super">＊</span></a></p>
： 注釈参照側 （注釈記号の部分は、class 含め、作品にあわせて自由に指定して構いません）
<p><a class="note" id="note-001" href="ファイル名#noteref-001">＊項目</a>□テキスト</p>
： 注釈内容側
<div class="footnote" id="note-001">
<p><a class="note" href="ファイル名#noteref-001">＊項目</a>□テキスト</p>
<p>□テキスト</p>
</div>
： 注釈内容側を <div> で指定したい場合の一例
例）
---------------------------------[sample code]---------------------------------
<p><a class="noteref" id="noteref-001" href="p-002.xhtml#note-001">蜘蛛の糸<span class="super">＊</span></a></p>
<p><a class="note" id="note-001" href="p-001.xhtml#noteref-001">＊蜘蛛の糸</a>□ドストエフスキイ「カラマゾフ兄弟」第七篇第三「一本の葱」に取材。</p>
-------------------------------------------------------------------------------
【参考情報】
注釈を表す「epub:type」を挿入することで、RS がその情報を利用することも可能になります。
RS がどのような利用をするかは EPUB の仕様では定められておらず、その利用方法を指定することもできないため、事前に RS の挙動を確認し、版元とよくご相談の上ご利用ください。
