KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

AozoraEpub3の電書協css対応作業7 ゴシック体、明朝体、太字、斜体、区切り線

 最近こればっかしている気がするが、今月中には終わらせたいからなんだが、終わるのかこれ。電書協cssとAozoraEpub3のcssを比較して差をなくすようにしていっている。ただ、どうしても電書協cssだけでは表現できない部分を別途cssを追加する必要がある。

  • 電書協のCSSの差をなくす
  • CSSの差を別のファイルとして書き出す
  • 縦書き横書きを同じCSSを使う
  • htmlのcssの読み込みをbook-style.cssとfixed-layout-jp.cssだけにする

という工程が必要だと思われる。

 

 もう一つはファイル名の変更だ。電書協cssを使っていることを明確に示すために、CSSのファイル名も電書協の名前に変えようと思う。電書協ではbook-style.cssから@importを使って他のcssを読み込んでる。この部分に余ったcssを別ファイルとして読み込めばいいかなと思っている。

 @charset "UTF-8";
@import "style-reset.css";
@import "style-standard.css";
@import "style-advance.css";

 

フォント指定の追加

 

###ゴシック体

###ゴシック体

ゴシック体 <span class="gfont">

ゴシック体終わり </span>

ここからゴシック体 <div class="gfont"> 1

ここでゴシック体終わり </div> 1

ここまでゴシック体 </div> 1
###明朝体明朝体 <span class="mfont">

明朝体終わり </span>

ここから明朝体 <div class="mfont"> 1

ここで明朝体終わり </div> 1

ここまで明朝体 </div> 1

 

####太字

####太字

太字 <span class="bold">

太字終わり </span>

ここから太字 <div class="bold"> 1

ここで太字終わり </div> 1

ここまで太字 </div> 1
####斜体

斜体 <span class="italic">

斜体終わり </span>

ここから斜体 <div class="italic"> 1

ここで斜体終わり </div> 1

 

区切り線

注記は同じだった。

区切り線 <hr/> 1