FC2ブログのテンプレート配布・作成日誌。

フォント可変デザインは何気に厄介なもので、IEでの見栄えは閲覧者側のフォントサイズ（大中小）設定に依存します。本来は？フォントサイズになるべく依存しないデザインにしフォントを少し大きめにする事で、どのサイズ（大中小）でもそれなりに見えるようにするのだろうけど、フォント中サイズを12pxぐらいの大きさにしようと思うとフォント小サイズの扱いが非常に難しくなってしまいます。ヽ(`Д´)ﾉ

今回それを打開すべく一ヶ月ぐらい前からフォントサイズやら行間などのバランスを試行錯誤してきたのですが、残念ながら未だに自分の納得するものが出来ず新テンプレート公開までに間に合いそうにありません。と言う事で今回は意表を突いてフォント固定にしてみた。←なんでやねんｗ。

うっせ。もう疲れたんだよｗ

とりあえず今回はこれで様子を見てみます。そのうち何とか打開してフォント可変に戻すと思うのでそこんとこよろしく。

余談

IE7のインターネットオプションには『拡大中にテキストを中サイズにリセットする 』なる設定がありディフォルトでONになっています。この設定は小サイズにして閲覧している人からするとズームしたとたん勝手に戻ってしまうので不評らしいのですが僕は上記の理由で少し嬉しかったりします。( ´ー｀)

他には『新しいウィンドウとタブで、テキストを中サイズにリセットします。 』なる設定も新たに追加されているのですが、こちらはデフォルトでOFFになってます･･･ちっ

■ 関連リンク

• 2ch＠おまいらIEの文字のサイズは何ですか？
• 2ch＠好きなフォントサイズをあげろ！～css～

恥かしい話、僕は年齢＝Webベージ印刷した事ない暦なので印刷に関する知識は無に等しいのですが、とりあえず見様見真似で印刷用のCSSを当ブログに実装してみました。事の始まりは憎いあん畜生（FC2ブログ公式マニュアル）が『上級者』と言う甘く切ないキーワードを盛り込むもんだから、単純な僕は『そんなエサに釣られないクマーAA略』ってな感じです。意味不明でごめんなさい。印刷用CSSがどんな感じなのかは当ブログの個別ページでも開いてブラウザメニューから印刷のプレビューでも見てください。

印刷時に表示される個所

• ブログタイトル
• ブログ説明
• 記事日付
• 記事本文
• 記事フッター
• 著作権部分

基本的に印刷時は上記以外表示されないようになっています。こうする事で求める情報？を効率的に印刷できるようになるそうです。なるほど。ただ、うちのブログの場合、記事よりコメ欄に情報が詰まっているような気もしないでもないのですが・・・ブヒ。

配布中のテンプレートへの実装は散々悩んだのですが『印刷部分を勝手に制御すんなハゲ』なんて言われそうだったので見合わせました。が、欲しいと言う人もいるかもしれないので当テンプレート全てに対応する印刷用のCSSを作りました。利用する場合は下記記述をHTMLのhead内にコピペしてください。挿入場所がイマイチ分からない人は当ブログのソースをコッソリ覗いてみてください。

<link rel="stylesheet" media="print" href="http://blog-imgs-27.fc2.com/h/i/y/hiyokokun/print001.css" type="text/css" />

※テンプレートは最新のものをご使用ください。古いテンプレートでは正しく表示されない可能性があります。印刷用CSSは当ブログのファイルとしてアップロードされているものなのでカスタマイズ不能です。不具合などあったら教えてください。

余談

生まれて初めて印刷のプレビュー機能なんてのをマジマジと眺めてみたわけですが、ブラウザ側のフォントサイズ変更で文字サイズを大きくして印刷できるようですね。こんな余計な事を知ってしまうとますますフォント固定ができないじゃんヽ(`Д´)ﾉ。ちなみにIE7は印刷のプレビュー自体に拡大縮小機能があって用紙サイズに合わせた印刷が可能のようです。

■ 関連リンク

• 印刷用のテンプレートを作ってみよう＠FC2ブログ公式マニュアル

IE7にすると(・ω・)←のωが変になると言う事で勝手にフォント検証をしてみました。

なるほど。単純にアンチエイリアス（ClearType）の問題だと思っていたのですが見比べてみるとどれも微妙に違いますね･･･。

ClearTypeといえばWindowsXｐでは通常『フォントを滑らかにする』の設定は画面のプロパティから変更するのですが、IE7にはインターネットオプションに『HTMLで常にClearTypeを使用する』なる設定が存在しデフォルトでONになってます。この設定には何気に強制力があり画面のプロパティ側の設定を無視し問答無用でClearTypeを発動します・・・。ClearType嫌いな人はインターネットオプションから設定を解除しましょう。

さて話は変わりますが（実はこっちが本題だったりする）、画像の赤枠部分をご覧ください。IE6と比べると微妙に形状が違う記号が存在する事がお分かりいただけると思います。Verdana（フォント）には#以降の記号（※■▲◆△♪）はフォントに含まれていません。その場合どのような方法でそれを補いブラウザ上で表示されているのか調べてないので確かな事はわかりませんが、IE7に限ってはIE6・FireFox・Operaとは違うフォントが適用されるようです。♪の形状からするとArial（フォント）に似ているように思えますが・・・(#＾ω＾)ﾋﾟｷﾋﾟｷ。何かまたバグでもあるのでしょうか？

最近IE7のことについていろいろ知りたくて某巨大掲示板のIE7スレなんかを覗いていたりするのですが、ちょっとした煽りやら技術的な話題・設定に関する質問が数多く並ぶなかで、とても切実な質問を発見した。

125　名前：名無し~3.EXE　投稿日：2007/09/13(木) 01:21:22 ID:hbMSxR0l

先ほど、IE6からIE7にしてみました。

そしたら、(・ω・)←こいつのωが大きくなってあまり可愛くなくなってしまいました。

これはフォントが勝手に変わったからですか？解決策があれば教えていただきたいです。

和むわ～ｗ

InternetExplore7（IE7)の新機能ズーム表示（拡大・縮小）の挙動が変なので少し検証してみた。

IE7ズーム（拡大・縮小）機能はどこからどこを基準に拡大・縮小しているのか？
基準と思われる部分を赤くしてみました。

上記画像はデフォルト表示（拡大率100％）です。

縮小していくと左に寄っていきます・・・（拡大率60％）

拡大表示（拡大率110％）です。ブログ全体が表示エリア内に収まっているにもかかわらず横スクロールバーが出現します。ちなみにこの状態でお気に入りを消してブラウザの表示エリアを広げてもスクロールバーは消えません。

これを見る限りIE7のズーム機能はブラウザ表示エリア全体の幅を基準に拡大縮小されているようです・・・なんだか一枚の画像を拡大縮小しているような感じですね。これはバグなのでしょうか？それとも仕様なのでしょうか？

XPをインストールして新たにわかったことがある。

WinXPにインストールした場合

• 日本語表示不能
• ブラウザのメニューは正常に表示される
• 動作は安定してるっぽい

Win2000にインストールした場合

• 日本語表示可能
• ブラウザのメニューが文字化けする
• 動作は全体的に不安定

どうやら未対応であるWin2000にインストールするとディフォルト状態で日本語表示が可能なようです。クスクス （＾m＾）

それにしても最近Win2000に対応しないアプリケーションをよく見るようになって来た・・・そろそろWin2000も終わりなのか。

関連リンク

• Safari for WINの日本語表示、「Windows機がないため確認できない」 byアップル
• Google検索＠Safari win 日本語

昔からフォントサイズの絶対指定は賛否両論ありますが、その諸悪の根源？でもある各ブラウザのフォント拡大・縮小機能。最近のブラウザではどのように扱われているのか表にしてみました。

ブラウザ	フォント絶対指定した場合	ショートカットキー
IE7	変更可能（ズーム仕様）	Ctrl+マウスホイール Ctrl+プラス・マイナス
IE4～6	変更不能	Ctrl+マウスホイール
FireFox	変更可能	Ctrl+マウスホイール Ctrl+プラス・マイナス
Opera	変更可能（ズーム仕様）	Ctrl+マウスホイール Ctrl+プラス・マイナス
Win版Safariβ	変更可能	？

※IE7はフォントの大きさを変更する機能も以前と同様に備わっていますが残念ながら仕様は変わってません。
※Windows以外のブラウザはどうなのかわかりません。

とりあえず見ていただきたいのが憎いあん畜生（IE4～6）の変更不能です。IE4～6ではpx等でフォントサイズを固定してしまうとブラウザで簡単にフォントサイズが変更できなくなってしまいます。そんな理由で俺も基本的にはフォント固定しない派（一部してるじゃんって言うな）なのですが、ついにIE7で待望の絶対指定無視ズーム機能搭載ですよ。変なバグも付いてきますが・・・。

しかしIE7はXp以降のOSにしか対応していないのと以前のフォント拡大縮小機能がそのまま付いている為に、この先もまだまだフォント固定問題は消えそうにありませんね・・・まあ、あと10年もしたらどうでもよくなる時代がくるかもしれません。それまで生きていたいと思います。

■ 余談

IEのフォントサイズがCtrl+マウスホイールで変更できる事をつい最近知ったのは内緒です。

■ 関連リンク

• google＠フォントサイズを固定

IE7使用者が増えてきたということで表示確認のためにIE7をダウンロードしようと思ったんだけど、Win2000にはインストールできないことが判明。おいおいマジですか・・・と言う事で久しぶりにWindowsXPをインストールしてみました。インストールからUpdateをすべて終えるまでに3時間ぐらいかかった。うちの糞PCだとXPはWin2000より少し重い感じがするな・・・。

さて、肝心のIE7での当テンプレートの表示ですが基本的な表示は問題ありませんでした。しかしIE7の新機能である拡大・縮小表示に新たなバグ？が・・・「兄ちゃん。どうしてMicrosoftはブラウザの表示に関するバグを改善しようとしないん？」ってことで当テンプレートのバージョンアップです。先日バージョンアップしたばかりなのに何度も申し訳ありません。

詳細

• bodyに指定された背景画像が拡大縮小されないバグ？に対応
• 拡大表示した場合にcontainer（ブログ全体）にposition:relativeが指定してあるとブログ最下層に意味不明な空間ができるバグ？に対応。
• 行間の調節
• その他もろもろ
• 新たなバグなどあれば報告お願いします

基本的な表示はとりあえず問題ないので気が向いたときにでもバージョンアップしてください。尚、今回のバージョンアップで壁紙などのbody背景に関するカスタマイズ方法が変わります。

今後ともひよこ君増殖中テンプレートをよろしくお願いします。

javascriptで動作する高機能な色選択ツールのようなものを見つけたので試行錯誤して当テンプレート用のカラー変更支援ツールを作ってみた。JavaScriptの知識が無に等しいのでちょっと不細工な作りになってますが我慢してください。

• ヒヨコ君増殖中テンプレート用カラー変更支援ツール（beta版）

テンプレート管理画面でも、こんな感じにテンプレートの色変更できるようになんねｰかな。さすがにちょっと無理か・・・・。ちなみに次に配布するテンプレートは上記のようなデザインになると思います。

■ 余談

忍者ブログには簡易？テンプレートEditorなるものが付いててテンプレートをダウンロードしたユーザーが背景色やTOP画像をそこから設定できるようになってるんだけど、あの機能（ちょっとゴツイけど）はカスタマイズ用テンプレートを作ってる俺からすると心惹かれるものがある。機会があれば忍者でもうちのテンプレートを公開してみたいなんて思ってます。