「ます」が「〼」に化ける

通常は、このサイトのように、HTMLで組んだものをPHPに落とし込んで、WordPressのテーマを作成しています。
しかし、今回、サンプルページを作成するにあたり、ひな形として多用されている「bones」を使ってみました。

案外、細かくデザインされていて、思い通りのテーマにカスタマイズするには、PHPの修正や加筆、CSSの細かな修正が必要になります。
もちろん、レイアウト上の各部サイズや色などを変更するだけであれば、手間はかかりませんし、フッターなどの著作権表示の部分も柔軟に変更できます。
ただし、レスポンシブな設計になっているので、各部サイズや色を変更する場合、各種デバイス用の部分も細かく編集する必要があります。
慣れてしまえば、これも簡単な作業ですが、不慣れなうちは、編集する箇所を探して潰していくのが結構手間です。
とくに、CSSは細かく記述されているので、SASSが使えるとはいえ、いきなり全てを把握するのは難しいです。

さて、ブロックの追加や配置、サイズや色など、PHPとCSSを編集して、それらしいデザインになったところで、気になる部分が一つ残りました。
ブログやページのコンテンツ内で、「しています。」というような表記が
「してい〼。」に、「ハンドル」が「ハン㌦」に、勝手に変換されてしまいます。

ブログやページのエディタでは、「しています。」と記述して、表示されているものが、実際の表示では「してい〼」になってしまうのです。
この現象に関しては、WEB上にも解決方法などが散見されますが、あまり情報量は多くないようです。

この症状をもたらしているのは、font-feature-settings（OpenTypeフォントの字形の切替え）の指定にあります。
「bones」を編集する際に利用した「style.css」に指定されているものです。

その個所は次の部分です。

/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
word-break: break-word;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-before: 2;
-webkit-hyphenate-after: 3;
hyphenate-lines: 3;
-webkit-font-feature-settings: “liga”, “dlig”;
-moz-font-feature-settings: “liga=1, dlig=1”;
-ms-font-feature-settings: “liga”, “dlig”;
-o-font-feature-settings: “liga”, “dlig”;
font-feature-settings: “liga”, “dlig”; }

これは、文字列の区切り方や並び方を指定している部分です。
問題の部分は、下の5行。

-webkit-font-feature-settings: “liga”, “dlig”;
-moz-font-feature-settings: “liga=1, dlig=1”;
-ms-font-feature-settings: “liga”, “dlig”;
-o-font-feature-settings: “liga”, “dlig”;
font-feature-settings: “liga”, “dlig”;

この部分です。

「font-feature-settings」全般と、各種デバイスで文字列の整列方法を指定しているのですが、「liga」と「dlig」は英文字の「ｆｆ」や「ｃｐ」などを「ff」や「cp」、と一文字にして表示する指定です。
これが、日本語に適用された場合、「ます」が「〼」一文字に、「ドル」が「㌦」一文字で表示されてしまうようです。

単純に、この5行をコメントアウトすれば、この現象は解消されます。

/*-webkit-font-feature-settings: “liga”, “dlig”;
*-moz-font-feature-settings: “liga=1, dlig=1”;
*-ms-font-feature-settings: “liga”, “dlig”;
*-o-font-feature-settings: “liga”, “dlig”;
*font-feature-settings: “liga”, “dlig”;
*/

単純にコメントアウトしていいのかな？と思うかもしれませんが、この指定に関しては、日本語サイトでは意味がないので、サクッとコメントアウトして大丈夫です。

さて、「font-feature-settings」ですが、日本語で役に立たないかというと、そんなこともありません。

「font-feature-settings」に関しても、WEB上にはあまり情報が多くないのですが、次のサイトが参考になると思います。

英文字以外にもJISフォントの指定などもできるので、上手く使えば、文字列をすっきりと表示させることが出来そうです。
ただし、現状ではこの指定を積極的に使う必要はないとおもいます。