タテ書きKindle原稿をマークダウンとCSSでつくる方法

blog-hero-imgマークダウンとCSSを使った、タテ書きのKindle原稿(.epub)の作り方を紹介します。でんでんコンバーターは使いません。

pen-icon2021.08.20rewrite-icon2022.01.11

Profile Pic

この記事の筆者:三好アキ(ウェブエンジニア)


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など8冊を販売中。本に関するインタビュー記事はこちら。



タテ書き文章について

ネット上の情報のほとんどが横書きであるように、横書きはユーザーにもっとも馴染んだフォームといえます。

しかし日本語は縦書きも可能な言語で、そこには横書きにはない魅力があります。

縦書きにすることで、フォーマルな印象が強まり、読者の精読率を高める効果があると一般的にいわれます。

私はこれまで下のような記事を書いていますが、あの記事で紹介したのは、マークダウンとCSSとPandocを使って、ヨコ書きのEPUBファイルを作る方法でした。

今回は縦書きの文章の作り方と、横書きとの違い、注意すべき点などを紹介します。

タテ書き文章のためのCSS

縦書きの文章でも、基本的なプロセスは上の記事で紹介したものと同じです。

マークダウンで原稿を書き、縦書きの用のCSSを作り、表紙画像を用意して、それらすべてをPandocでEPUBファイルに変換する、というプロセスです。

しかし縦書きのためには、CSSのbodyに次の2つを追加します。

body {
    writing-mode: vertical-rl;
    overflow: auto;
}

そうすることで、下のようになります。

しかしそれでも時は流れ、流れた時は戻らず、戻らぬ時は年齢として肌に刻まれてゆく。

今回、私はbodyに次のようなスタイルを当てました。

body {
    font-family: serif;
    font-weight: 300;
    font-size: 14px;
    background-color: white;
    color: #333;
    width: 100%;
    overflow: auto;
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    -epub-writing-mode: vertical-rl !important;
}

ここに当ててある!importantと、ベンダープリフィックスの-epub-については後ほど解説します。

英数字をタテ書き表示する

縦書きでは英数字の扱いに手間がかかります。

マークダウンで原稿を書いている段階では横書きとなっているので、その横書きの英数字を縦書きに変更する必要があるためです。

何も手を加えずに縦書きにすると、次のようになります。

彼女はただ「I'm living with my boyfriend」と言っただけなのである。
EUと北大西洋条約機構(NATO)の両方に加盟している国がある。
1,200人までだった収容人数を2,000人まで拡張したのは2017年だった。

まず英語の文章についてですが、私はなるべく翻訳した日本語文を使うようにし、もし使えない場合は、上のようにそのまま英語で縦書きにして表示するようにしました。

一方で短い英単語、例えば「EU」や「NATO」といったものは、下のCSSを使って縦書きに直しました。

.orientation{
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}

これを下のように適用します。ご覧のように英単語のアルファベットには、それぞれに<span>が入っています。

// マークダウン原稿

<span class="orientation">E</span><span class="orientation">U</span>

これを表示させると次のようになります。

EU

「NATO」は下のようになります。

// マークダウン原稿

<span class="orientation">N</span><span class="orientation">A</span><span class="orientation">T</span><span class="orientation">O</span>

表示させると次のようになります。

NATO

数字に関しては、アラビア数字と漢数字のどちらを使うのか、まず決める必要があります。

ビジネス書のような、一般受けを重視する、内容よりも読みやすさが重要な類の本は、下のようにアラビア数字を使っているケースがよくあります。

1200

このようにアラビア数字で表記すると、文章との境目がわかりやすく、文章を読んでいる合間の目の休憩、いわゆる「目休め」になると私は思うので、確かにここにメリットがあることは認めつつも、ある種のフォーマルさや格調の高さを演出する場合には不適だと感じています。

そのため私は、縦書きの文章でアラビア数字は基本的に使わず、漢数字で統一しました。

次に考えるべきことは、漢数字の表記方法です。

というのは「1200」を漢数字で表記する場合、次の2通りがあるためです。

千二百
一二〇〇

私は当初、前者の「千二百」を使おうと考えていましたが、最終的には後者の「一二〇〇」で統一しました。

これはアラビア数字と漢数字のちょうど真ん中を取った書き方といえます。

どれを使うにせよ、一つの本の中でさまざまな表記方法を混在させることはせず、どれか一つに統一するようにしましょう。

誰でも手軽に出版できるKindle本の中でも特にエッセーや旅行記といった「書きやすいもの」には、表記の揺れやフォーマットの乱れがしばし散見されますが、そのような場合は、内容以前に著者の見識が疑われてしまいます。

また最近はネット記事に限らず、書籍、ひいては新聞記事でも「速いです。」、「多いです。」、「欲しいです。」、「わかりづらいです。」、「(可能性が)高いです。」、「(会わないと)いけないです。」、「(関係が)深いです。」などといった品のない文末表現を見かけます。

「形容詞 + です。」の形は必ずしも間違いとはいえず、昭和の国語審議会などでは認可も出ていますが、書き言葉の地の文でこのような表現を使うと、どんなに立派なことを書いていてもまるで小学生の日記のように幼稚で、ぶざまで、間の抜けた印象を生むので注意しましょう。

漢字のフリガナ

読者の立場では難読文字にフリガナがあれば便利ですが、例えば谷崎潤一郎のような作家は、「フリガナをつけると紙面の見た目がごちゃごちゃする」といってこれを嫌っていました。

私も基本的にはフリガナをつけるのが好きではなく、これは使われている漢字を正しく読めることが、その読者の読解能力を示す一種のバロメーターとなり、すなわち本の内容をその人が正しく読み解けるかどうかに関わってくるためです。

そういっても一般向け、例えばビジネス書や新聞などでは、このような高踏的な態度は取れませんので、フリガナをつけるのが一般的です。

フリガナ、別名「ルビ」には専用のHTMLタグが用意されており、これは横書き、縦書き共通して使うことができます。

// マークダウン原稿

<ruby>艱難辛苦<rt>かんなんしんく</rt></ruby>
// マークダウン原稿

<ruby>戦<rt>おのの</rt></ruby>き

これを縦書きで表示させると、次のようになります。

艱難辛苦かんなんしんく
おのの

文頭の一文字下げ

文章の文頭は一字下げるのが普通です。

私はマークダウンに<span>を入れて、そこにmargin-topのスタイルを当てて、一字下げを作りました。

// CSS

.indent{
    margin-top: 1em;
}
// マークダウン原稿

<span class="indent"></span>平俗な、まじめな、道徳的な、八方に目を配った、謙遜まみれの、馬鹿にお行儀のいい答え。

表示させると次のようになります。

平俗な、まじめな、道徳的な、八方に目を配った、謙遜まみれの、馬鹿にお行儀のいい答え。

右開きを指定する

縦書きの本は右開きになります。

そのためマークダウンファイルの冒頭の「frontmatter」部分にpage-progression-direction: rtlを入れて、この原稿を右開きにすることを指定します。

---
title:
- type: main
  text: 縦書き文章のつくり方
creator:
- role: author
  text: 三好アキ
language: ja
page-progression-direction: rtl
---

以上で、縦書きのためのCSSと「frontmatter」の設定は完了です。

マークダウンとCSSを使ってKindle原稿をつくる方法」で解説したように、Pandocを使って下のコマンドでEPUBファイルを生成します。

pandoc -f markdown -t epub3 book.md -o book.epub --css style.css --toc --toc-depth=2 --epub-cover-image=cover.png

出版後にヨコ書きになる問題

以上で縦書きのEPUBファイルが準備できたので、Amazonにアップロードしました。

しかし販売が開始された後、確認のため購入してみると、なぜか横書きとなっています。

Kindle Previewer 3(デスクトップアプリ)、原稿をアップロードするページのオンラインプレビューアー、そして販売開始後にサイト上の「試し読み」で表示させた時は縦書きで正しく表示されているにも関わらず、購入してスマートフォンで確認すると、横書きに変換されていました。

Amazonに問い合わせをすると、「確かに横書きになっていることが確認できたので、原因を調査して一週間以内に連絡を差し上げる」という返事をいただきました。

しかし私は一週間も待ちたくなかったので、自力で解決することとし、試しに!importantと、以下のコードをCSSに追加してみました。

body {

    ...

    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    -epub-writing-mode: vertical-rl !important;
}

-epub-というベンダープレフィックスがあることは知らなかったのですが、これを適用してPandocでEPUBファイルを生成し、再アップロードすると、購入しても正しく縦書きで表示されるようになっていました。

その後、ちょうど一週間後にAmazonから連絡が来ましたが、メッセージの趣旨は「XX日に再アップロードしてもらった版で、表示が正しく縦書きになっていることが確認できました」というだけで、Amazonの方で何か対応をしたなどは書かれていなかったので、おそらく上の追加したコードがうまく働いたということなのだと思います。

要約できるものと要約できないもの

以上、本記事ではタテ書き原稿の作り方を紹介しましたが、最後に、ここで紹介した方法で出版したタテ書きの随想「W」の執筆時に私が考えていたことを書きます。

「W」は私の体験を元にした随想です。その執筆を始めたころ、私は2種類の本の違いについてよく考えていました。

書店に行けば「世界の名著あらすじ集」と書かれた本が積まれており、その中ではトルストイの『戦争と平和』といった文庫本で数冊ある本も、わずか数行のセンテンスでまとまっています。これは小説の話の筋が要約できるからで、例えば「Aが〜をした、そしてBが〜をした」といった即物的な事実の単なる羅列は、理科の実験の手順のように簡単に要約できます。

それでは小説とは、そうやって数行で表せるものを無理やり引き伸ばして、希釈して、読む人の時間を奪うだけのものなのでしょうか。もちろんそうではありません。

小説を読む中で読者がさまざまな感情を抱き、感情を味わうこと、いわば「感情の旅」こそが小説の核心だと私は考えています。感情は物ではないので、「泣け」と言われて涙を流せる人が珍しくなくても、「悲しめ」と言われてすぐにその感情を抱ける人はごく少数でしょう。「どなれ」と言われてすぐに大きな声は出せても、「怒れ」と言われてその感情がすぐに湧いてこないように、感情には「時間」という要素が不可欠です。そして小説の長さとは、この「時間」を担保するものであって、私たちが時間を要約できないように、小説が私たちに引き起こす感情も要約できません。
普段私たちは何かと話の筋やあらすじといったことにこだわりますが、小説において重要なのはそこではなく、話の筋と「時間」という要素が掛け合わせて生まれる感情こそが小説の真髄なのです。

「W」の執筆を始めた頃、私はプログラミング初心者に向けた本「R」を書いていました。「R」を発売をしてみると多くの人に好意的に受け入れられましたが、執筆中にはある種の空虚を感じずにはいられませんでした。
「R」はある最先端のテクノロジーの使い方を解説している実用的な本です。しかしテクノロジーというものは常に発展していくので、5年後、10年後には全く別のものへと進化しているはずです。それは『Windows 95の使い方』といった本をいま買っても何の役にも立たないことからも、容易に想像できます。
このように実用的であるほど、そして最先端であるほど、さらに客観的であるほど、本の中身は腐りやすく、すぐに役に立たなくなってしまうのです。これが空虚を覚えた原因ですが、しかし、自分の時間と労力をかけて執筆している以上、長持ちするもの、「腐りにくいもの」を作りたいと思うのは当然です。「腐りにくいもの」とは、実用的でないもの、最先端でないもの、そして主観的なもので、その最たるものが人間の感情です。

「R」という腐りやすい本を書きながら、その腐りやすさへの対抗手段として、私の感情を素材にした「W」という随想を書いていたことになりますが、実用書と随想は奇妙なほど対照的です。

実用書を読む時、読者はその筆者の人間性に関心を持ちません。読者は具体的な知りたいことがあって実用書を読むので、本がその目的さえ満たすことができれば不満は生まれないはずです。一方で随想とは、最初から最後まで著者の人間性がたち籠めているものであり、本を読んでいる時、読者は著者の存在を常に意識させられます。そのため、読者は著者への関心からその随想を手に取る可能性が高いといえますが、これは逆から言うと、著者がどこの馬のわからない人であれば、他人の感情のごちゃごちゃに関心を向けるほど暇な人はいないので、ほとんどの人は興味を持たないことになります。
実用書はそこで説明されていること自体が読者の関心を惹きつけるため、著者が誰であるかといったことは閑却されやすくなり、無名の著者でも高い売上を上げられる可能性があり、一方で随想とは著者が誰であるかといったことが重要になってくるため、無名の著者では売上はほとんど期待できません。しかし私は、実用書と随想の二つを書いてみて、執筆後の満足度は後者の方が圧倒的に高いと感じます。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談