以前、でんでんエディター・コンバーターで電子書籍原稿文章を右寄せ・中央寄せ・地寄せする方法という記事を書きました。
その記事では、１文の中で文字の位置を変更する方法が書かれていました。
しかし、ページ単位で文章を中央にする方法は書いていませんでした。
そこで今回は縦書きの電子書籍１ページで縦横中央にする方法を解説します。
用意するもの
今回必ず必要なものは以下となります。
- でんでんエディターの仕様で作られたテキストファイル(原稿)
- でんでんコンバーターにある専用素材CSSファイル
これは１文の右寄せ・中央寄せ・地寄せの時と同じです。
編集した専用素材CSSファイルをでんでんコンバーターに一緒にアップロードすることで、縦横中央にすることが可能になります。
原稿を編集する
まずは、原稿のテキストファイルから編集していきます。
原稿の縦横中央にしたい文章を
<div class="middle"></div>で囲みます。
例： <div class="middle">文章を縦横中央にする方法</div>
テキストファイルの別の箇所でmiddleの単語を使った場合は念のため別のものにしてください。(centerなど)
HTMLやCSSが分からない方は、middleという単語を下手にいじらない方が良いでしょう。
囲むことができたら、上書き保存してください。
CSSファイルを編集する
続いて、でんでんコンバーターのダウンロード用の素材置き場からスタイルシートのdefault.zipをクリックしてダウンロードしてください。
default.zipを解凍して、縦書き用のdefault_vertical.cssを開くと、CSSの内容が180〜200行程度書かれていますが、全て無視して一番下までスクロールします。
そして、以下のコードを追記してください。
.middle{
writing-mode: vertical-rl;
}
.middle{
position:absolute;
top:50%;
left:50%;
display:inline;
transform:translate(-50%, -50%);
}
コードは必ず一番下に追記する。
また、上述したmiddleを別の単語に変えている場合、こちらのmiddleも変えたものと同じ単語にしてください。
追記できたら、上書き保存して完了となります。
でんでんコンバーターにアップロードして完了
最後に、原稿ファイルとその他使用する画像、表紙、そして上書き保存したCSSファイルを一緒にアップロードしてください。
CSSファイルも一緒にアップロードしていないと反映しないので気をつけてください。
完了後、必ずEPUBファイルで文章が縦横中央にできているか確認してください。
