作って学ぶ！Kindle Paperwhite向けに青空文庫で縦書き電子書籍を作ってみる

2012年10月24日

作って学ぶ！Kindle Paperwhite向けに青空文庫で縦書き電子書籍を作ってみる

Kindle Paperwhite、Touchであれば、PDF・画像ファイルで無くとも縦書きができます。

僕はずーっとKindle 4 NT（ノンタッチ版）を使っていたので、どうしても縦書きは出来なかったのですが、Kindle Paperwhiteを手に入れた今、縦書き電子書籍の作成方法（出来るだけ簡単な手順で）を整理してみたいと思います。

縦書きの簡単な仕組み

Kindleで縦書き表示する方法は至って簡単でWebページと同様、スタイルシート（CSS3）で定義が可能なんです。

Kindle（Paperwhite, Touch）でもこの仕様に基づいて電子書籍の描画が可能になっている、という訳ですね。

ということで、まずは縦書きに対応したCSSファイルを用意する必要があるのですが、これは、epub cafeさんのページからbasic_vertical.cssファイルをダウンロード（バージョン１への直リンク）するのが簡単。

草枕を作ろう　=縦書きHTML簡単作成ガイド= * - epubcafé

ちなみに中身はこんな感じ。

@charset "utf-8";

html
{
font-family: "HiraMinProN-W3", "@ＭＳ明朝", serif, sans-serif;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
line-height: 1.75;
text-align: justify;
}

strong.sesame_dot
{
font-weight: normal;
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epub-text-emphasis-style: sesame;
}
span.tcy
{
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}

＊-writing-mode: vertical-rlで縦書き、＊-text-emphasis-styleで文字の強調、＊-text-combineで縦中横（縦書き行中での横書き表記）を定義しているんですね。

このCSSファイルを変換したいHTMLファイルに組み込めばそのページは縦書き表示されるという訳です。

思ったより簡単ですよね。

青空文庫を縦書きのWebページにCSSを使って変換する

さあ、準備に取り掛かりましょう、まずは、WebブラウザとしてGoogle Chromeを用意することをお勧めします。

Google Chrome - ブラウザのダウンロード

これには、変換対象のWebページ（HTML）をより詳細な情報としてローカルに保存してくれる、WebKitベースなのでブラウザを使って縦書きイメージ確認できる、という２つの理由があります。

ブラウザの用意が出来たら、欲しい青空文庫の本をブラウザ（XHTML版）で表示します。僕は夏目漱石の”こころ”を使って縦書きに挑戦してみますね。

ブラウザで作品を表示したらメニューから右クリック・メニューからを”名前を付けて保存”を選んでページ全体をパソコンにダウンロードします。

すると、htmlファイルと＊_filesというフォルダがパソコン上に作成・保存されます。

この内、htmlファイルを適当なエディタ（ここではベーシックにメモ帳で）で開き、スタイルシート定義を先ほどダウンロードしたbasic_vertical.cssに置き換えます。

通常はaozora.cssになっているので（＊_filesフォルダの中にある＊.cssというファイル名で確認可能）、これをbasic_vertical.cssに置換します。

続いて、作品に目次（見出し）が付いている場合にはページ内リンクも置換します。

（IEで青空文庫のWebページを保存した場合にはこの情報は保存されません）

”こころ”では、”http://www.aozora.gr.jp/cards/000148/files/773_14560.html#midashi＊＊＊”というリンクが見出として複数埋め込まれているので、http://〜/＊.htmlまでを空文字（””）に一括置換し、#midashi＊＊＊のみにします。