2015年07月16日

jQuery Plugin Fancyboxで文字化けしちゃった

 jQuery Plugin Fancyboxでポップアップ画面を表示することがあるのですが、問題が発生していることが分かりました。

chrome01.png


 Chromeの場合は"ほとんど"問題ありません。<資料1>をクリックします。

 そうすると、<資料1>の内容がポップアップ表示されます。

chrome02.png


 大体問題ないんですが、ウインドウ下部のキャプション行の「右上の×をクリックすると」としたはずの部分が「右上の×をクリックすると」となってしまっています。

【対処1】
 ×(ばつ)で駄目ならX(エックス)でよかろうということで、X(エックス)にしたら、もちろん問題なく表示されました。

chrome03.png


 しかし、世の中の人がみなChromeを使っているわけではありません。(笑) 一番のガンはInternet Explorerです。
 IEで表示してどうなるかを試してみました。

iexplorer01.png


 リンク先を、ポップアップさせます。

iexplorer02.png


 化け化け状態です。大丈夫なのは、ESCとXだけ(そしてなぜか2バイトの"<"">"も)です。
 これはもう、フォントの指定を変えるしかありません。

 どこでフォント指定をしているのか探してみました。
 どうやら、jquery.fancybox.css らしいので、さらに内部を覗いてみました。

css01.png


.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;

という、フォント名をしている行がありました。

font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
をコメントアウトします。

css02.png


iexplorer03.png


 無事に2バイトの文字も表示されるようになりました。

 ところで、このキャプションに使われているフォントは何でしょう。MSゴシックでしょうか。メイリオでしょうか。今後のことを考えると、UTF8の対応をしているメイリオでの指定をしておけば、やや特殊な文字でもトラブルが生じません。
 Meiryoをフォント指定してみました。

iexplorer04.png


 「<資料1>:■■ESCを押すか、…」と従来にはない文字も表示されるようになりました。(当ブログ自体が、■■の部分の文字を表示出来ません。)
 じゃあ、Meiryoのフォント指定を解除すると…? 
 (スクリーンキャプチャを取り忘れましたが)大丈夫でした。今のMSゴシックは、古いMSゴシックにはないUnicodeの文字も収録してあるのかも知れません。

 なお、Safariについては、Chromeと同様にもともと×(バツ)以外は問題なしでした。
 他のブラウザは試していません。

 IEも一応IE-11(+windows7) なのですけどね。

iexplorer05.png


 IEも改善が行き詰まっているのかもしれません。Win10では全く新しいブラウザを標準にするようですし。

タグ:jquery fancybox
posted by kewpie at 10:07| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/152984889
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。