CSSでブログデザイン

ご無沙汰しております。

ほぼ一年ぶりにテンプレートを作ってみました。すでにこのブログは新しいテンプレに変わっていますが、今細かなところを修正中なのでもう少ししたら申請できると思います。

今回のテンプレはかなり気合が入ってますよ！特にIE6では難しかった透過PNG画像を使いまくっています。

では登録されるまでもうしばらくお待ちください。

皆さん、新年明けましておめでとうございます。

年末からテンプレ作成もブログの更新も休んでいましたが、そろそろ復活することにしました。

話は全然変わりますが、アップルが『iPhone』（携帯電話とiPodの合体）を発表したの見ましたか？
http://www.apple.com/iphone/phone/
こちらで動画も見れるので（要QuickTime）興味のある人は見てみてください。
はっきり言って感動しました。

半透明素材の使い方にも慣れてきたので、iPhone風のテンプレなんか作ってみたい気がしているところです。

drop-screenテンプレートですが、いろいろ欠点が多いので申請を取り消しました。

現在もっとまともなテンプレを作成中〜

透過スクリーンメニューの1カラムテンプレを共有申請しました。

IE6では透過PNGが使えないので、かなり手抜きデザインになってます。
出来ればIE7・Firefox・Operaで見ていただければ幸いですが・・・

背景画像が自由に追加でき、サムネイルの中から選択できるようになっています。
記事部分にも横幅700pxまでの画像が入りますので、写真をたくさん見せたい方に向いているかもしれません。

1カラムなのでブログアクセサリーやバナーなどを入れる部分がほとんどありません。
ですので使い勝手はいまいちかも（笑）

続きを読む ≫

今日から12月。今年もあと1ヶ月で終わりですね。

さて、最近毎日このブログのカスタマイズをやっているので、
時々ページが正常に表示されないことがあります。
不具合があってもすぐに直りますのでご了承ください。

話は変わりますが、
自民党の復党問題は子供のいじめ問題と一緒ですね。
去年いじめられる側だった野田聖子議員といじめる側だった佐藤ゆかり議員、
今年はまったく立場が逆転か？

いじめる側もある日突然いじめられる側に・・・

子供は大人を見て育つものです。
大人の世界のいじめがなくなれば、
子供たちだっていじめなんかしなくなるのではないでしょうかね？

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でしか見れない方は、続きのページでどのような感じのものか見てください。

続きを読む ≫