ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 三点リーダー「……」とダッシュ「───」について ユーザー助け合い掲示板 『三点リーダー「……」とダッシュ「───」について』へのコメント投稿 記事 4 へのレス:ついでに、「三点リーダー(……)」「二倍ダーシ(――)」(※以下、まとめて「約物(やくもの)」と言う)を意図通りに表示する別案も置いていきます。(>>3と同じ者です) ※フォントの指定方法そのものは>>1さんのご説明・ご紹介のサイトがわかりやすいです。 ※フォントの指定を「どこにコピペしたらいいか?」については>>3でも一応触れています。 個人的にも気になる話題だったので数ヶ月検証していたんですが、結論としては、 『Webフォントを適用させる』 ……のが結局一番手っ取り早いかな、と思いました。 >▼約物「……」「――」だけにWebフォント(“Noto Sans JP”/Google Fonts)を指定してみたデモ https://alicex.jp/0piran0/17/ (※検証用に適当に作ってるデモなので、予告なく改修するかもです……) 今回試してみて初めて知ったんですが、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"> >A上記(@)の内容より下に、以下を入れる <style> /*※約物用Webフォント*/ .yakumono{ font-family: 'Noto Sans JP'/*※*/, sans-serif; } </style> >B約物だけ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”の中から「…」と「―」を抜き出せた』状態になりました。 > A'Noto Sans JP' ↑これが、『真ん中にくる三点リーダー、および、一本線になる二倍ダーシ』のフォントです。 必ず、このフォント(以下「約物フォント」と呼ぶ)を font-family の一番初めに書いてください。 何故かというと、複数のフォントを指定した場合「はじめに書いたものほど優先順位が高くなる」ためです。 なので約物フォントよりも先(上位)に英文フォントなどを指定したら、また三点リーダーが英字仕様になって下付きになってしまう……ということが起こります。 逆に言うと、約物フォントを最初(最上位)に置いてさえいれば、それに続くフォントは自由に変更ができます。 ○○{font-family:'Noto Sans JP',英文フォント,和文フォント;} ……というふうにもできる、ということです。 問題点としては、“Noto Sans JP”というフォントが「約物フォント」専用にならざるを得ないところです。 なにせこのフォントからは「…―」の2文字しか抜き出していないので、例えば見出しの文字全てを“Noto Sans JP”に指定しようと思っても、Webフォントが適用されるのは「…―」のみ…………となります。 このやり方だと「少なくとも一つのWebフォントを『約物フォント』専用にすることになる」ことをご留意ください。 > 「言われた通りにコピペしたら、文字以外のデザインが崩れた……」 そういうときは、もともとお使いのスタイルシート(【CSSファイル編集】や【HEAD編集】の内容)などが影響しています。 そのあたりはスタイルシートやHTMLを見ないとなんともしようがないので、あくまで上述の内容は“一例”です。 ━ ━ ━ ━ ━ ▼以下完全に蛇足(経緯説明。読まなくて問題無いです) 今回の問題は『「三点リーダーが下付きじゃなく真ん中に並ぶフォント」かつ「二倍ダーシが隙間なく一本線になるフォント」を指定すればいい!』……わけなんですが、この条件をクリアする最適解たるフォント指定がさっぱり分からず。 というのも、閲覧者のデバイスに搭載されているフォントを指定しないと当然フォント指定は効かないわけなんですが、「すべてのデバイスに必ず搭載されているフォント」とやらは無いらしく。 できることは「いろんなフォントを指定しておけば、そのうちどれかは入ってるだろ」と数打ちゃ当たる戦法くらい……。 色々調べたんですが、結局どんなフォント達を指定しておけばいいのか?の明確な答えが得られなかったので、Webフォントを使う方向で落ち着きました。 「本文全部“Noto Sans JP”にしちゃえばいいんじゃないの?」 →もちろんそうです。 ただ、「小説を書く」前提で考えたとき、日本語Webフォントの弱点が気になるな……と思いました。 ずばり、収録文字数です。 地名とか人名とか、マイナーな字がWebフォントに入ってなかったら……その文字だけWebフォントが適用されず、別のフォントが当てられます。 ところどころフォントが違うとか、目立ちそうでやだなぁ……と考えたため、今回のように「必要な約物だけWebフォントを引っ張ってきて、あとはデバイス内のフォントを表示させる」ことにしました。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>4 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート