【美ePub作成】HTMLファイルのヘッダは基本コピペで

次はePub用ファイルであることを認識させるためにheadパートを記入しましょう。

とはいっても、ここで難しいことをする必要はありません。
ポイントは、「UTF-8形式で保存する」 この一点に尽きます。

今回はテキストエディタを使います。UTF-8で保存できるものを使ってください。
（僕は「秀丸」というソフトを使っています。
これは有料ソフトですが、置換機能などもあり非常に便利です。
試用期間もありますので、良いテキストエディタが無い人は試してみてください。）

※ここから、テキストエディタを「秀丸」と記載します。

※ePubに関する全体の目次はコチラ

■秀丸にheadをコピーし、更にbodyをコピーする

1. 秀丸を起動する
2. 下記のソースコードを全て貼り付ける

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>Title Sentence</title>
    <link type="text/css" rel="stylesheet" media="all" href="mystylecss.css" />
  </head>
  <body>

  /*ここに本文部分のHTMLソースを貼り付ける*/

  </body>
</html>

これが日本語ePub用のheadパート（必要最小限）です。
フォントとかはiBooksで反映させる方法がわかっていないので省いています。

コピーすると、下図のようになるはずです。

sourceOnHidemaru1

3. Windows Live Writerを開き、「ソース」タブを押し、出てきた全てのソースコードを秀丸のbody部分にコピーする

Windows Live Writerの左下にある「ソース」タブを押すと、下記画面が表示されるかと思います。
全てを選択し（CtrlとAを押せば一発で全て選択できます）、コピーしてください。

 writerSource

4. 「Title Sentence」を内容に合わせたタイトルに、「mystylecss.css」を自分のCSSファイル名に変更する
5. 「名前を付けて保存」を選択し、UTF-8＆HTML形式で保存する

saveUTF-8

ここでUTF-8にしていなかったり、HTML形式にしていなかったとしても、
同じファイルを開いて「名前を付けて保存」を選べば設定し直せます。

■画像をhtmlファイルと同じ／下位フォルダに入れる

Windows Live Writerでbodyパートを作ると、画像ファイルは変なフォルダにあったりしませんか？
HTMLファイルを作った時にePub用の正しい位置に画像ファイルを持ってきましょう。

6. imgフォルダに必要な画像ファイルをコピー

kakutyoushi保存する先は、「htmlファイルと同じフォルダ、または下位フォルダ」です。
僕はhtmlファイルと同じ場所に「img」というフォルダをつくり、その中に保存することをオススメします。

コピーの際、拡張子が大文字になっていると後でエラーになることが多いです。
見つけたタイミングで小文字にしておきましょう。（右参照）

※拡張子が表示されていない場合の表示方法：
ウィンドウの「ツール」→「フォルダ オプション」→「表示」タブを選択→「登録されている拡張子は表示しない」のチェックを外す

7. body部分の画像ファイル参照先を正しくする

ここもWindows Live Writerで作るときの悲しい点なのですが、
画像ファイルの参照先が変なことになっています。

そのため、手で修正する必要があります。（コレが結構面倒くさい。。。）
具体的な変更点は・・・

  1. 画像を示す場所（やたら長文）の場所を探す
  2. 「<a href～」で始まる部分、</a>、width・heightの部分を削除する
  3. jpgファイルの名前を正しいものにする
    （最初はWindows Live Writerが作ったサムネイル画像のファイル名になっている）

iPadではwidth・height指示がうまく動きませんでした。
残していると変に場所をとるだけなので、今は消しておくほうが無難かと思います。

ちなみに、下図に例を示しておきました。

GraphicChange

これで、ようやくHTMLファイルが完成です。
作り方がわかったら、どんどんHTMLファイルを作っていきましょう。

ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)