前回、電子書籍(epub)の文章を縦書きで縦横中央にする方法をお伝えしましたが、今回は画像を縦書きで縦横中央にする方法をお伝えします。
以下の画像のような形で、画像を縦横中央に配置できます。
＊でんでんコンバーターを利用しての画像配置方法であることをあらかじめご了承ください。
用意するもの
今回用意するものも、前回とほぼ同じです。
- でんでんエディターの仕様で作られたテキストファイル(原稿)
- でんでんコンバーターにある専用素材CSSファイル
- 縦横中央に配置したい画像
これらがあれば、画像を縦横中央に配置できます。
原稿を編集する
執筆した原稿の中の画像タグを編集していきます。
通常のでんでんコンバーターの画像配置であれば、
を利用していると思いますが、縦横中央配置の場合はこちらは使いません。
以下のタグに入れ替えてください。
<div class="image"><img src="profile.png" /></div>
そして、profile.pngのところをご自身が設定している画像名に変更してください。
変更したら、原稿ファイルを上書き保存してください。
CSSファイルを編集する
続いて、でんでんコンバーターのダウンロード用の素材置き場からスタイルシートのdefault.zipをクリックしてダウンロードしてください。
default.zipを解凍して、縦書き用のdefault_vertical.cssを開くと、CSSの内容が180〜200行程度書かれていますが、全て無視して一番下までスクロールします。
そして、以下のコードを追記してください。
.image {
-epub-writing-mode: horizontal-tb;
text-align: center;
margin: auto;
width:100%;
}
コードは必ずdefault_vertical.cssファイルの一番下に追記してください。
でんでんコンバーターにアップロードして完了
最後に、原稿ファイルとその他使用する画像、表紙、そして上書き保存したCSSファイルを一緒にアップロードしてください。
CSSファイルも一緒にアップロードしていないと反映しないので気をつけてください。
完了後、必ずEPUBファイルで文章が縦横中央にできているか確認してください。
