個人でも可能な電子出版 誰でもできる電子出版 第二十一回

■はじめに
前回は「でんでんエディター」の紹介記事の前編をお届けしました。今回は後編…の予定だったのですが、中編とさせていただきます。つまり、本紹介記事は全3回となります。

前編ではでんでんエディターの概要と、エディター部分の基本的な使い方（見出しとページ分割の設定）を紹介しました。

中編では、エディター部分の使い方の続きと、CSSについて扱っていきます。前回の続きの素材データは以下からダウンロードしてください。

［サンプルデータダウンロード］

サンプルデータを解凍すると、中には今回の開始ファイル（「ookami_koyagi_start.txt」）、画像ファイル（「img01.jpg」）、完成ファイル（「ookami_koyagi_finish.txt」）、CSSファイル（「css.txt」）が入っています。

■原稿の調整
開始ファイルをテキストエディターで開き、内容を全て選択しクリップボードにコピーします。Webブラウザで、でんでんエディターを開いて、エディット画面にペーストしてください。

でんでんエディター エディット画面

次にルビをふってみましょう。33行目の「荒物屋」を選択して上部［ruby］ボタンをクリックします。

ルビ追加

「荒物屋」の部分が「{荒物屋|ルビ文字}」と変わります。「ルビ文字」の部分によみがなである「あらものや」を入力します。

ルビ文字を入力

プレビュー画面に切り替えてルビが表示されることを確認してください。

続いて画像を入れてみます。

でんでんエディターでは上部の［画像の挿入］ボタンを使って画像を追加する場合、Dropbox内にある画像から選択するようになっています。Dropboxはクラウドストレージサービスの1つですが、本記事ではDropboxに関する説明は省略します。

なお、でんでんエディターで画像入りのEPUBファイルを制作するためにDropboxアカウントは特に必要ではありません。

Dropboxにある画像を使うと、プレビュー画面で実際に画像が入った状態を確認できますが、最終的にEPUB化する際には画像ファイルはEPUB内に同梱することになります。

つまり、でんでんエディター上で画像が入った状態を確認するためにはDropboxアカウントがあったほうが便利、という程度です。

以下、画像ファイル「img01.jpg」がご自分のDropboxフォルダ内にある前提の作業です。Dropboxアカウントが無い場合、この手順は省略して構いません。

画像は一章の最後に追加します。図を参考にページ区切りの前に空白行を追加し、上部［画像の挿入］ボタンをクリックします。

画像の挿入

ダイアログでDropbox内の画像を選択すると、画像を入れるための「」というマークが追加されます。
この中の「代替テキスト」という部分は削除します。

画像追加のマーク

プレビュー画面で確認すると画像が追加されているのが確認できます。

プレビュー画面で画像を確認

画像が適切なサイズで表示されていることを確認します。

■CSSに関する作業
ここからは、見た目の部分を調整していきます。
まず、段落間の過剰な余白を無くします。

段落間の過剰な余白

段落はHTMLでは「p要素」となります。「p要素」は一般的なWebブラウザで前後に余白が含まれます。この空白を調整するためにCSSを使用します。

まず確認していただきたいのは、プレビュー画面で［テーマを選んでね］で「でんでんコンバーター横書きデフォルト」になっていることです。

テーマは、でんでんコンバーターでEPUB化したときに適用されるCSSのことで、本記事ではこれが「でんでんコンバーター横書きデフォルト」になっている前提なので、違うものになっている場合は「でんでんコンバーター横書きデフォルト」にしてください。

プレビュー画面でテーマを確認

次に、［Custom CSS］タブをクリックしてCSSエディターに切り替えます。
ここではp要素の余白を無くすために以下のCSSコードを追加してください。

p {
margin:0;
}

プレビュー画面に切り替えて確認すると、段落間の過剰な余白が無くなったのが確認できます。

プレビュー画面で確認

さらに、「一」「二」といったレベル2の見出し部も少し調整します。この部分は、左側に4文字分のインデントを入れてみます。レベル2の見出しはHTMLではh2要素です。

先ほどのコードの後ろに以下のCSSコードを追加してください。

h2{
text-indent:4em;
}

プレビュー画面に切り替えて確認すると、見出しにインデントがついたのが確認できます。

プレビュー画面で確認

さて、CSSについてはもう少し追加したい部分があります。その分は、少し区切りがよくありませんが、次回に回したいと思います。

エディット画面のコードは、前回紹介した手順でテキストファイルとして保存することができます。

CSSコードは特にシステム的にファイルにする方法は用意されていないので（2014年3月6日現在）、編集画面からコピー＆ペーストして自分でテキストファイルに保存しておきましょう。

一応、サンプルファイルには今回の完成形の両コードファイルが納めてあるので、必要に応じてご確認ください。

■最後に
思いがけず全3回になったでんでんエディターの紹介記事。次回はカスタムCSSの続きと、でんでんエディターで制作したコードを使ってでんでんコンバーターでEPUB化するところをご紹介します。

■著者プロフィール
林　拓也（はやし　たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi

■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook