ジョシュアです。
Macで「三点リーダー」を入力すると「…」と表示されることに違和感を感じたことありませんか？
本当は真ん中に表示したくないですか？
こんな感じに→「…」
僕はいつもそう思っていたので、スッキリするために調べてみました。
というわけで、今回は「Macで三点リーダーを真ん中に表示させる方法3パターン」を紹介します。
目次
Macで三点リーダーを入力する方法
まず、Macでの三点リーダを入力ですが、2つの方法があります。
- 「・」を変換
- option + 「 ; 」
しかし、これだと下のラインで表示されてしまうんですよね。
「…」←こんな風に。
原因を調べると、Macのフォントには「ヒラギノ」が採用されていて、「ヒラギノ」の三点リーダーが「…」だということがわかりました。
ということは、CSSの「font-family」を変えれば解決かな？
方法① CSSの「font-family」を変更
当ブログ（WordPressテーマはSTORK）の「font-family」は下記のように設定されていました。
「font-family」の値には多くのフォントを並べていることが多いと思いますが、その一番最初に記述しているフォントが採用されます。
なので、当ブログの場合、日本語の「Hiragino Kaku Gothic ProN」ではなく、英字の「Arial」だということ。
少し調べると、日本語でよく使われる「メイリオ」が真ん中の三点リーダーだということがわかりました。
「font-family」を「メイリオ」に換えてみた
当たり前なんですけど、全てのに文章に「メイリオ」が設定されてしまって見た目が激変。
僕は「STORK」のサイトデザインが好きなので、この案は却下です。
HTMLに直書きしてみた
▼記事中のHTMLの「font-family」をメイリオに変えてみると
▼見事真ん中に表示されました！
でも、三点リーダーを使うたびにこんな記述をするのは、めんどくさ過ぎて現実的ではないです。
方法② JavaScriptを使う
JavaScriptで無理矢理フォントを入れ替えることを試してみました。
▼自動で全てこうなることが目的。
「…」→「…」
body {
font-family: Arial,Helvetica,”游ゴシック”,YuGothic,”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;
}
</style>
<script>
$(function() {
$(‘body’).each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/[^>]…/,'<span style=”font-family:メイリオ”>…</span>’));
});
});
</script>
「…」
</body>
最初に出てくる三点リーダーの「font-family」は「メイリオ」に変えることができましたが、それ以降がうまく動いてくれなかったのと、一度「…」が表示された後に「⋯」に変化するのが気持ち悪かったから却下しました。
超簡単な方法があった
超簡単な方法を発見しました！
▼なんとこれをコピぺするだけ
デフォルトで変換される三点リーダーは「U+2026」という文字コードらしく、「U+22FF」というのを指定したものが上記みたいです。
これでCSSで「font-family」を書き換えたり、JavaScriptで無理やりフォントを入れ替えたりしなくても、三点リーダーを真ん中に表示させることができます。
僕はいちいち三点リーダーをコピペするのが面倒なので、ユーザ辞書に「⋯」を登録しておきました。
「てん」と入力すると「⋯」に変換することができます。
さいごに
いかかがだったでしょうか？
今回は「Macで三点リーダーを真ん中に表示させる方法3パターン」を紹介しました。
ぜひ参考にしてみてくださいね。
コメントを残す