Sigilでepubを作ろう(2) スタイルシートを追加する

スタイルシートを追加する

スタイルシートのファイルを作成

「ブックブラウザー」で「Styles」を選択し、右クリックで「空のスタイルシート」を追加する。
ファイル名はなんでもいいけど、main.css にしときます。(右クリックで名前の変更可能)

一番先頭に

@charset "utf-8";
行間

ルビがある行とない行でおかしくなるので、調節は必須。

* {
  line-height: 150%;
}
CSSを指定する

Section0001.htmlをコードビューで開いて、CSSを読み込むようにする

<title>銀河鉄道の夜</title>
<link href="../Styles/main.css" rel="stylesheet" type="text/css" />

Section0001.htmlをブックビューに切り替えると、行間がちょっと開いて見やすくなった。

pタグのマージンを消す

pの前後の改行をなくしたい

p{
  margin: 0;
}
見出しの字下げ

もともとのテキストの見出しは「3字下げ」なので、margin-left をいれてみる。

h2{
  margin-left:3rem;
}

Section0001.htmlをブックビューに切り替えると、見出しが下がっているのがわかる。

ファイルをわけてみる

とりあえず章ごとにわけてみる

ブックビューで開く。
ファイルを分けたい部分、最初は「二、活版所」の「二」の直前に、カーソルをおいて、「Split At Cursor」のアイコンを押す。
するとSection0002.htmlが作成される。これをコードビューでみると、タイトルやCSSのタグの内容が、Section0001.htmlと同じであることがわかる。各章ごとにこれをやっていけばよい。
しかし、Section0001.htmlもコードビューでみて、一番下にいくと、h2 の余分なタグがはいっていたりするのでそれは削除する。なので、分割したら、その前のファイルの最後のほうをみて、余分なものがはいっていたら削除する。(スプリットの仕方が悪いのかも?)

目次を作り直す

もう一度「Generate Table Of Contents」をクリックする。
分割したときに先になるファイルの最後に変なh2が残っていると、この目次を作るときにわかる。

epubリーダーで、章が終わると頁がすすむことを確認する。