基本的な編集

ここからは、原稿を支配する３つのファイル、

vivliostyle.config.js　… 見た目を管理するために参照するCSSや、原稿の順番を決めるためのファイル
manuscript.md　… 原稿本体であるmarkdownファイルの見本
theme_common.css　… 文章の見た目を管理するCSSファイル

を調整する具体的な手法について説明していきます。 CSSファイルをいじる場合、別の場所に元のtheme_common.cssをコピーしてバックアップしておくと安心です。あるいは、同じ階層にコピーしてtheme_common_copy.cssを作って、その後theme_common_copy.cssの方だけをいじってもよいです。その際は、vivliostyle.config.jsのthemeのtheme_common.cssをtheme_common_copy.cssに変えておいてください。そうすると、プレビューやビルドの際に適用されるCSSがtheme_common_copy.cssの方になります。

原稿（基本的な編集）

改行　… ただの改行でも1行空行を作る。あるいは、改行の直前に
と書く。空行なしだと、同じ段落に入る。
空き行　… そのぶん
を書く。これはプレビューを見ながら調整するとよい。
ルビ　… {漢字|ふりがな}と書く。
傍点　… 「『、、、、』というルビ」として書く。
縦中横　… <span class="tcy">と</span>の間に挟む。
縦中横とは縦書きの中に横書きを入れるこういうやつ
太字、斜体、取り消し線　… discordと同じ書き方。下線は同じではない。
見出し　… discordと同じ書き方。「#」の数で決まり、作品タイトルの大見出しは1個、章見出しは2個。
下線、文字の色を変える、文字のフォントを変える、字間調整、改ページ　… 後述の「原稿（発展的な編集）」で紹介する。

原稿（発展的な編集）

原則、やりたいことに対応してtheme_common.cssにcssのクラスを造設する。造設箇所は、pから始まる括弧の下の、.tcyや.uprightと書いてある場所。改ページ以外は、縦中横と同様、<span class="[クラス]">と</span>で本文の指定したい箇所を囲めば適用できる。

下線

例：

  text-decoration: underline;
}

を追記。クラス名はunderline。（.は含めない）

文字の色を変える

例：赤色(#ff0000)にしたい場合、

  color: ff0000;
}

を追記。クラス名はcolored。（.は含めない） colorは16進数のカラーコードまたは色名で記述する。どちらであれ、Visual Studio Codeなら入力候補を出してくれる。

文字のフォントを変える

例：文章の一部のフォントをHG丸ゴシックM-PROに変えたい場合、

.alterfont {
  font-family: 'HG丸ゴシックM-PRO', Times, serif;
}

を追記。クラス名はalterfont。（.を含めない）文章全体のフォントを変えたい場合は、htmlから始まる括弧のfont-familyを変える。ちなみに、左から順に適用されているので、アルファベットフォントとアルファベットを含む日本語フォントとを両方適用したい場合、アルファベットフォントを左に書く。（さもなくば、アルファベットを含む日本語フォントが優先されてアルファベットにまで適用されてしまうため、アルファベットフォントが表示されるに至らなくなってしまう）

字間調整

例：字と字の間に3文字ぶんの字間を空けたい場合、

.jikan {
 text-indent: 4em 
}

と追記する。クラス名はjikan。（.を含めない）文字を書いた後どれだけ下がって次の文字を書くかということを示しているため、３文字分追加で空けたいならデフォルトの1emに3em追加して4em。（emはfont-sizeを1とする単位）

改ページ

例：

hr.page-wrap {
  break-before: page;
  visibility: hidden;
  margin: 0px;
  padding: 0px;
  height: 1px;
}

と追記する。 <hr class="page-wrap>と書けば改ページできる。囲む必要はない。

画像の貼り付け

例：原稿と同じ階層のディレクトリに置いたfig1.pngを300pxの幅で貼り付けたい場合、

![図1](./fig1.png){width=300}

と記述する。高さを調整したい場合はwidthと同様にheightとして指定する。プレビューを見ながら作業するとよい。

製本

原稿の順番

概略：プレビューやビルド時には、vivliostyle.config.jsのentryに記載されているmarkdownファイルの上からの順番がページ順として処理される。

まず、manuscript.md以外のファイルを原稿として読み込めるようにしましょう。 WORKSPACEの文字の右側の「□＋」のマークか、あるいはWORKSPACEを右クリックして一番上の「New File」で新しいファイルを作りましょう。適当に「a.md」と名付けたファイルを作りましょう。

そしたら、

あ

とだけ書きましょう。そのあと、vivliostyle.config.jsのentryの下の現在

manuscript.md

になっているところを

a.md
//manuscript.md

にしてみて、プレビューしてみましょう。

すると、a.mdの内容のみが反映されていると思います。 //を書いた行は文字が緑色になりまして、これは「コメントアウト」と言って、実行時にただのコメントとして無視されます。

また、「い」とだけ書いたi.mdも作ってみましょう。そしたらvivliostyleのentryを

a.md
i.md
//manuscript.md

に変えましょう。すると、「あ」の次ページに「い」が表示されると思います。

ここで、i.mdとa.mdの上下を入れ替えるとページ順も逆になります。このように、コメントアウトを飛ばしながら上から順に処理されて生成されていきます。

ページ番号

theme_common.cssにある

  counter-reset: page ;
}

の記述の効果により、1ページから始まるページ番号が付きます。 1ページから始めたくない場合は、counter-reset: page+4 などとしてください。

ページ端の作品名

theme_common.cssの中に、 @page: left {から始まる括弧や、@page: right {から始まる括弧があり、それぞれ左ページと右ページに対応しています。その中の、@top-left {や@top-right {から始まる括弧がそれぞれページの左上や右上の記述に対応していて、さらにその中にあるcontent:より後が実際に書かれる内容です。作品名をページ端に入れたい場合は、プレビューで確認しながらcounter(page)の前後に作品名を入れましょう。

composershandle’s blog

Vivliostyle製本手順書②（原稿編集編）