■はじめに
前回、前々回とお届けしている「でんでんエディター」の紹介記事の3回目となります。
1回目はでんでんエディターの紹介と基本的なマークの追加を、2回目はルビ、画像のマークと追加のCSSを記述しました。
今回はさらにマークとCSSを追加し、その後でんでんコンバーターでEPUB化を行います。
前回の続きの素材データは以下からダウンロードしてください。
サンプルデータを解凍すると、中には今回の開始ファイル（「ookami_koyagi3_start.txt」「css_start.txt」）、画像ファイル（「img01.jpg」）、完成ファイル（「ookami_koyagi3_finish.txt」「css_finish.txt」）が入っています。
Webブラウザで、でんでんエディターを開いて、エディット画面に「ookami_koyagi3_start.txt」の内容をペーストしてください。
また、CSSエディターには「css_start.txt」の内容をペーストしてください。
■エディット画面でのHTMLタグの入力
まず著者名と翻訳者名の配置を右揃えにします。右寄せにするにはCSSのクラスセレクタで右寄せのクラスを定義し、著者名や翻訳者名を囲む「pタグ」に適用します。
でんでんマークダウン（でんでんコンバーター用のマーク記法）では空白行で囲まれた範囲が自動的にp要素となり、一見CSSクラスが適用できないように思われます。
ですが、でんでんマークダウンではHTMLタグを直接入力できます。著者名と翻訳者名の行はそれぞれ明示的にp要素とし、著者名には「author」、翻訳者には「translator」というクラスを適用することにします。
でんでんエディター エディット画面
CSSエディター画面に切り替えて、既存のCSSコードに以下のスタイルを追加します。
.author, .translator {
text-align:right;
}
プレビュー画面で確認すると、著者名と翻訳者名が右揃えになったのが確認できます。
プレビュー画面で確認
次に、終わり近くにある、おなかにごろた石を入れたおおかみが歌う部分の4行（多めのインデントが入っている部分）の前後に、余白を多めにとるようにします。
プレビュー画面 現状の余白は通常のp要素と変わらない
ここもp要素とし、「gorota-ishi」というクラスを適用する指定を行います。
ここで注意すべきは、明示的に指定した要素内での改行は自分でbr要素を記述する必要がある、という点です。
以下のような記述になります。
でんでんエディター エディット画面
CSSは次のコードを追加します。
.gorota-ishi{
margin:1em 0;
}
marginプロパティは値を2つ指定した場合、1つめが上下の余白を、2つめが左右の余白を表します。ここでは上下に1文字分の余白を指定しました。
プレビューすると次のようになります。
プレビュー画面で確認
このように、でんでんコンバーターではでんでんマークダウンだけでなくHTMLの直接記述も可能です。でんでんマークダウンだけでもかなりの指定が可能ですが、HTMLの直接記述が可能なことで、より懐の深いサービスとなっています。
原稿のマークとCSSの編集はここまでとしておきます。
マーク済みの原稿データはテキストファイルとして保存しておいてください。また、CSSエディターに記述したCSSスタイルもテキストエディタにコピー＆ペーストして保存しておきましょう。
■でんでんコンバーターでのEPUB化
でんでんコンバーターの利用については以前紹介したので、詳細は省略させていただき、注意点を確認しようと思います。
まず1つめは、画像ファイルの指定です。でんでんエディターではDropｂoxアカウント内の画像を指定しましたが、EPUB化する場合EPUB内の画像を指定する必要があります。
結果的にファイル名のみ指定すればよいので、一章の最後の画像指定のマークは次のように書き換えて上書き保存してください。
2つめはCSSです。
でんでんコンバーターでは制作者がCSSを用意しなくても十分な読みやすさが確保されるように、システムがCSSを用意してくれています。
制作者が用意したCSSファイルも利用できますが、その場合デフォルトのCSSが無効になってしまいます。
そのため、デフォルトのCSSファイルに制作者が追加したいスタイルを追記して利用するのが適切です。
デフォルトのCSSはでんでんコンバーターのダウンロードページから入手できます。
でんでんコンバーター ダウンロードページ
デフォルトCSSをダウンロードして解凍すると、縦書き用と横書き用の2ファイルありますが、横書き用の「default.css」をテキストエディタで開きます。
このファイルの末尾に、でんでんエディターのCSSエディターで記述したスタイルを追加して上書き保存します。
ファイル名は変更して構いませんが、拡張子は「.css」にしてください。
でんでんコンバーターにアップする前に、原稿テキストファイル、CSSファイル、画像ファイルは同じフォルダにまとめておきます。
あとはでんでんコンバーターでこれらのファイルをアップロードしてEPUB化します。
この際、「タイトル」には「おおかみと七ひきのこどもやぎ」、「作成者」には「グリム兄弟」と入力しておきます。
後は、下の方にある［変換］ボタンをクリックすると、EPUB化およびダウンロードまで自動で行われます。
■最後に
3回に渡ってでんでんエディターの紹介を行ってきました。
日本の電子書籍ストアではEPUB 3形式が標準になってきていますが、MacでもWindowsでも手頃に利用できるEPUB 3制作アプリが見当たらない状況です。
EPUB 2の頃はSigilという無料のアプリがあって重宝していたのですが、SigilではEPUB 3形式のファイルが作れません。
そんな中で、でんでんエディターとでんでんコンバーターは初心者にも使いやすく、かなり色々なことができる奥の深さもあります。多くの制作者にとって非常に有力な選択肢となることでしょう。
1つ告知をさせていただきます。
先日、私がお手伝いさせていただいた電子写真集「もうひとつの”イプシロン・ザ・ロケット”」がiBooks Storeでリリースされました。
昨年打ち上げに成功したイプシロンロケットの写真集です。ご興味のある方は、まず無料お試し版を見ていただけると幸いです。
■著者プロフィール
林 拓也（はやし たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi
■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook
代表取締役・ITライフハック代表
ITライフハック編集長・ライター
ITライフハック副編集長・ライター
