2014年03月30日

素人のEPUB作成 Sigil A スタイルシート CSS の作成

夢野久作「奥様探偵術」(テキストファイル)を使ってSigil でEPUB書籍を作ってみたいと思います。

テキストエディタで読み込み、文字コードを utf-8 に変えて保存します。
そのTXTファイルを Sigil で読み込み、[名前を付けて保存]
okusama という名前にしたので、 okusama.epub というEPUBファイルが出来ました。

後は Sigil でこのEPUBファイルを編集していきます。
見出しにしたい部分を pタグから h1~h6のタグに変えておきます。
rubyタグの挿入をします。
ここまで出来たら、スタイルを当てていきます。

スタイルシートを作る


[Styles] を右クリックし、[空のスタイルシートを追加] をクリック。
Style0001.css というスタイルシートが作られます。
名前を変えるには、名前の上で右クリック、[名前の変更] をクリック。
名前を変える場合は必ず 半角英数字を使います。
ここで私もファイル名を簡単な名前に変えておきます。
 Style0001.css   → test.css

Section0001.xhtml にスタイルシートへのリンクを設定します。
ブックブラウザーの [Section0001.xhtml] を右クリックし、
[スタイルシートにリンク] をクリック。
sigil-css-3.jpg

スタイルシート選択画面が現れますので、リンクさせるスタイルシートにチェックを入れて[OK]
sigil-css-4.jpg

これで、スタイルシートへのリンクが設定されました。
[コードビュー] で確認すると、 head要素の中に
<link href="../Styles/test.css" rel="stylesheet" type="text/css" />
と、書き加えられています。
( ../ は「一つ上の階層にある」 という意味です。)
sigil-css2.jpg


[test.css] タブをクリックし、スタイルを書き込んでいきます。
文字コードを指定します。
  @charset "utf-8"; ・・・必ず1行目1列から書く

行の高さを設定します。
  body{line-height: 1.5;}

改行が全て pタグで行われていますので、行間を揃えるために p要素にマージンを設定します。
  p{margin: 0;}

見出しの字下げをします。
  h1{text-indent: 2em;}
  h2{text-indent: 3em;}

スタイルシート
sigil-stylesheet.jpg

ここまでのところで[ブックビュー] で表示を確認すると、ちょっとスッキリし、読みやすくなりました。
こんな感じで読みやすくなるようにスタイルを当てていきます。
sigil-12.jpg


関連記事
 ●素人の簡単EPUB3作成 Text Editor で編集、AozoraEpub3 で変換
 ●素人のEPUB作成 Sigil @ 原稿の作成、改行、ルビ
 ●素人のEPUB作成 Sigil A スタイルシート CSS の作成
 ●素人のEPUB作成 Sigil B ファイルの分割、統合、目次の作成
 ●素人のEPUB作成 Sigil C 表紙の作成
 ●素人のEPUB作成 Sigil D 画像の挿入
 ●素人のEPUB作成 Sigil E EPUBファイル、スタイルシートの検証
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/92017672
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック