Stinger5 カスタマイズ – ドット「・」問題を解消
2017/10/25
目次
ドット「・」問題を解消
相変わらず自分がカスタマイズしたことを備忘録的にメモな投稿。
Stinger5のページをスマホでみると「・」が表示される
Stinger5で作ったページをスマホで見ると、よくわからないけどドット「・」がいっぱい表示されていたので、「これはなんかソースをミスったかなぁ」と思っていましたが、調べてみるとどうやら違うらしい。
下記の赤枠のような感じです。
パンくずリストにも出てきますね。
Android版のブラウザChromeの不具合
今回参考にさせていただいたサイトは下記サイト。
Stinger5や自分に問題があるわけではなく、Android版のブラウザChromeの不具合でそうなってしまうらしいです。。
確かに自分はChromeを使っています。
Chrome以外はドット「・」なしでちゃんと表示されているのでしょう。。たぶん。。
Android Chromeで半角スペース(nbsp)が点・で表示される不具合対策
Android Chromeの不具合
「chromium」のIssue 451933: rendered as center dot “・” in some localization
に書いてありました。
The nbsp are being rendered as a “・”.
が点「・」になって表示されてしまっている不具合で、本来は通常のスペースのようにレンダリングすべき（つまり見えない）。
フォントのHelvetica（ヘルベチカ）でドット「・」問題を解消
解決策も上記参考サイトのように行いました。
WordPressのメニューで「外観」→「テーマの編集」で「スタイルシート（style.css）」を選択します。
style.cssの記載を下記のように変更します。
●変更前
* {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
margin: 0px;
padding: 0px;
}
●変更後
* {
font-family: Helvetica,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
margin: 0px;
padding: 0px;
}
フォントのHelveticaを追加しただけですね。
下記のように修正されました。
MENUという文字のフォントも変更されていますねｗ
まとめ
フォントのHelveticaというのはWikipediaによると、結構一般的なんですね。
初めて知りましたが。
Wikipedia
現在最も使用される書体の一つとなっているほか、出版や広告の業界では必要不可欠な書体として知られる。
今日ではフォントとして誰でも手軽に利用でき、Macintoshでは OS に付属する標準フォントの一つとなり、iOSではシステムフォントである。
ちなみに今回の修正がそもそも正しい解決法なのか？
という点ではちょっとわからないのですが、いろいろ検討した結果、この解決法にたどり着いている方もいるみたいです。
あっぱれですね！
とりあえず、自分的にはフォントがどうであろうとドット「・」問題が解決しただけでありがたいです。
以上。