ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

Stinger5 カスタマイズ – ドット「・」問題を解消

      2017/10/25

ドット「・」問題を解消

相変わらず自分がカスタマイズしたことを備忘録的にメモな投稿。

Stinger5のページをスマホでみると「・」が表示される

Stinger5で作ったページをスマホで見ると、よくわからないけどドット「・」がいっぱい表示されていたので、「これはなんかソースをミスったかなぁ」と思っていましたが、調べてみるとどうやら違うらしい。

下記の赤枠のような感じです。

パンくずリストにも出てきますね。

image3813

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, "MS Pゴシック", sans-serif;
	margin: 0px;
	padding: 0px;
}

●変更後


* {
	font-family: Helvetica,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
	margin: 0px;
	padding: 0px;
}

フォントのHelveticaを追加しただけですね。

下記のように修正されました。

image3868

MENUという文字のフォントも変更されていますねw

まとめ

フォントのHelveticaというのはWikipediaによると、結構一般的なんですね。

初めて知りましたが。

Wikipedia

現在最も使用される書体の一つとなっているほか、出版や広告の業界では必要不可欠な書体として知られる。
今日ではフォントとして誰でも手軽に利用でき、Macintoshでは OS に付属する標準フォントの一つとなり、iOSではシステムフォントである。

ちなみに今回の修正がそもそも正しい解決法なのか?

という点ではちょっとわからないのですが、いろいろ検討した結果、この解決法にたどり着いている方もいるみたいです。

あっぱれですね!

【STINGER5】AndroidのChromeで が「・」になってる気がする | ビビビッ

とりあえず、自分的にはフォントがどうであろうとドット「・」問題が解決しただけでありがたいです。

以上。

 - Stinger5, Web, wordpress