その4 コンテンツを作る
犬のためのKDPは、ブログ版の終了後、内容を増補改訂する予定です。
サンプルはちょこっとしたものにします。本文4行画像1枚。
本文を書く
SigilのまんなかにHTMLのソースコードが表示されていたら、ツールバーの本のアイコンをクリックしてください。＜＞と書かれたアイコンと並んでいます。
それでは本文を書いてみましょう。真ん中のカラムに書いてみてください。
サンプルなんでシンプルに。
はじめに
これがほんぶんです。
おわりに
ここに図を挿入します。
タグをつける
見出しを指定しておかないと目次も作れないので、見出しをつけておきましょう。「はじめに」の部分を選択して、ツールバーのH1と書かれたボタンを、押してみてください。文字が大きくなったらOKです。同じように「終わりに」の部分をH1にしましょう。
こういう風になっていたらOKです。
こんどは＜＞ボタンを押してみてください。
こういう風にHTMLが表示されていると思います。H1は見出し、pが本文、それ以上のことはHTMLの勉強をしましょう、以外書きません。手でHTMLを直接さわることもできることを覚えておくと、なにかの役にたつと思います。
図を挿入する
次は図を挿入してみましょう。図はEPUBにファイルを挿入し、そのあとhtmlから参照します。
Book BrowserウィンドウのImagesを右クリックして、[Add Existing Files]を開きます。ダイアログからファイルを指定して追加は終了です。
画像はimgタグを使用して呼び出します。SigilのInsert Fileボタンを使うのが楽ですね。
ダイアログから画像を選択するだけです。
こんな感じで画像が表示されたらOKです。
スタイルを指定する
スタイルを指定します。Book BrowserウィンドウのSylesフォルダのコンテクストメニューからAdd Blank Sheetを選択してください。CSSファイルが生成されます。
生成されたStyle0001.cssを編集します。
本文からStyle0001.cssファイルを参照させれば終了です。左のカラムからSection0001.xhtmlを選択して、headタグの間に次のコードを書き込んでください。
/*見出し*/
h1
{
font-size: 200%;
border-bottom: 1px solid;
page-break-before: always;
}
p
{
margin-left: 1em;
text-indent: 0.5em;
}
このような感じで見出しの所に下線がついたり、本文がインデントされていればOKです。
これでコンテンツの作り方は終了です。
え？って思う人もいるかもしれませんが、あとはhtmlやcssの書き方の話、そしてなにより書かれる内容の話になりますので、「犬のため」としてはここで終わっておくのがよいかと思います。
次は目次・表紙などの作り方を書いていきます :)
http://d.hatena.ne.jp/sauberwind+sakuraSoftware/20130303
http://d.hatena.ne.jp/sauberwind+sakuraSoftware/20130305/1362488648
http://d.hatena.ne.jp/sauberwind+sakuraSoftware/20130309/1362827454
http://d.hatena.ne.jp/sauberwind+sakuraSoftware/20130309/1362828601
