CSSでブログデザイン

IE7の互換モードは、せっかく使えるようになった
「position: fixed」や「max(min)-width,max(min)-height」
も使えなくなってしまう「使えない互換」のようです。

詳しくは実験ページの
「IE7の互換モードは使えない互換」
を見てください。

ドロップスクリーンメニューをIE6に対応させるためにJavaScriptを書きました。
スクリーンの透過部分はスタイルシートのfilterを使用しています。（IE6のみ。他のブラウザは透過PNG使用。）
メニューの固定はIE6ではposition: fixed;が使えないので、疑似フレームを使っています。

なお、このメニュー単体でも配布できるようにしたかったのですが、他のテンプレに組み込むと表示が崩れてしまうものが多いので断念します。
一応公式テンプレートで問題なく対応する物がいくつかあるのですが、やはり使えないテンプレのほうが多いのでは問題ありなので・・・

でも今回はプロトタイプなので無理でしたが、もっとシンプルな物であれば元のテンプレのスタイルシートの影響を受けないで使えるものが作れるのではないかと思っています。

画面上部に常時固定されているドロップダウンメニューを作りました。
全てCSSを使ってますので、JavaScriptが切られていても動作します。
ただし対応ブラウザが、IE7、Firefox、Operaのみで、IE6には未対応です。

IE6に対応させるためのJavaScriptはまだ組み込んでないので、動作を見たい方はIE6以外のブラウザを使って見てください。（是非一度見てもらいたいと思うくらいの出来栄えですｗ）

このメニューは既存のブログにもアドオンできるように作ってますので、テンプレを変更することなく使うことが出来ます。（テンプレ変えないで使う意味があるかどうかは別ですが）

メニューの中にはプロフィールやカレンダーなども入れてますので、1カラムのブログに一番適してると思います。

まだまだ未完成ですが、近いうちに正式に発表したいと思ってますので、お楽しみに！

ポジションチェンジによる背景画像の入れ替え
さて何のことでしょう？

リンク部分にマウスカーソルを合わせたときに背景画像を入れ替える手法は、メニューなどでよく使われる方法ですが、入れ替える画像容量が大きいときにタイムラグが発生してしまいます。

特に1回目はサーバーから画像を読み込むため余計に時間がかかり、2回目以降もキャッシュから読み込む時間がほんの少しかかります。

そこで入れ替え前と入れ替え後の画像をひとつにまとめてしまい、画像の位置を変えることによって入れ替える方法がポジションチェンジです。


例1：2枚の画像を入れ替える方法
（わかりやすいように特大容量画像を使ってます）
OFFの画像（容量約500KB）
ONの画像（容量約500KB）




例2：1枚の画像をポジションチェンジする方法
background-position: 0px 500px;
で画像の位置を500px下にずらします。
（わかりやすいように特大容量画像を使ってます）
OFFONまとめた画像（容量約1000KB）



ブラウザやパソコンの性能によって若干違いはありますが、おおむねポジションチェンジのほうが画像の入れ替えが早く出来ます。

IE7が
・「透過PNG」
・「position: fixed;」
・「:hover」を指定できる要素の拡大
を採用したようです。

「透過PNG」は前回の書き込みを見てもらえばわかると思うので、
「position: fixed;」と「:hover」を指定できる要素の拡大を説明します。

「position: fixed;」とは、画面上の指定した位置に固定するスタイルです。
これを使うと画面をスクロールしても常に同じ位置に固定されるので、メニューなどを表示するのに大変便利です。
「:hover」はマウスカーソルが上に来たときのスタイルで、JavaScriptのonmouseoverと似たような物です。

IE6では「a:hover」（リンク部分にマウスカーソルが来たとき）しか使えませんでしたが、IE7からは様々な要素に使えるようになりました。
「div:hover」を使って、記事部分の色を変えたりサイドカラムの大きさを変えたりなど、いろいろなことがJavaScriptを使わずに出来そうです。


カスタマイブログの実験ページで、この新しい（と言ってもFirefoxやOperaでは以前から採用されてましたが）3つの機能を使ったメーニューを作りましたので、興味のある方は見てください。

対応ブラウザはIE7、Firefox、Operaです。
今までにはあまり見れなかった、ちょっと面白いメニューになりました。

IE6でしか見れない方は、続きのページでどのような感じのものか見てください。

続きを読む ≫

前回の書き込みで透過PNGの話を少ししましたが、透過PNGの実力はあれだけではありません。

今はIE6が90%近くのシェアを占めているので、窓から外の風景を眺めるような表現はGIFを使わないとできませんでした。
しかしIE7のシェアが上がってくれば、同じことをPNGを使って表現できるようになります。

どのくらい差があるかはこちらを見てください。
透過PNGの例２

春、夏、秋、冬、月（3カラム）、月（2カラム）のテンプレをVer.2に変更しました。（DTIさん早く承認してください！）
今後はこのバージョンのHTMLを基本にして、どこまで多様なデザインを作れるかを考えて行きたいと思っています。

空のテンプレに関しては、IE7で透過PNGが使えるという話しなので、それを試してから大幅に作り変えようかと思ってます。
透過PNGの例

IE7は position:fixed も使えるらしいので楽しみですね。
position:fixed とは画面上の位置を固定できるスタイルで、たとえばサイドメニューをposition:fixedで位置指定しておけば、画面をスクロールしても上のほうに隠れてしまうことなくなるので便利です。

まあ当分はIE6用の表示方法も考えて作らなければならないので、かえって面倒くさそうですが。。。

公開されている「秋のテンプレ」のHTMLとCSSを大幅に変更してUPしました。
順次他の申請中のテンプレも変更していく予定です。

変更点は以下の通り

続きを読む ≫