さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。

まず、1.CSSのみの方法から

１．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。

html {
  overflow: hidden;
}
body {
  height: 100%;
  overflow: auto;
}

　次に、固定表示したいDIVタグ(タグは何でも良いが)ですが、IE以外のモダンなブラウザであれば、例えば<div id="fixme">を固定したいなら

div#fixme {
 position: fixed;
}

とするところを、IEでは絶対座標にしてあげればいいです。

 position: absolute;

基本的にはこれで事足ります。具体的なデモを見てみましょう。

　　　→ie-fixed-position1.html

　なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに[if lt IE 7]のltは less than ですね。

<!--[if lt IE 7]> 
　このコメント部分はバージョン7未満のIEしか解釈しない
<![endif]-->

実際には外部ファイルとしてCSSを用意して、この条件コメント構文で読み込ませるのがメンテナンス的にも良いでしょう。

　では、次はダイナミックプロパティーを用いたやり方を紹介します。

２．Dynamic propertyはマイクロソフトの独自拡張なので、まぁ眉唾っぽいところもありますが、IE限定と割り切れば便利なものです。expression というやつを利用します。上のデモと同じことをするには、やはり条件コメント文の中で以下のようにします。

<!--[if lt IE 7]> 
<style type="text/css">
 #fixed {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+50));
  left: 100px;
 }
</style>
<![endif]-->

では、まずはこれだけ指定したデモを見てみましょう。

　　　→ie-fixed-position2.html

デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使してsetTimeoutで固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。

body {
  background: url(null) fixed;
}

このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。

　　　→ie-fixed-position3.html

今度はうまく「きっちりと」固定してくれていると思います。

　いかがでしょうか？ ２通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしてはアンダースコアハック^Gというものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。

---

まだ細部の詰めが出来ていませんが雰囲気はつかめると思います。ちょいとシックな感じなので"ppBlog le chic"。　ブラウザ画面をスクロールしても動かないトップのナビメニューは、もうひとつのテーマ「Basic」と同じようにモダンなブラウザ(FirefoxやOpera，Safari)ではCSS(スタイルシート)のポジションに関する指定

position: fixed;

を用いて固定していますが、最もメジャーなブラウザであるIE6はこの指定には対応していません。なので、IEだけには別にIE専用のスタイルシートを読み込ませることでこの固定座標を実現しています。このサイトの二つのテーマでは、2種類の異なる方法で固定してます。詳しくは後日書こうかと思います。　ついでながら、バギーなIE6ですが、画像のPNG形式がサポートしている透過アルファチャンネルにも対応していません。なので、このppBlogでもこれまで配布していたドロップシャドウ用の｢影｣画像は透過情報は省いてましたが、来年の夏ぐらいには出てくるであろうIE7では透過PNGをサポートするので、それをにらんで影の画像は透過PNGファイルにしてます。ただ、これだと相変わらずIE6では透過せずに何ともみじめな｢影｣になってしまうので、これもスタイルシート(+スクリプト)で、透過情報を保持するようにしています。これで記事の背景色が白以外でもきれいにドロップシャドウが実現されます。これも後日記事にしようかと思います。

---

ここにppBlogの更新状況や開発日記を書いていけば良いかな。さっそくv1.5系とこれまでの1.4系とで新しくなったところを紹介してみます。

• カテゴリー毎にに固有アイコンを付けれるようになった。まだ調整中ですが。個人的に欲しい機能だったので。アイコンがひとつ加わるだけでも何か見栄えが違います（気のせい？）。
• コメントの付いた記事では、Ajaxを使ってその場で動的にそのコメントを表示できるようになった。Ajax^G(えいじゃっくす？)とは詳しくはグーグルで検索していただくとして、簡単に言えば「JavaScriptを使って、ページを再読み込みすることなしに、サーバーとやり取りして部分的にページ内容を書き換える」こと、と言えば分かりやすいだろうか。こうすると何が嬉しいって、欲しいデータだけをサーバーから取ってこれるので、データの転送量が少なくて済み、サーバーへの負荷軽減になる。またユーザーから見れば、ページ全体を再度読み込む訳ではないので、操作にある種の連続性が得られるというか、シームレスなブロッグ体験が出来るというか、ややこしくなってきたが、ま、そういうことである。実際に試してみると分かります。コメントボタンを押すと、ちょっと間を置いて、コメントが表示されると思います。予め読み込んで非表示にしている訳ではないです。この「間(ま)」が、また良い感じ(個人的には)。とはいっても、いまどきのブロードバンドでは殆ど待たされることはないと思います。
• 3つ目としては、記事ボックスのスタイルが、かなり自由にカスタマイズ出来るようになったこと。「良いブロッグ」の条件として、個人的には「デザイン」を外すことは出来ない。ある程度、ブロッグ書きに慣れてくると、今度は差別化を図ろうとデザインに拘りたくなる。日付の位置はこっち側だとか、いや「posted by?」は上に持ってきたい、などなど。なので、記事ボックスを構成するそれらをパーツ化して、細かい調整はスタイルシートで指定するようにしました。肝心の「記事ボックス」の雛形は、各テーマディレクトリにあるtemplate.htmlの中で指定するようにしました。これだと、テーマごとに、がらりとデザインを変えることが出来ると思います。と言いつつ、まだひとつしか作ってないんだけど。。
• 見た目はそんなところでしょうか。内部的には結構変わっています。まず、セッション管理を独自のやつに変えました。session.class.phpというクラスを作成して、それでログインなどを管理しています。パフォーマンス的にも悪くないのではと。
• また、ブロッグの設置当初は、いろんなエラーが表示されまくりと言うのは、誰しも経験あると思いますが、このエラーハンドラーも独自のやつを用意しました。非常にシンプルなものですが。これのon/offは簡単に切り替えが効くようにする予定です。エラーが出る内は、有効にしておいて、収まってきたら無効にしておく、なんてことが可能です。開発者から見れば、細かいエラー表示は、デバッグの有用な情報となります。

---