InternetExplorer7での閲覧時にLiteboxを正常動作させるために、先日一度HTMLとスタイルシートの修正を行いました。
当ブログは3カラムレイアウトで、スタイルシートのpositionプロパティを使って左右のサイドバーとエントリー本文の表示位置を指定していたのですが、これが動作不具合の原因であることがわかりました。それまでは画面の描画をエントリー本文・左サイドバー・右サイドバーの順に行っていました。これをpositionを使わずにLiteboxを動作させるために、左サイドバー・エントリー・右サイドバーと左から順に描画するように変更しました。
しかしこの方法だとエントリーの表示に時間がかかることがありました。サイドバー内にJavaScriptで外部サーバへアクセスするブログツールがある場合、その読み込みが完了するまで次の描画処理が行われません。サーバからの反応が遅い場合は、その分エントリーの表示も待たなければいけないということになります。
これを解消するためにエントリー部分を最初に描画する方法がないかと調べてみました。すると、スタイルシートのfloatプロパティを使って各カラムの回り込みを制御することで可能なことがわかりました。ということで、今回floatを使ったレイアウトに変更しました。IE7で閲覧したところLiteboxは正常動作しているようです。
MovableType標準のテンプレートはゴチャゴチャしていて分かりにくかったので、小粋空間
で配布されているテンプレートをもとに、スタイルシートや各アーカイブページ等を作り直しました。
