April 2009 Archive

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。

body { font-size: 100%; }
* html body { font-size: 82%; } /* for win ie6 */
*:first-child+html { font-size: 82%; } /* for win ie 7 */
html>/**/body { font-size: 13px; } /* for modern browser */

ところがWIndows IE8がリリースされ、このブラウザも当然のごとくピクセル指定のフォントで文字サイズが変更出来ません。IE7からはページズーム機能が備わっているし、Firefoxも3からはデフォルトではレイアウトごとズームするのでもうフォントの固定をしても良いのでは？と思ったりもします。

JavaScriptが無効の環境ではフォントが固定されてしまいますが、jQueryを使ってブラウザ分岐をすると言うのも一つの手かもしれません。

Read more

10数年ぶりにテレビを買い替えました。前の家では32インチしか置くスペースがなかったけれども、今回の家では42インチまで置けるのでもちろん狙うは42インチ。値段と機能で東芝REGZA(レグザ)のZ7000の42Vをチョイス(5月にはZ8000が出るんですね...)。ひかりTVとフレッツ光の同時加入で3万引きと交渉でごにょごにょ円で購入。

Z7000はUSBやLANのハードディスクを接続出来ます。しかも今や1TBのハードディスクが1万を切る価格で買える事を知りBUFFALOの外付けHDD 1.0TB HD-CE1.0TU2を購入しました(以前ラシーのHDD買った時は2万オーバーだったのに...)。

番組検索で洋楽系の番組をリストアップ。Billboard Top 40、ベストヒットUSA、伊藤正則のロックシティなどを連ドラ予約。このところ新しい音楽の開拓が出来てなかったのでこれでまた新しい音楽が開拓出来る！！

Dreamweaverテンプレートを使用している時、編集可能領域を編集しているにも関わらず、こんなエラーが出た事無いですか？

編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても、次回のテンプレート適用時にファイルが更新されて、これらの変更は失われます。それまで変更を保持しますか?

しかもコードビューでの編集でこの現象が起こります。ググってみたらCSSの表記にinlineがあると生じると書いてあるサイトを発見。ところがdisplay:inlineを削除せずに、ナビのマークアップの方法を変えたらエラーが出なくなったので一応エントリー。

今回リストの改行で生じる空白を埋めるのに下記のようなコメントで改行を埋めるマークアップをしていました。

<ul id="nav"><!--
--><li><a href="content1.html">menu1</a></li><!--
--><li><a href="content2.html">menu2</a></li><!--
--><li><a href="content3.html">menu3</a></li><!--
--><li><a href="content4.html">menu4</a></li><!--
--></ul>

この記述を下記のように変えたらエラーが出なくなりました。

<ul id="nav"
><li><a href="content1.html">menu1</a></li
><li><a href="content2.html">menu2</a></li
><li><a href="content3.html">menu3</a></li
><li><a href="content4.html">menu4</a></li
></ul>

コメントもテンプレートに影響あるんですかね...困ったもんです。

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは！と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。

IE PNG FixのAlpha版もbackground-repeatに対応しているけれど、リピート用のJSの他にblank.gifや.htcファイルを読み込んだりする必要があるので少々面倒。

DD_belatedPNGの使い方は非常にシンプルで、headタグでJSファイルを読み込んで透過pngを使用したCSSセレクタを指定するだけでオーケーです。

<!--[if lte IE 6]>
<script type="text/javascript" src="<$mt:BlogURL$>theme/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.iepngfix, div#pngFix');
</script>
<![endif]-->

セレクタはカンマ区切りで複数指定出来ます。

今回のブログデザインを変更するにあたりこのJSファイルを使わせていただきました。このブログではjQueryを使ってるので、次のようなコードを書いて透過pngを使った画像にIE6以下のブラウザの場合.iepngfixが自動的に適用されるようにしています。

$(function()
{
	if ($.browser.msie && $.browser.version < 7.0)
	{
		$("img[@src$=png]").addClass("iepngfix");
	}
}