WEBで三点リーダーが下に偏ってしまうのを解消する
※ こちらはWEB上での表示について書いています。印刷する小説本などの原稿作成についてではありませんのでご注意下さい。
このサイトを作成したときの備忘録
上記の問題をHTML、CSSで解決する方法のまとめ。
ここでは2番目の三点リーダーについてまとめています。
三点リーダーが下に偏ってしまうのを解消する
三点リーダーが上の図のように偏って表示されてしまうことがあります。一方でちゃんと真ん中に表示されている場合も。
三点リーダーが下の方に偏って表示されてしまう原因はCSSの「font-family」の設定にあります。
例えば、このサイトで使っているテーマGraphyでは次のように設定されています。
※ 現在は別のテーマを使用しています。
（親テーマのstyle.cssではなく、css/ja.cssで日本語フォントなどが設定されています）。
body {
font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
}
この場合、一番最初に記述されている「Georgia」という欧文フォントによって三点リーダーが下に偏って表示されています。
この一番最初に記述されているフォントが日本語フォントであれば三点リーダーは真ん中に表示されるのですが、欧文フォントの場合は下に偏ってしまうのです。
解決方法は次の二通り。
font-familyの先頭を日本語フォントにする
body {
font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
}
まず簡単な方法としては先頭の「Georgia」を削除して、一番最初にくるフォントを游明朝などの日本語フォントにします（実際は親テーマを修正せずに上記のような記述を子テーマに追加します）。
こうすれば、英語（アルファベット）や数字の表示は変わってしまいますが、三点リーダーは真ん中にきます。
ただ、英数字の部分は欧文フォントを使いたいという場合は、ちょっと面倒くさいのですが次のようにします。
三点リーダー部分にのみ日本語フォントを設定する
HTMLでは、
三点リーダー<span class="leader">……</span>。
のように記述し、スタイルを以下のように設定します。
.leader {
font-family: Meiryo;
}
メイリオ以外の日本語フォントでも大丈夫だと思います。
これで、三点リーダーが真ん中に表示されていると思います。
三点リーダー……。
三点リーダーを使用する箇所に逐一設定していくのは面倒ですが、自分の場合はAddQuicktagというプラグインを元々を導入していたので、設定を追加して少し作業を簡略化しています。
上級者であれば、以下の参考サイトで紹介されているようなjQueryで一括変換するという方法もあるようですが、そちらは試していない（わからない）ので各自サイトを参照してください。