Movable TypeのTinyMCEでルビ／傍点／縦中横を入力するプラグイン(その4)

Movable TypeのTinyMCEでルビ／傍点／縦中横を入力するプラグインの最終回として、傍点／縦中横と横書きブロックのスタイル指定方法について解説します。

1.傍点／縦中横／横書きブロックの仕組み

傍点と縦中横は、対象の文字をspan要素で囲み、そのspan要素にWebKitの-webkit-text-emphasis／-webkit-text-combineのプロパティを指定して実現しています。
また、横書きブロックは、横書き化する部分をdiv要素で囲み、そのdiv要素にWebKitの-webkit-writing-modeプロパティを指定して実現しています。

デフォルトでは、個々のspan要素やdiv要素にstyle属性を追加して、プロパティを指定しています。
ただ、style属性ではなく、class属性を付けるように変えることもできます。
この仕組みを使うと、CSSで傍点／縦中横／横書きブロックのスタイルを変えることができます。

なお、ルビはHTMLのruby／rb／rt要素で実現しています。
CSSでこれらの要素のスタイルを定義すれば、ルビの見た目を変えることができます。

2.class属性を使うようにする

class属性で書式を指定するようにするには、以下の手順を取ります。

ブログ／ウェブサイトの管理画面で「ツール」→「プラグイン」メニューを選びます。
プラグイン一覧のページが開きますので、TinyMCEJapaneseSupportプラグインの「設定」を開きます。
「書式付けの方法」の「class属性で書式付け」をオンにします。
「変更を保存」ボタンをクリックします。

3.CSSに記述を追加する

次に、対象のブログ／ウェブサイトのCSSに、以下の記述を追加します。

.mce-fj-emp-filled-dot {
    -webkit-text-emphasis-style: filled dot;
}
.mce-fj-emp-filled-circle {
    -webkit-text-emphasis-style: filled circle;
}
.mce-fj-emp-filled-double-circle {
    -webkit-text-emphasis-style: filled double-circle;
}
.mce-fj-emp-filled-triangle {
    -webkit-text-emphasis-style: filled triangle;
}
.mce-fj-emp-filled-sesame {
    -webkit-text-emphasis-style: filled sesame;
}
.mce-fj-emp-open-dot {
    -webkit-text-emphasis-style: open dot;
}
.mce-fj-emp-open-circle {
    -webkit-text-emphasis-style: open circle;
}
.mce-fj-emp-open-double-circle {
    -webkit-text-emphasis-style: open double-circle;
}
.mce-fj-emp-open-triangle {
    -webkit-text-emphasis-style: open triangle;
}
.mce-fj-emp-open-sesame {
    -webkit-text-emphasis-style: open sesame;
}
.mce-fj-tcy {
    -webkit-text-combine: horizontal;
}
.mce-fj-hblock {
    -webkit-writing-mode: horizontal-tb;
    page-break-inside: avoid;
}

「mce-fj-emp-*」のクラスは、傍点を表示するクラスです。
傍点は形が5種類あり、また中を塗りつぶす／塗りつぶさないの2つの表示方法があるため、全部で10種類のクラスを指定しています。
「mce-fj-tcy」は縦中横を表示するクラスです。
また、最後の「mce-fj-hblock」は横書きブロックのクラスです。

上記の各クラスをカスタマイズして、表示を変えることができます。
たとえば、mce-fj-emp-*クラスに以下の記述を追加すると、傍点の色を赤くすることができます。

-webkit-text-emphasis-color: red;

4.TinyMCE上での見た目を変える

TinyMCE上での見た目を変えるには、Movable Type 5.2の「コンテンツCSSファイル」の機能を使います。
コンテンツCSSファイルに、前述のmce-fj-emp-*などの各クラスを追加すれば、TinyMCE上でもそのクラスの書式が反映されます。

4-1.縦中横／横書きブロックを判断できるようにする

通常の横書き表示だと、縦中横／横書きブロックを設定しても、画面上では表示が変わらりません。
そのため、これらの設定を行った箇所が分かりにくいです。

そこで、コンテンツCSSファイルを設定して、縦中横／横書きブロックに対応するクラスに背景色を付けるなどして、画面上で区別できるようにすると良いでしょう。
たとえば、縦中横の背景を灰色にするなら、mce-fj-tcyクラスに以下の記述を追加します。

background-color: #cccccc;

4-2.縦書き／横書きでスタイルを変える

当プラグインでは、記事の内容を縦書きで表示することができます。
縦書きにした際には、リッチテキストエディタ内のbody要素に、「fj_portrait」というクラスを付加しています。

縦書き表示／横書き表示のそれぞれで傍点等の見た目を変えたい場合は、コンテンツCSSに「.fj_portrait .mce-fj-emp-filled-dot」などのクラスを定義して、そのプロパティを設定します。

お知らせ