2014年11月09日
MacのSafariでミリブロの表示がおかしい時の対処法
皆さんおはこんばんちは、あまてらすです。
今回はMacのSafariでミリブロの表示がおかしい時の対処法がわかったので、紹介しようと思います。
今回はMacのSafariでミリブロの表示がおかしい時の対処法がわかったので、紹介しようと思います。
MacのSafariでミリブロを閲覧すると、HTMLタグの後に不自然な隙間（余白）ができることがあります！
ちなみにGoogle Chrome、Firefox、Operaではこのような隙間はできません。
また、iOS版のSafariでデスクトップ表示してもこんな現象は起きていませんでした。
（WindowsマシンがないのでIEでは未確認）
この問題の解決法は、ミリブロのCSSソース内から全体指定されたfont-familyとword-breakの指定を削除することです！
直接の原因になったかどうかはわかりませんが、本来ならsans-serif（サンセリフ）と入力されるべきフォント名が、タイプミスによってans-serif（アンセリフ？）になってしまっていますね。
この全体指定のCSSを削除しましょう。
これで本来の表示に直るはずなので、その後は改めてフォントを指定すれば大丈夫です。
ちなみに私は「3カラム シンプルクール（100%）」のテンプレートを使用していますが、他のテンプレートでもまったく同じ問題が起こることがあるので、その時は該当CSSを確認してみることをおすすめします。
今までずっとこの問題に悩まされていたので、やっとMacのSafariでミリブロを正しく表示できるようになって感無量です。
ミリブロをカスタマイズしている方はぜひお試しあれ！
ちなみにGoogle Chrome、Firefox、Operaではこのような隙間はできません。
また、iOS版のSafariでデスクトップ表示してもこんな現象は起きていませんでした。
（WindowsマシンがないのでIEでは未確認）
この問題の解決法は、ミリブロのCSSソース内から全体指定されたfont-familyとword-breakの指定を削除することです！
直接の原因になったかどうかはわかりませんが、本来ならsans-serif（サンセリフ）と入力されるべきフォント名が、タイプミスによってans-serif（アンセリフ？）になってしまっていますね。
この全体指定のCSSを削除しましょう。
これで本来の表示に直るはずなので、その後は改めてフォントを指定すれば大丈夫です。
ちなみに私は「3カラム シンプルクール（100%）」のテンプレートを使用していますが、他のテンプレートでもまったく同じ問題が起こることがあるので、その時は該当CSSを確認してみることをおすすめします。
今までずっとこの問題に悩まされていたので、やっとMacのSafariでミリブロを正しく表示できるようになって感無量です。
ミリブロをカスタマイズしている方はぜひお試しあれ！
参考リンク
- STINGER3 カスタマイズ：Safariで一部テキストに余白が入ってしまう部分を修正 | アンクエ！- 疑問の答えを探す人
- word-break－スタイルシートリファレンス | HTMLクイックリファレンス
Posted by あまてらす at 20:21│Comments(0)
│ミリブロカスタマイズ
※会員のみコメントを受け付けております、ログインが必要です。