でんでんコンバーターでの変換時に、圏点を付ける

長年ブログをやっていると、圏点とかルビとかを使わないで文章を書くようになってくるんですが、電子書籍だと使いたい場合が出てきますね。

さて、EPUB3変換への心強い味方「でんでんコンバーター」で使用できる、でんでんマークダウンには、ルビや太字での強調はありますが、圏点や傍点は存在しません。

だからといって、不可能というわけでもありません。

CSSさえちょちょいといじれば、ぱぱぱっと表示させることができます。

でんでんコンバーターでは、SPANタグなどのインライン要素は変換せずにそのまま通してくれますので、そこで指定すれば問題ありません。つまり、ちょちょいと書き足せばOKです。

本来的には、CSSファイルできちんと定義するのが作法です。さらに言えば効率的でもあります。でも、たとえば本の中の一カ所だけ圏点を打ちたいだけなら、若干面倒に感じるかもしれません。そもそも「え〜、CSSファイル〜、なにそれおいしいの〜?」みたいな状況もあるでしょう。

心配ありません。直に書けば、(ひとまず)CSSファイルのことは考えなくても済みます。

大まかな手順は以下の通り。

  1. 文章内で圏点を打ちたい部分を見つける
  2. その部分をSPANタグで囲む
  3. そのタグにスタイルを指定する

以上です。簡単ですね。

スタイルの中身

スタイルで使うのはtext-emphasis-styleプロパティ。

text-emphasis-styleプロパティ(HTML5&CSS3リファレンス)

で、どんなスタイルを指定すればいいかというと、「FUSEeで縦書き文書を作ろう!」を参考にしてみましょう。

span.sesami {
text-emphasis-style : sesame;
text-emphasis-color : #333333;
-epub-text-emphasis-style : sesame;
-epub-text-emphasis-color : #333333;
-webkit-text-emphasis-style : sesame;
-webkit-text-emphasis-color : #333333;
}

これをそのまま頂戴します。

つまり、

<span style=”text-emphasis-style : sesame;text-emphasis-color : #333333;-epub-text-emphasis-style : sesame;-epub-text-emphasis-color : #333333;-webkit-text-emphasis-style : sesame;-webkit-text-emphasis-color : #333333;”>ここに圏点がふられます</span>

のように書けばOKということ。

あるいは、「草枕を作ろう =縦書きHTML簡単作成ガイド= *」(epubcafé)さんの

strong.sesame_dot {
font-weight: normal;
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epubt-text-emphasis-style: sesame;
}

を使ってもよいでしょう。こちらはカラー指定がありませんね。このスタイルであれば、

<span style=”font-weight: normal;text-emphasis-style: sesame;-webkit-text-emphasis-style: sesame;-epubt-text-emphasis-style: sesame;”>ここに圏点がふられます</span>

となります。

もし、ゴマみたいな点ではなく、丸い点が打ちたければ、styleの中のsesameをdotに変えればOKです。つまり、

<span style=”font-weight: normal;text-emphasis-style: dot;-webkit-text-emphasis-style: dot;-epubt-text-emphasis-style: dot;”>傍点</span>

ですね。

何も問題なければ、以下のように表示されるはずです。

screenshot
※iBooksでの例

screenshot
※Kindleプレビューでの例

もう一度書いておきますが、これは緊急避難的処置であり、本来は、きちんとCSSファイルで圏点用のスタイルを指定しておき、文章中は

<span class=”sesami”>私は丸い点が欲しい</span>

などと書くのがまっとうです。

が、一カ所二カ所だけだったり、「CSSファイルって何?」な状況(※)なら、こちらの方が早いでしょう。
※後で勉強した方がよいかとは思いますが。

▼その他参考リンク:
圏点(ウィキペディア)

コメントを残す