ついでに、「三点リーダー（……）」「二倍ダーシ（――）」（※以下、まとめて「約物（やくもの）」と言う）を意図通りに表示する別案も置いていきます。（>>3と同じ者です）
※フォントの指定方法そのものは>>1さんのご説明・ご紹介のサイトがわかりやすいです。
※フォントの指定を「どこにコピペしたらいいか？」については>>3でも一応触れています。
個人的にも気になる話題だったので数ヶ月検証していたんですが、結論としては、
『Webフォントを適用させる』
……のが結局一番手っ取り早いかな、と思いました。
>▼約物「……」「――」だけにWebフォント（“Noto Sans JP”／Google Fonts）を指定してみたデモ
（※検証用に適当に作ってるデモなので、予告なく改修するかもです……）
今回試してみて初めて知ったんですが、Google Fontsの“Noto Sans JP”・“Noto Serif JP”は、字間（letter-spacing）をあける設定にしていても、二倍ダーシに隙間が入らない！！
二倍ダーシのところだけ字間をゼロにする……みたいな指定をしなくて済む！！
控えめに言って最高だなと思いました（字書きの所感）。
上記デモの後半にはあえて長文を置いてありますので、文字の違和感の有無などをお確かめください。
▼▼ やり方 ▼▼
>①【HEAD編集】の〔□HEAD間編集〕欄、最上部に以下を入れる
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&text=%E2%80%95%E2%80%A6" rel="stylesheet">
>②上記（①）の内容より下に、以下を入れる
<style>
/*※約物用Webフォント*/
.yakumono{
font-family: 'Noto Sans JP'/*※*/, sans-serif;
}
</style>
>③約物だけWebフォントにしたい箇所を、class名を付けたタグで囲んで指定する
*例）小説の本文（ #text# ）だけに適用したいときは、【文章画面編集】にて、
* ↓のように独自タグをHTMLタグ（『<div class="yakumono">』と『</div>』）で挟む
<div class="yakumono">#text#</div>
━━━━━━━━━━
▼以下補足
> ①の「&text=%E2%80%95%E2%80%A6」部分
「&text=○×△」と書くと、
『そのWebフォントから「○×△」という文字だけ抜き出して使う』ことができます。
ただしこの「○×△」部分、日本語をそのまま使うとエラーになります（※半角英数字ならエラーにならない）。
よって、抜き出したい「…」「―」をそのまま書くわけにはいきません。
日本語文字を抜き出して使いたいときは、『URLエンコード』というのを行います。
この『URLに使えない文字を、URLに使える文字のみで表現する変換』を行えば、
「『…』と『―』を抜き出してね」、と指定できます。
「―…」＝「%E2%80%95%E2%80%A6」です。
以上の記述により、『“Noto Sans JP”の中から「…」と「―」を抜き出せた』状態になりました。
> ②'Noto Sans JP'
↑これが、『真ん中にくる三点リーダー、および、一本線になる二倍ダーシ』のフォントです。
必ず、このフォント（以下「約物フォント」と呼ぶ）を font-family の一番初めに書いてください。
何故かというと、複数のフォントを指定した場合「はじめに書いたものほど優先順位が高くなる」ためです。
なので約物フォントよりも先（上位）に英文フォントなどを指定したら、また三点リーダーが英字仕様になって下付きになってしまう……ということが起こります。
逆に言うと、約物フォントを最初（最上位）に置いてさえいれば、それに続くフォントは自由に変更ができます。
○○{font-family:'Noto Sans JP',英文フォント,和文フォント;}
……というふうにもできる、ということです。
問題点としては、“Noto Sans JP”というフォントが「約物フォント」専用にならざるを得ないところです。
なにせこのフォントからは「…―」の２文字しか抜き出していないので、例えば見出しの文字全てを“Noto Sans JP”に指定しようと思っても、Webフォントが適用されるのは「…―」のみ…………となります。
このやり方だと「少なくとも一つのWebフォントを『約物フォント』専用にすることになる」ことをご留意ください。
> 「言われた通りにコピペしたら、文字以外のデザインが崩れた……」
そういうときは、もともとお使いのスタイルシート（【CSSファイル編集】や【HEAD編集】の内容）などが影響しています。
そのあたりはスタイルシートやHTMLを見ないとなんともしようがないので、あくまで上述の内容は“一例”です。
━ ━ ━ ━ ━
▼以下完全に蛇足（経緯説明。読まなくて問題無いです）
今回の問題は『「三点リーダーが下付きじゃなく真ん中に並ぶフォント」かつ「二倍ダーシが隙間なく一本線になるフォント」を指定すればいい！』……わけなんですが、この条件をクリアする最適解たるフォント指定がさっぱり分からず。
というのも、閲覧者のデバイスに搭載されているフォントを指定しないと当然フォント指定は効かないわけなんですが、「すべてのデバイスに必ず搭載されているフォント」とやらは無いらしく。
できることは「いろんなフォントを指定しておけば、そのうちどれかは入ってるだろ」と数打ちゃ当たる戦法くらい……。
色々調べたんですが、結局どんなフォント達を指定しておけばいいのか？の明確な答えが得られなかったので、Webフォントを使う方向で落ち着きました。
「本文全部“Noto Sans JP”にしちゃえばいいんじゃないの？」
→もちろんそうです。
ただ、「小説を書く」前提で考えたとき、日本語Webフォントの弱点が気になるな……と思いました。
ずばり、収録文字数です。
地名とか人名とか、マイナーな字がWebフォントに入ってなかったら……その文字だけWebフォントが適用されず、別のフォントが当てられます。
ところどころフォントが違うとか、目立ちそうでやだなぁ……と考えたため、今回のように「必要な約物だけWebフォントを引っ張ってきて、あとはデバイス内のフォントを表示させる」ことにしました。
※フォントの指定方法そのものは>>1さんのご説明・ご紹介のサイトがわかりやすいです。
※フォントの指定を「どこにコピペしたらいいか？」については>>3でも一応触れています。
個人的にも気になる話題だったので数ヶ月検証していたんですが、結論としては、
『Webフォントを適用させる』
……のが結局一番手っ取り早いかな、と思いました。
>▼約物「……」「――」だけにWebフォント（“Noto Sans JP”／Google Fonts）を指定してみたデモ
三点リーダーを真ん中に・二倍ダーシを途切れさせないためにどうするか - 「PiRan.」出張所
【デモページです】字書きとしては、三点リーダー（……）が下付きになるのも、二倍ダーシ（――）の間に隙間が入るのも、とても気になる！ なんとかしたい！ ……ということで、「三点リーダーを文字の天地中央に並べ、二倍ダーシを一本線にするため、これら約物にだけWebフォントを適用」してみました。
alicex.jp（※検証用に適当に作ってるデモなので、予告なく改修するかもです……）
今回試してみて初めて知ったんですが、Google Fontsの“Noto Sans JP”・“Noto Serif JP”は、字間（letter-spacing）をあける設定にしていても、二倍ダーシに隙間が入らない！！
二倍ダーシのところだけ字間をゼロにする……みたいな指定をしなくて済む！！
控えめに言って最高だなと思いました（字書きの所感）。
上記デモの後半にはあえて長文を置いてありますので、文字の違和感の有無などをお確かめください。
▼▼ やり方 ▼▼
>①【HEAD編集】の〔□HEAD間編集〕欄、最上部に以下を入れる
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&text=%E2%80%95%E2%80%A6" rel="stylesheet">
>②上記（①）の内容より下に、以下を入れる
<style>
/*※約物用Webフォント*/
.yakumono{
font-family: 'Noto Sans JP'/*※*/, sans-serif;
}
</style>
>③約物だけWebフォントにしたい箇所を、class名を付けたタグで囲んで指定する
*例）小説の本文（ #text# ）だけに適用したいときは、【文章画面編集】にて、
* ↓のように独自タグをHTMLタグ（『<div class="yakumono">』と『</div>』）で挟む
<div class="yakumono">#text#</div>
━━━━━━━━━━
▼以下補足
> ①の「&text=%E2%80%95%E2%80%A6」部分
「&text=○×△」と書くと、
『そのWebフォントから「○×△」という文字だけ抜き出して使う』ことができます。
ただしこの「○×△」部分、日本語をそのまま使うとエラーになります（※半角英数字ならエラーにならない）。
よって、抜き出したい「…」「―」をそのまま書くわけにはいきません。
日本語文字を抜き出して使いたいときは、『URLエンコード』というのを行います。
この『URLに使えない文字を、URLに使える文字のみで表現する変換』を行えば、
「『…』と『―』を抜き出してね」、と指定できます。
「―…」＝「%E2%80%95%E2%80%A6」です。
以上の記述により、『“Noto Sans JP”の中から「…」と「―」を抜き出せた』状態になりました。
> ②'Noto Sans JP'
↑これが、『真ん中にくる三点リーダー、および、一本線になる二倍ダーシ』のフォントです。
必ず、このフォント（以下「約物フォント」と呼ぶ）を font-family の一番初めに書いてください。
何故かというと、複数のフォントを指定した場合「はじめに書いたものほど優先順位が高くなる」ためです。
なので約物フォントよりも先（上位）に英文フォントなどを指定したら、また三点リーダーが英字仕様になって下付きになってしまう……ということが起こります。
逆に言うと、約物フォントを最初（最上位）に置いてさえいれば、それに続くフォントは自由に変更ができます。
○○{font-family:'Noto Sans JP',英文フォント,和文フォント;}
……というふうにもできる、ということです。
問題点としては、“Noto Sans JP”というフォントが「約物フォント」専用にならざるを得ないところです。
なにせこのフォントからは「…―」の２文字しか抜き出していないので、例えば見出しの文字全てを“Noto Sans JP”に指定しようと思っても、Webフォントが適用されるのは「…―」のみ…………となります。
このやり方だと「少なくとも一つのWebフォントを『約物フォント』専用にすることになる」ことをご留意ください。
> 「言われた通りにコピペしたら、文字以外のデザインが崩れた……」
そういうときは、もともとお使いのスタイルシート（【CSSファイル編集】や【HEAD編集】の内容）などが影響しています。
そのあたりはスタイルシートやHTMLを見ないとなんともしようがないので、あくまで上述の内容は“一例”です。
━ ━ ━ ━ ━
▼以下完全に蛇足（経緯説明。読まなくて問題無いです）
今回の問題は『「三点リーダーが下付きじゃなく真ん中に並ぶフォント」かつ「二倍ダーシが隙間なく一本線になるフォント」を指定すればいい！』……わけなんですが、この条件をクリアする最適解たるフォント指定がさっぱり分からず。
というのも、閲覧者のデバイスに搭載されているフォントを指定しないと当然フォント指定は効かないわけなんですが、「すべてのデバイスに必ず搭載されているフォント」とやらは無いらしく。
できることは「いろんなフォントを指定しておけば、そのうちどれかは入ってるだろ」と数打ちゃ当たる戦法くらい……。
色々調べたんですが、結局どんなフォント達を指定しておけばいいのか？の明確な答えが得られなかったので、Webフォントを使う方向で落ち着きました。
「本文全部“Noto Sans JP”にしちゃえばいいんじゃないの？」
→もちろんそうです。
ただ、「小説を書く」前提で考えたとき、日本語Webフォントの弱点が気になるな……と思いました。
ずばり、収録文字数です。
地名とか人名とか、マイナーな字がWebフォントに入ってなかったら……その文字だけWebフォントが適用されず、別のフォントが当てられます。
ところどころフォントが違うとか、目立ちそうでやだなぁ……と考えたため、今回のように「必要な約物だけWebフォントを引っ張ってきて、あとはデバイス内のフォントを表示させる」ことにしました。
12/29 05:33
いきなり横合いからですみません、
>>2さんは現在テンプレなど使用してますか？
こうお聞きするのは、
『すでにスタイルシートによる何らかのスタイル指定がある場合は、フォントの指定、
△{ font-family: …… ; }
を記入すべき場所等が変わるかもしれない』
からです。
●【CSSファイル編集】
●【HEAD編集】の〔□HEAD間編集〕
↑これらは現在どうなっていますか？
（どちらも空っぽか、どちらかに何か書いてあるか、など）
●ほか、上記２ヶ所に限らず（例えば【○○画面編集】とかに）何かフォントを指定するようなタグなどを使われてはいませんか？
>『上記２ヶ所とも空っぽ』
>『どこにもフォントの指定はしていない』
という状態だったら簡単で、
▼【CSSファイル編集】の
[スマホ用] および [PC用] 両方のCSS編集枠に、
━━━━━━━━━━
body{font-family: …… ;}
━━━━━━━━━━
と書いたらいいです。
※〔使用するCSSファイル〕を『下記の内容のCSSを適用』に必ず変更する
△に「body」と書くのは、簡単に言うと「ページ全体を指定する」……という意味合いです。
……が、『すでに何らかのスタイル指定がある場合』は、bodyに指定したスタイルが効かなくなったりします。
（bodyに指定したスタイルを、別箇所に指定したスタイルが上書きする形で無効化してしまったり……など）
そういうわけなので、「フォントの指定」をどこにコピペしたらいいか？……というのは、現状のスタイルシート（【CSSファイル編集】や【HEAD編集】）による、としか言いようが正直なかったりします。
（とりあえず上述の箇所に書き入れてみて、ダメならスタイルシートを見直すほかないです……）
>>2さんは現在テンプレなど使用してますか？
こうお聞きするのは、
『すでにスタイルシートによる何らかのスタイル指定がある場合は、フォントの指定、
△{ font-family: …… ; }
を記入すべき場所等が変わるかもしれない』
からです。
●【CSSファイル編集】
●【HEAD編集】の〔□HEAD間編集〕
↑これらは現在どうなっていますか？
（どちらも空っぽか、どちらかに何か書いてあるか、など）
●ほか、上記２ヶ所に限らず（例えば【○○画面編集】とかに）何かフォントを指定するようなタグなどを使われてはいませんか？
>『上記２ヶ所とも空っぽ』
>『どこにもフォントの指定はしていない』
という状態だったら簡単で、
▼【CSSファイル編集】の
[スマホ用] および [PC用] 両方のCSS編集枠に、
━━━━━━━━━━
body{font-family: …… ;}
━━━━━━━━━━
と書いたらいいです。
※〔使用するCSSファイル〕を『下記の内容のCSSを適用』に必ず変更する
△に「body」と書くのは、簡単に言うと「ページ全体を指定する」……という意味合いです。
……が、『すでに何らかのスタイル指定がある場合』は、bodyに指定したスタイルが効かなくなったりします。
（bodyに指定したスタイルを、別箇所に指定したスタイルが上書きする形で無効化してしまったり……など）
そういうわけなので、「フォントの指定」をどこにコピペしたらいいか？……というのは、現状のスタイルシート（【CSSファイル編集】や【HEAD編集】）による、としか言いようが正直なかったりします。
（とりあえず上述の箇所に書き入れてみて、ダメならスタイルシートを見直すほかないです……）
12/29 03:09
•フォントの指定
△{
font-family:〇〇,〇〇,●●;
}
△には指定したい箇所
全体なら body
classタグなら .△
idタグなら #△
など
〇〇には指定したいフォントの種類
左から欧文フォント,和文フォント
●●には総称ファミリーフォント
sans-serif ゴシック体
serif 明朝体
など
詳しい書き方(サルワカ)
•三点リーダーについて
アラビア数字(半角)、記号(一部全角)は欧文フォントに適用されるらしく、下線の位置に点が置かれているようです。
結論
欧文フォントを指定せずメイリオなど日本語に対応するフォントを指定する
*下記参考
•ダッシュについて
直接記述するというやり方ですが、文字と文字の間のスペースを狭めると繋がって見えるかと
<span style="letter-spacing: -0.2em;">——</span>
*'-0.2em'の部分をいじってください
△{
font-family:〇〇,〇〇,●●;
}
△には指定したい箇所
全体なら body
classタグなら .△
idタグなら #△
など
〇〇には指定したいフォントの種類
左から欧文フォント,和文フォント
●●には総称ファミリーフォント
sans-serif ゴシック体
serif 明朝体
など
詳しい書き方(サルワカ)
font-familyの書き方まとめ：CSSでフォント種類を指定しよう
HTML&CSS初心者の方でも分かるように「font-familyの書き方の基本」と「Font-familyメーカーの使い方」を解説します。
saruwakakun.com•三点リーダーについて
アラビア数字(半角)、記号(一部全角)は欧文フォントに適用されるらしく、下線の位置に点が置かれているようです。
結論
欧文フォントを指定せずメイリオなど日本語に対応するフォントを指定する
*下記参考
•ダッシュについて
直接記述するというやり方ですが、文字と文字の間のスペースを狭めると繋がって見えるかと
<span style="letter-spacing: -0.2em;">——</span>
*'-0.2em'の部分をいじってください
12/26 11:52
1ページ中1ページ目
1377 view
残り書き込み 9995 件
人気スレ
関連スレ