WebページのフォントをIEで綺麗にアンチエイリアスかけたいけん
先日とあるお仕事で
「font-sizeが25px以上のテキストはWindowsのIEでもアンチエイリアスがかかる」
と聞いて（すいません初めて知りました！）
ちょと興味を持って調べたことをズラズラと。
→ 第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法 [C!]
→ briccolog » FirefoxとChrome（とIEとSafari）でのフォントレンダリングの違い
→ ブラウザ別フォントレンダリングの比較（欧文編） - INCOMPLETE++
→ 日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより）
オマケ
→ ZEROのまったりブログ : Windowsでアンチエイリアスのかかった美しいフォントレンタリングを可能にする「gdipp」
私めのWebブラウンジングは主にMacのSafariとiPhoneなので
普段の個人生活では何ら支障もストレスもないこと山の如しなんですが、
Webサイト制作者のためにも、いや一般的なユーザのためにも、
「フォントが綺麗に表示されるなんて当たり前」な環境が
全OS、全ブラウザで早く実現してほしいものです。
そうなったらサイト作る時に見出し文字の画像切り出しなんてしなくてよくなるしね。
文字なんて読めりゃいいという人も多いと思うけど、
キレイで読みやすい方がいいに決まってるもの。全人類絶対そうだもの。
というか何でいつまで経ってもできないのw
素朴な疑問。
「font-sizeが25px以上のテキストはWindowsのIEでもアンチエイリアスがかかる」
と聞いて（すいません初めて知りました！）
ちょと興味を持って調べたことをズラズラと。
→ 第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法 [C!]
→ briccolog » FirefoxとChrome（とIEとSafari）でのフォントレンダリングの違い
→ ブラウザ別フォントレンダリングの比較（欧文編） - INCOMPLETE++
→ 日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより）
オマケ
→ ZEROのまったりブログ : Windowsでアンチエイリアスのかかった美しいフォントレンタリングを可能にする「gdipp」
私めのWebブラウンジングは主にMacのSafariとiPhoneなので
普段の個人生活では何ら支障もストレスもないこと山の如しなんですが、
Webサイト制作者のためにも、いや一般的なユーザのためにも、
「フォントが綺麗に表示されるなんて当たり前」な環境が
全OS、全ブラウザで早く実現してほしいものです。
そうなったらサイト作る時に見出し文字の画像切り出しなんてしなくてよくなるしね。
文字なんて読めりゃいいという人も多いと思うけど、
キレイで読みやすい方がいいに決まってるもの。全人類絶対そうだもの。
というか何でいつまで経ってもできないのw
素朴な疑問。
丸数字記号の文字化けとか機種依存文字とかファイル名とか
「入稿ファイル名やテキストデータ、指示書、メールには
丸数字などの機種依存文字を使わないで下さい」
…と言い続けてもう約10年になるわけですけれども、
Windowsユーザさんは一向に聞いちゃあくれません。
先日も社長から、フォルダ名が(月)(火)…と文字化けしていて
指示書と照合出来ずに打ちひしがれるデータを送って来られましたとも。
参考
WindowsとMacの文字化け（対応表がある）
そんなわけで、ン年前までとは違ってMacも随分Windowsへの歩み寄りを見せている昨今ですが、
まだまだ文字化けとの戦いは日常茶飯事です。
???????.pdfとか、何文字あるのコレ？という壊れてないのが不思議なファイルが入稿されてきても、もう注意なんていたしません。スルーです。
とりあえず開けたらそれでいいんです。
とにかく開けたら正解。それでいい。
（印刷用のデータなどはさすがにMacの人やMac出身の人が制作に携わってらっしゃるのか、
リンクファイルが文字化けして画像貼り直す的なことはほとんどないし）
逆に、Macユーザとして気をつけるべきも同じことで。
メール添付ファイルのWindows対応やMacWinZipperを使い、
ファイル・フォルダ名は、半角英数字＋アンダースコアかハイフンでほぼ統一したりしています。
別にカッコつけてるわけじゃないんですよ。
必死で英単語調べて付けたりしてるんですよかわいそうでしょ。
そんなおかげで、私からお送りするファイルがおかしいと言われることはほとんどないのですが
たまに開けない、見られない、何かヘン、と言われたと思ったら、
たいていお相手のシステムやメールソフトやセキュリティが原因だったりします……
どれだけ歩み寄ってもWindowsとの戦いは永遠に続きそうですなあ。
丸数字などの機種依存文字を使わないで下さい」
…と言い続けてもう約10年になるわけですけれども、
Windowsユーザさんは一向に聞いちゃあくれません。
先日も社長から、フォルダ名が(月)(火)…と文字化けしていて
指示書と照合出来ずに打ちひしがれるデータを送って来られましたとも。
参考
WindowsとMacの文字化け（対応表がある）
そんなわけで、ン年前までとは違ってMacも随分Windowsへの歩み寄りを見せている昨今ですが、
まだまだ文字化けとの戦いは日常茶飯事です。
???????.pdfとか、何文字あるのコレ？という壊れてないのが不思議なファイルが入稿されてきても、もう注意なんていたしません。スルーです。
とりあえず開けたらそれでいいんです。
とにかく開けたら正解。それでいい。
（印刷用のデータなどはさすがにMacの人やMac出身の人が制作に携わってらっしゃるのか、
リンクファイルが文字化けして画像貼り直す的なことはほとんどないし）
逆に、Macユーザとして気をつけるべきも同じことで。
メール添付ファイルのWindows対応やMacWinZipperを使い、
ファイル・フォルダ名は、半角英数字＋アンダースコアかハイフンでほぼ統一したりしています。
別にカッコつけてるわけじゃないんですよ。
必死で英単語調べて付けたりしてるんですよかわいそうでしょ。
そんなおかげで、私からお送りするファイルがおかしいと言われることはほとんどないのですが
たまに開けない、見られない、何かヘン、と言われたと思ったら、
たいていお相手のシステムやメールソフトやセキュリティが原因だったりします……
どれだけ歩み寄ってもWindowsとの戦いは永遠に続きそうですなあ。
LightBox2の画像の高さ（幅もな）を画面サイズに合わせる！
LightBox2は、画像サイズが画面からはみ出すほど大きいと、
スクロールしないと見られないし閉じられもしないという、
そこはかとなくイラッとする仕様です。
が、そんなLightBox2の画像の高さ（幅も）を、パソコンの画面サイズに合わせて縮小表示する方法を発見。
IEの人には標準の、大きすぎる画像は自動的に縮小表示してくれるアレと同じです。
IEをお使いのクライアントに求められては無言になっていましたが、これで笑顔で対応できます。というか使用する場合は標準装備にしておきますよもう。
→ 【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する 知識Ｚ（ゼータ）
ありがとうございますー！
これでLightBox2はほとんど完璧かなーと！
スクロールしないと見られないし閉じられもしないという、
そこはかとなくイラッとする仕様です。
が、そんなLightBox2の画像の高さ（幅も）を、パソコンの画面サイズに合わせて縮小表示する方法を発見。
IEの人には標準の、大きすぎる画像は自動的に縮小表示してくれるアレと同じです。
IEをお使いのクライアントに求められては無言になっていましたが、これで笑顔で対応できます。というか使用する場合は標準装備にしておきますよもう。
→ 【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する 知識Ｚ（ゼータ）
ありがとうございますー！
これでLightBox2はほとんど完璧かなーと！
LightBox2のNEXT（PREV）ボタンを常に表示させる
iPhoneやiPadなどのタブレット端末でnext／prevボタンが表示されないのですが
（画像上をクリックで次や前の画像へ移動する動作は正常。ボタンが表示されないだけ）
lightbox.cssの:hoverで表示／非表示を制御しているのが原因で、タブレットではいたしかたなく。
以下、スマフォやタブレットの場合は常時表示にするcssを下記UAで振り分けて回避。
※ちなみにノートパソコンでも同じ状態のはずだし、
個人的にはLightBox系の画像ギャラリーはPCでも
NETXやPREVボタンが常に表示されている方がわかりやすいと思うので、
そういう風に変更する場合は下記のようなややこしいことはしなくても
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去してしまえばOK。
●STEP1
lightbox_tablet.cssなどという新規ファイルを作成して以下の記述をコピペ。
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去しただけのものです。
@import "./lightbox.css"; /* ←lightbox.cssを読み込み */
.lb-prev {
background: url(../images/prev.png) left 48% no-repeat;
}
.lb-next {
background: url(../images/next.png) right 48% no-repeat;
}
●STEP2
head内のlightbox.cssへのリンク部分を下記のように。パスやファイル名は適宜書き換えて下さい。
※ソース引用元：スマートフォン・タブレットの振り分けをどう考える？ | Wakana.me
var ua = navigator.userAgent;
if(ua.indexOf('iPad') != -1||(ua.indexOf('Android') != -1 && ua.indexOf('EB-WX1GJ') != -1)){
//iPad & Androidタブレット
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPod') != -1 || ua.indexOf('Android') != -1){
//iPhone & iPod & Androidスマートフォン
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="lightbox.css">');
}
以上
（画像上をクリックで次や前の画像へ移動する動作は正常。ボタンが表示されないだけ）
lightbox.cssの:hoverで表示／非表示を制御しているのが原因で、タブレットではいたしかたなく。
以下、スマフォやタブレットの場合は常時表示にするcssを下記UAで振り分けて回避。
※ちなみにノートパソコンでも同じ状態のはずだし、
個人的にはLightBox系の画像ギャラリーはPCでも
NETXやPREVボタンが常に表示されている方がわかりやすいと思うので、
そういう風に変更する場合は下記のようなややこしいことはしなくても
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去してしまえばOK。
●STEP1
lightbox_tablet.cssなどという新規ファイルを作成して以下の記述をコピペ。
lightbox.cssの112行目あたりの.lb-prev:hoverと.lb-next:hoverから:hoverを消去しただけのものです。
@import "./lightbox.css"; /* ←lightbox.cssを読み込み */
.lb-prev {
background: url(../images/prev.png) left 48% no-repeat;
}
.lb-next {
background: url(../images/next.png) right 48% no-repeat;
}
●STEP2
head内のlightbox.cssへのリンク部分を下記のように。パスやファイル名は適宜書き換えて下さい。
※ソース引用元：スマートフォン・タブレットの振り分けをどう考える？ | Wakana.me
var ua = navigator.userAgent;
if(ua.indexOf('iPad') != -1||(ua.indexOf('Android') != -1 && ua.indexOf('EB-WX1GJ') != -1)){
//iPad & Androidタブレット
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPod') != -1 || ua.indexOf('Android') != -1){
//iPhone & iPod & Androidスマートフォン
document.write('<link rel="stylesheet" href="lightbox_tablet.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="lightbox.css">');
}
以上
LightBox2の画像表示位置の変更（画面上辺からの距離）
LightBox2の画面上辺からの距離というか高さというかそんなんを変更したくてググっても
旧バージョンのカスタマイズばっかり出て来て困ったけどすぐ見つかりました。
本件のバージョンはLightBox2.51です。
●180行目
top = $window.scrollTop() + $window.height() / 10;
↓
top = $window.scrollTop() + $window.height() / 25; ←ここの数値を変更
画面の高さ÷10ってことみたいなので、÷20、÷30とか数値を上げていけば
上辺からの距離が短くなります。
… / 10 - 50（マイナス＆数値）とかにすると、画面の高さがどうこうじゃなくて
マイナス50ピクセルとかになる。みたい。多分。
あとCLOSEボタンの位置やキャプションの位置の変え方がわからなかった…
NEXTとPREVの位置はCSSで変更できるのでラクですが。
旧バージョンのカスタマイズばっかり出て来て困ったけどすぐ見つかりました。
本件のバージョンはLightBox2.51です。
●180行目
top = $window.scrollTop() + $window.height() / 10;
↓
top = $window.scrollTop() + $window.height() / 25; ←ここの数値を変更
画面の高さ÷10ってことみたいなので、÷20、÷30とか数値を上げていけば
上辺からの距離が短くなります。
… / 10 - 50（マイナス＆数値）とかにすると、画面の高さがどうこうじゃなくて
マイナス50ピクセルとかになる。みたい。多分。
あとCLOSEボタンの位置やキャプションの位置の変え方がわからなかった…
NEXTとPREVの位置はCSSで変更できるのでラクですが。