次はePub用ファイルであることを認識させるためにheadパートを記入しましょう。
とはいっても、ここで難しいことをする必要はありません。
ポイントは、「UTF-8形式で保存する」 この一点に尽きます。
今回はテキストエディタを使います。UTF-8で保存できるものを使ってください。
(僕は「秀丸」というソフトを使っています。
これは有料ソフトですが、置換機能などもあり非常に便利です。
試用期間もありますので、良いテキストエディタが無い人は試してみてください。)
※ここから、テキストエディタを「秀丸」と記載します。
■秀丸にheadをコピーし、更にbodyをコピーする
1. 秀丸を起動する
2. 下記のソースコードを全て貼り付ける
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> /*ここに本文部分のHTMLソースを貼り付ける*/ </body> |
これが日本語ePub用のheadパート(必要最小限)です。
フォントとかはiBooksで反映させる方法がわかっていないので省いています。
コピーすると、下図のようになるはずです。
3. Windows Live Writerを開き、「ソース」タブを押し、出てきた全てのソースコードを秀丸のbody部分にコピーする
Windows Live Writerの左下にある「ソース」タブを押すと、下記画面が表示されるかと思います。
全てを選択し(CtrlとAを押せば一発で全て選択できます)、コピーしてください。
4. 「Title Sentence」を内容に合わせたタイトルに、「mystylecss.css」を自分のCSSファイル名に変更する
5. 「名前を付けて保存」を選択し、UTF-8&HTML形式で保存する
ここでUTF-8にしていなかったり、HTML形式にしていなかったとしても、
同じファイルを開いて「名前を付けて保存」を選べば設定し直せます。
■画像をhtmlファイルと同じ/下位フォルダに入れる
Windows Live Writerでbodyパートを作ると、画像ファイルは変なフォルダにあったりしませんか?
HTMLファイルを作った時にePub用の正しい位置に画像ファイルを持ってきましょう。
6. imgフォルダに必要な画像ファイルをコピー
保存する先は、「htmlファイルと同じフォルダ、または下位フォルダ」です。
僕はhtmlファイルと同じ場所に「img」というフォルダをつくり、その中に保存することをオススメします。
コピーの際、拡張子が大文字になっていると後でエラーになることが多いです。
見つけたタイミングで小文字にしておきましょう。(右参照)
※拡張子が表示されていない場合の表示方法:
ウィンドウの「ツール」→「フォルダ オプション」→「表示」タブを選択→「登録されている拡張子は表示しない」のチェックを外す
7. body部分の画像ファイル参照先を正しくする
ここもWindows Live Writerで作るときの悲しい点なのですが、
画像ファイルの参照先が変なことになっています。
そのため、手で修正する必要があります。(コレが結構面倒くさい。。。)
具体的な変更点は・・・
- 画像を示す場所(やたら長文)の場所を探す
- 「<a href~」で始まる部分、</a>、width・heightの部分を削除する
- jpgファイルの名前を正しいものにする
(最初はWindows Live Writerが作ったサムネイル画像のファイル名になっている)
iPadではwidth・height指示がうまく動きませんでした。
残していると変に場所をとるだけなので、今は消しておくほうが無難かと思います。
ちなみに、下図に例を示しておきました。
これで、ようやくHTMLファイルが完成です。
作り方がわかったら、どんどんHTMLファイルを作っていきましょう。
0 件のコメント:
コメントを投稿