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

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

広告

今までに出版した電子書籍

Amazon.co.jp: 急急如律令: Kindleストア

プライバシーポリシー

 

AozoraEpub3の電書協css対応作業3 見出し、フォントサイズ、小書き

 見出し部分でchap1を使っているところやfont3などでフォントサイズを書き換えた。

AozoraEpub3では見出しがh1ではなくdivになっていたので、htmlっぽくないな感じたので変えてみた。ただ、後で問題がないかよく確認する必要がある。

 

 

青空文庫の特徴として見出しの種類が多い、電書協に対応例がないので考える必要がある。

www.aozora.gr.jp

############# 見出し #############
ここから大見出し <div class="chap1"> 1
ここで大見出し終わり </div> 1
ここから中見出し <div class="chap2"> 1
ここで中見出し終わり </div> 1
ここから小見出し <div class="chap3"> 1
ここで小見出し終わり </div> 1
###見出し注記は自動で閉じる(見出し終わり注記ではタグは定義しない)
見出し <div class="chap1"> </div> 1
見出し終わり 1
大見出し <div class="chap1"> </div> 1
大見出し終わり 1
中見出し <div class="chap2"> </div> 1
中見出し終わり 1
小見出し <div class="chap3"> </div> 1
小見出し終わり 1
同行大見出し <span class="font5">
同行大見出し終わり </span>
同行中見出し <span class="font3">
同行中見出し終わり </span>
同行小見出し <span class="font1">
同行小見出し終わり </span>
窓大見出し <span class="mado L">
窓大見出し終わり </span>
窓中見出し <span class="mado M">
窓中見出し終わり </span>
小見出し <span class="mado S">
小見出し終わり </span>

 /* 窓見出し 行頭2行のみ対応 */
span.mado {
float: left;
display: inline-block;
line-height: 1em;
}
/* 窓見出し 左右paddingは (lineheight-文字サイズ/2)/文字サイズ */
span.mado.L { font-size:1.5em; padding:0 0.625em 0.33em 0; line-height:1em;}
span.mado.M { font-size:1.3em; padding:0 0.846em 0.38em 0; line-height:1em;}
span.mado.S { font-size:1.1em; padding:0 1.091em 0.45em 0; line-height:1em;}

 

下のように書き換えた

 フォントサイズを電書協にあったfont-1emという書き方に合わせている。oo-midashiの指定もあったが、cssをそのまま置き換えるには不便だと感じたので使っていない。

 

############# 見出し #############
ここから大見出し <h1 class="font-1em50"> 1
ここで大見出し終わり </h1> 1
ここから中見出し <h2 class="font-1em30"> 1
ここで中見出し終わり </h2> 1
ここから小見出し <h3 class="font-1em10"> 1
ここで小見出し終わり </h3> 1
###見出し注記は自動で閉じる(見出し終わり注記ではタグは定義しない)
見出し <h1 class="font-1em50"> </h1> 1
見出し終わり 1
大見出し <h1 class="font-1em50"> </h1> 1
大見出し終わり 1
中見出し <h2 class="font-1em30"> </h2> 1
中見出し終わり 1
小見出し <h3 class="font-1em10"> </h3> 1
小見出し終わり 1
同行大見出し <span class="font-1em50"">
同行大見出し終わり </span>
同行中見出し <span class="font-1em30">
同行中見出し終わり </span>
同行小見出し <span class="font-1em10">
同行小見出し終わり </span>
窓大見出し <span class="mado L">
窓大見出し終わり </span>
窓中見出し <span class="mado M">
窓中見出し終わり </span>
小見出し <span class="mado S">
小見出し終わり </span>

 

フォントサイズ

AozoraEpub3では段階大きな文字は110から160まで段階的に大きくする。

逆に段階小さな文字90、83、77、70、66、62と小さくする。そのために、したのCSSが追加する必要がある。電書協ではこういう中途半端なものがなかった。

 

/* AozoraEpub3用フォントサイズ(%指定) */
.font-0em83 { font-size: 0.83em; }
.font-0em77 { font-size: 0.77em; }
.font-0em66 { font-size: 0.66em; }
.font-0em62 { font-size: 0.62em; }

 

AozoraEpub3での指定方法を電書協に入れ替えた。

####文字サイズ
1段階大きな文字 <span class="font1">
2段階大きな文字 <span class="font2">
3段階大きな文字 <span class="font3">
4段階大きな文字 <span class="font4">
5段階大きな文字 <span class="font5">
6段階大きな文字 <span class="font6">
大きな文字終わり </span>
ここから1段階大きな文字 <div class="font1"> 1
ここから2段階大きな文字 <div class="font2"> 1
ここから3段階大きな文字 <div class="font3"> 1
ここから4段階大きな文字 <div class="font4"> 1
ここから5段階大きな文字 <div class="font5"> 1
ここから6段階大きな文字 <div class="font6"> 1
ここで大きな文字終わり </div> 1
1段階小さな文字 <span class="font-1">
2段階小さな文字 <span class="font-2">
3段階小さな文字 <span class="font-3">
4段階小さな文字 <span class="font-4">
5段階小さな文字 <span class="font-5">
6段階小さな文字 <span class="font-6">
小さな文字終わり </span>
ここから1段階小さな文字 <div class="font-1"> 1
ここから2段階小さな文字 <div class="font-2"> 1
ここから3段階小さな文字 <div class="font-3"> 1
ここから4段階小さな文字 <div class="font-4"> 1
ここから5段階小さな文字 <div class="font-5"> 1
ここから6段階小さな文字 <div class="font-6"> 1
ここで小さな文字終わり </div> 1

 

##間にpタグが入るのでブロック注記同様divにする

##間にpタグが入るのでブロック注記同様divにする

表題前 <div class="font5"> 1

表題後 </div> 1

原題前 <div class="font4"> 1

原題後 </div> 1

副題前 <div class="pt2 font2"> 1

副題後 </div> 1

副原題前 <div class="pt2 font2"> 1

副原題後 </div> 1

著者前 <div class="btm pb2 font1"> 1

著者後 </div> 1

副著者前 <div class="btm pb2 font1"> 1

副著者後 </div> 1

 

変更後

 

####文字サイズ

1段階大きな文字 <span class="font-1em10">

2段階大きな文字 <span class="font-1em20">

3段階大きな文字 <span class="font-1em30">

4段階大きな文字 <span class="font-1em40">

5段階大きな文字 <span class="font-1em50">

6段階大きな文字 <span class="font-1em60">

大きな文字終わり </span>

ここから1段階大きな文字 <div class="font-1em10"> 1

ここから2段階大きな文字 <div class="font-1em20"> 1

ここから3段階大きな文字 <div class="font-1em30"> 1

ここから4段階大きな文字 <div class="font-1em40"> 1

ここから5段階大きな文字 <div class="font-1em50"> 1

ここから6段階大きな文字 <div class="font-1em60"> 1

ここで大きな文字終わり </div> 1

1段階小さな文字 <span class="font-0em90">

2段階小さな文字 <span class="font-0em83">

3段階小さな文字 <span class="font-0em77">

4段階小さな文字 <span class="font-0em70">

5段階小さな文字 <span class="font-0em66">

6段階小さな文字 <span class="font-0em62">

小さな文字終わり </span>

ここから1段階小さな文字 <div class="font-0em90"> 1

ここから2段階小さな文字 <div class="font-0em83"> 1

ここから3段階小さな文字 <div class="font-0em77"> 1

ここから4段階小さな文字 <div class="font-0em70"> 1

ここから5段階小さな文字 <div class="font-0em66"> 1

ここから6段階小さな文字 <div class="font-0em62"> 1

ここで小さな文字終わり </div> 1

 

##間にpタグが入るのでブロック注記同様divにする

##間にpタグが入るのでブロック注記同様divにする

表題前 <div class="font-1em50"> 1

表題後 </div> 1

原題前 <div class="font-1em40"> 1

原題後 </div> 1

副題前 <div class="pt2 font-1em20"> 1

副題後 </div> 1

副原題前 <div class="pt2 font-1em20"> 1

副原題後 </div> 1

著者前 <div class="btm pb2 font-1em10"> 1

著者後 </div> 1

副著者前 <div class="btm pb2 font-1em10"> 1

副著者後 </div> 1

 

小書きの書き換え

####小書き

行右小書き <span class="super">

行右小書き終わり </span>

行左小書き <span class="sub">

行左小書き終わり </span>

上付き小文字 <span class="super">

上付き小文字終わり </span>

下付き小文字 <span class="sub">

下付き小文字終わり </span>

小書き <span class="kogaki">

小書き終わり </span>

 

/* 小書き文字
----------------------------------------------------------------
通常の文字を「ぁゃっ」のような小書き文字に見せるための指定
---------------------------------------------------------------- */
.kogaki {
font-size: 0.75em;
}

/* 【縦組み】右上 */
.vrtl .kogaki {
padding: 0.1em 0 0.15em 0;
vertical-align: super;
}