神楽坂さんのツールとEpub(2) 少し調整してみる

.iconL {
    float: left;
    padding-top: 0%;/* とりあえず0だけど残しく */
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    text-align: center;
    display: inline;
    width: 20%;
}
.iconR {
    float: right;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    text-align: center;
    display: inline;
    width: 20%;
    /* アイコン領域 20+0+0=20% */
}
.iconClear {
    clear: both;
}
/* 以下、吹き出しテキストの位置指定に利用 */
.fukiL {/* 左側吹き出し（右アイコンiconRと対で利用） */
    float: left;
    padding-top: 2%; /* これを削ると、文字と吹き出し枠間の余裕がなくなる*/
    padding-left: 2%; /* なので、少しはあった方が良い */
    padding-right: 2%;
    padding-bottom: 2%;
    text-align: left; /*文字は左寄せ*/
    display: inline;
    width: 75%;/*アイコンが10%幅なら85%に */
    border-radius: 1em; /* 角丸呪文 */
    -webkit-border-radius: 1em; /* 角丸呪文 */
    -moz-border-radius: 1em; /* 角丸呪文 */
    background: rgb(235, 235, 235);/* gray */
    /* 75+2+2=79%, ∴20%(アイコン)+79%(文字)=99%
        これでfloat崩れを起こさないはず 多分 */
    /* アイコンを大きくする場合は
       iconR(iconL)のwidthの数値を増加させますが、増加させただけ、
       fukiR(fukiL)のwidthを減少させて下さい */
}
.fukiR {/* 右側吹き出し（左アイコンiconLと対で利用） */
    float: right;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    text-align: left;
    display: inline;
    width: 75%;
    border-radius: 1em; /* 角丸呪文 */
    -webkit-border-radius: 1em; /* 角丸呪文 */
    -moz-border-radius: 1em; /* 角丸呪文 */
    background: rgb(235, 235, 235);/* gray */
}
/* 以下、吹き出しテキスト背景色の指定に利用
    ＜div class="fukiR fC1"＞等
    色の指定を忘れると、fukiRやfukiLで指定した灰色に。
    fCは fukidashi Color の意。
    RGB基本8色の無彩色（白・黒）を抜いて6色。その明暗で12色。
*/
.fC1{background:  rgb(255, 235, 235)}/*red*/
.fC2{background:  rgb(235, 255, 235)}/*green*/
.fC3{background:  rgb(255, 255, 235)}/*yellow*/
.fC4{background:  rgb(235, 235, 255)}/*blue*/
.fC5{background:  rgb(255, 235, 255)}/*magenta*/
.fC6{background:  rgb(235, 255, 255)}/*cyan*/
.fC7{background:  rgb(245, 225, 225)}/*dark red*/
.fC8{background:  rgb(225, 245, 225)}/*dark green*/
.fC9{background:  rgb(245, 245, 225)}/*dark yellow*/
.fC10{background: rgb(225, 225, 245)}/*dark blue*/
.fC11{background: rgb(245, 225, 245)}/*dark magenta*/
.fC12{background: rgb(225, 245, 245)}/*dark cyan*/

【元（アイコン左、セリフ右のパターン）】
＜img src="../Images/てきとう.png" class="iconL" width="30%"/＞
＜div＞
「芽衣!!芽衣!!（※セリフです）」
＜/div＞
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【１・２行目を修正 ちなみにfC1は明るい赤（ピンク）背景】
＜img src="../Images/てきとう.png" class="iconL" /＞
＜div class="fukiR fC1"＞
「芽衣!!芽衣!!（※セリフです）」
＜/div＞


【元（アイコン右、セリフ左のパターン）】
＜img src="../Images/てきとう.png" class="iconR" width="30%"/＞
＜div＞
「柚子!!柚子!!（※セリフです）」
＜/div＞
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【１・２行目を修正 ちなみにfC2は明るい緑背景】
＜img src="../Images/てきとう.png" class="iconR" /＞
＜div class="fukiL fC2"＞
「柚子!!柚子!!（※セリフです）」
＜/div＞

　※なお、実際には＜/div＞の前とかセリフの前には、スペースがいっぱい入ってると思いますが、上の例では略してます。セリフ直前の＜div＞を修正して下さい。