『ブログを10年続けて、僕が考えたこと』のScrivenerのファイル構成およびcompileの設定と使用したCSSファイルについて

先日発売した以下の新刊ですが、

ブログを10年続けて、僕が考えたこと
ブログを10年続けて、僕が考えたこと 倉下忠憲

倉下忠憲 2015-05-28
売り上げランキング : 1809

Amazonで詳しく見る by G-Tools

あいかわらず作成に使ったツールは同じです。

Scrivenerでテキストを構成し、.txtに出力。それをでんでんコンバーター変換して、KDPにアップロードという流れ。

でんでんコンバーターで少し凝ったデザイン(組版的な意味で)を行う場合は、作成後のepubファイルをzipにして開くことが必要だったりするわけですが、今回の本はでんでんコンバーターからの出力一発となっております。

それはあらかじめ「仕込んである」からなんですが、その辺も含めて今回は中身の方を紹介してみましょう。

Scrivener
カテゴリ: 仕事効率化, 教育

ファイル・フォルダ構成

まずはScrivenerの中身から。

ファイル&フォルダ構成はこのようになっています。

screenshot

まず「原稿」という大きなフォルダがあり、その下に本の素材となるファイルとフォルダが並んでいます。フォルダは章ごとに1つあり、その下にそれぞれの章の本文となるファイルが並んでいます。ただし、「扉」というファイルは「原稿」フォルダの直下に置いてある点に注意してください。後ほどのcompileでこの配置が効いてきます。

続いて、本文の中身。

screenshot

上の画像は、第一章のフォルダの中身です。第一章のテキストを収めたファイルがここにすべて含まれているわけですが、冒頭の数行に関しては、フォルダの中にあるファイルではなく、フォルダに直接書き込んである内容です。いちおう書いておきますと、Scrivenerのフォルダは、直下にファイルやフォルダを配置するだけのものではなく、そこに直接テキストを書き込むこともできます。
※テキストを入力すると、アイコンの表示が変わります。

こちらは「扉」のテキスト。

screenshot

ご覧の通り、マークダウンではなくがっつりHTMLが使われています。ここが組版的デザインのポイントで、でんでんマークダウンだけだとclassの指定ができないので、「じゃあ、もう直接HTML入れとくか」のノリで、それが記入されています。もちろん、対応するCSSもCSSファイル内に書き込んであるわけですが、それはまた後ほど。

separateの設定

separateの設定は次のようになっています。

screenshot

ほかはすべてシングルリターンですが、ファイル→フォルダの境界だけカスタム設定として「===」が入ります。「===」は、でんでんマークダウンで「(ファイル分割によって)改ページせよ」として機能します。先ほどのファイル構成をもう一度ご覧ください。

screenshot

ファイル→フォルダの境界となるのは(ファイルの次にフォルダが出てくるのは)、

「扉ファイル」→「第一章のフォルダ」
「第一章のラストファイル」→「第二章のフォルダ」
「第二章のラストファイル」→「第三章のフォルダ」
「第三章のラストファイル」→「第四章のフォルダ」
「第四章のラストファイル」→「第五章のフォルダ」
「第五章のラストファイル」→「おわりにのフォルダ」

の6つです。これはつまり、章と章の境目です。ここに改ページが入るようになっています。

このseparateの設定を使わず、本文に直接「===」を記入していっても、できあがるepubは同じです。ただし、こうした設定をしておくと、「記入し忘れる」というミスを防ぐことができます。また、校正作業でファイルの順番を入れ換えても、いちいち「===」の場所を移動させる必要がありません。

formattingの設定

formattingは、3つのパターンを使用しています。「第二階層のフォルダ」「第二階層のファイル」「第三階層のファイル」の3つです。
※第一階層のフォルダは、「原稿」という一番上のフォルダなので使用しません。またその階層にはファイルはありません。

一番簡単なのは、「第三階層のファイル」です。

screenshot

ここには本文が入っています。そこで、titleとtextを選択し、titleの接頭辞として、「### 」を指定します。

ここでのtitleはファイルやフォルダの名前ですので、たとえば「ブログの流れは絶えずして」というファイルならば、

### ブログの流れは絶えずして

ここから本文

といった感じでcompileされるわけです。
※###はでんでんコンバーターにおけるH3の指定。

screenshot

続いて「第二階層のファイル」。

ここに位置するのは、「扉」というファイルだけです。で、名前の通りこのページは扉ページなのですが、一行だけの言葉が置いてあります。このページを「第三階層のファイル」と同じにしてしまうと、少し問題が発生します。

### 扉

あなたのブログが、良き読者と共にあらんことを。

このように、でかでかと(h3で)「扉」と表示されることになるのです。さすがにそれはダサいです(あと、表示上の問題もあるのですが、それは後ほど)。

そこで、第二階層のファイルは、textは選択するものの、titleは選択していません。

というか話はまったく逆で、このファイルだけtitleを選択したくないので階層を分けているのです。

章の扉ページ

screenshot

一番ややこしいのが「第二階層のフォルダ」です。章のトップページに位置する要素です。

ここで使用するのはtitleとtext。そこまでは普通なのですが、接頭辞と接尾辞が込み入っています。

接頭辞と接尾辞は、簡単に言えば、

[○○ title △△]

の○○(接頭辞)と△△(接尾辞)を指定するものです。「第三階層のファイル」ではこの接頭辞を使用しました。で、この○○と△△にはなんでも入力できます。たとえば、○○に<h2>を、△△に</h2>を指定すれば、compile時には、

<h2>title</h2>

となるわけです。そして、接頭語・接尾語には複数行を入力することも可能です。ということは、

<section class=”titlepage”>

<div class=”titlepage-container”>

<div class=”titlepage-collectiontitle-placeholder”></div>
<h2 class=”titlepage-maintitle”>

を接頭辞に、

</h2>
<div class=”titlepage-subtitle-placeholder”></div>
<hr style=”border-top: 2px solid #bbb;” />
<p class=”titlepage-creator”></p>
</div>
</section>

を接尾辞に指定することも可能ということです。

そしてこれは、でんでんコンバーターが自動的に作成してくれる扉ページHTML(titlepage.xhtml)のほぼそのままのパクリでもあります(ある程度はカスタマイズしてあります)。

スタイルシート

が、単にこうしたコードを埋め込んでも、CSSが指定されていなければデザイン上の意味はありません。でんでんコンバーターが作成するtitlepage.xhtmlは、template.cssという特別のスタイルシートが当たっており、本文中に適用されるstyle.cssとは隔離されているのです。

だったら、混ぜてしまいましょう。

でんでんコンバーターの標準のスタイルシートに、epubをzip解体して中身を覗いたtemplate.cssを上乗せしてあります。これで、titlepage.xhtmlで使われているclass指定がそのまま使えます。

その他、標準のスタイルシートから変更を加えている点は、

  • blockquote,ulのフォントサイズをやや小さく
  • h3のmargin-bottomを少し広く
  • エピグラフ用のCSSを追加(フォント小さく、右寄せ)
  • h3のpage-break-beforeを常に

あたりです。

最後の「h3のpage-break-before」はページ制御で、h3の手前で改ページが入るようになっています。見出しごとにページの区切りがあるわけです。

しかし、この指定では、本の一番最初のページがh3で始まっていると、特に意味のない空白ページが生まれてしまいます。本の一番最初の要素がh3→その手間に改ページを入れなければならない→しかし、その手間には何の要素もない→空白のページが誕生、こういう流れです。

そこで、扉ページだけ第一階層に切り分けてtitleを入れないようにしているわけです。こうしておけばh3が入ることはありません。つまり、ここだけ手間に改ページを入れることを避けられるわけです。

この切り分けの強力さは、たぶん実際にcompileを体験してみないと理解しにくいかと思いますが、相当に便利な手法であることをここに宣言しておきます。

さいごに

以上のような、一見ややこしく、その実やっぱりややこしいことをいろいろやっております。

ただ、仕組みを理解するとすごく楽であることは間違いありません。構成を整えていると、文章の順番は結構な頻度で変わります。そのたびごとに、ページ構造を意識してコードを書き換えるのはわりと面倒なのです。

というわけで、上記の設定を確認しながら、実際に本の中身もチェックしてみるとより一層理解が進むかもしれません。宣伝です。

Related Posts with Thumbnails
Send to Kindle
Rashita
物書きをやっております。実用書から小説までなんでもござれのハイブリッド物書きです。 ライフハックや仕事術、知的生産などに興味があります。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です