CSSでブログデザイン

テンプレートのコメントで、YouTubeなどを貼り付けても反応しないという意見がありました。

ソースコードを以下のタグでくくってやれば解決します。
<div style="_position: relative;"><object 〜 </object></div>

ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌
こちらのページを見て通常とは逆方向にもスクロールできるかな？と思い作ってみました。

これからの季節に合ったテンプレ作成に使えるかも。


背景画像のスクロール方向やスピードを自由に変えるスクリプト
別窓で開く

Refugium peccatorum
JUGEMブログでテンプレートを公開されている方のブログです。

以前透過PNGで色々検索していたときに見つけたブログなのですが、今日見てみたらクリスマスバージョンのテンプレートになっていました。

あまりの美しさにため息が出ます。

クリスマスまでの限定で使用するテンプレートらしいのでお見逃しなく。

他にも多数のテンプレートを公開されていますが、どれも美しいものばかりですね。
私もいつかあのようなテンプレートが作りたいのですが・・・
でも私は絵描けないからな・・・

IE6で半透明PNGを使った角丸のリキッドボックスは作れるのか？

条件はJavaScriptを使わないこと。

問題はbackground-positionが設定できないため右端の画像を配置できない。

しかし意外な方法で解決することができました。


詳細はこちらから
IE6対応半透明PNG角丸リキッドボックス　別窓で開く

テンプレート「PNG」が公開されました。


使用上の注意

サイドカラムにバナーやブログアクセサリーを入れる場合は、
<div class="blog-parts">バナーなど</div>
としてください。

---

背景画像の表示はJavaScriptを使用しています。
背景画像を変更するとクッキーに記憶されるので、以後サイトを訪問したときは最後に選択した背景画像になります。

初めてブログを表示したときの背景を変更するときは、HTML内（上の方）の
// 最初に表示される背景画像
var firstimage = "http://14.dtiblog.com/s/season/file/back001.gif"
この画像URLを変更してください。

例えば最初の画像を懐中時計とパスポートの画像にしたい場合は、
サムネイルのURL
http://14.dtiblog.com/s/season/file/back011s.jpg
から画像名（この場合はback011s.jpg）のピリオドの前のsを抜いたものに変更します。
http://14.dtiblog.com/s/season/file/back011.jpg
↑これです。

---

フラッシュ素材がメインカラムの上下のタイトルやメニューボタンにかぶさると、フラッシュ素材のほうが上に被さってしまうことがあるので、記事内にフラッシュ素材（特にIframeを使ったもの）は使わないほうが無難です。
YouTubeなどのコードを書き込むタイプのものは、
<PARAM NAME=wmode VALUE=transparent>
にすれば回避できます。

IE6では使えない psition:fixed;（ボックスを画面上の任意の地点に固定する）を実現する方法です。

今までbodyをheight:100%にする方法はありましたが、レイアウトが複雑になってくると不具合がおきることが多かったので、使わずにいました。
ところがもっと簡単な方法があったんですね。ただしJavaScriptがONになってないと使いませんが。。。

position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0));

IE6以外のブラウザではアンダースコア( _ )の付いたスタイルは無視するので、普通にfixedが適用されます。

IE6ではスクロールのたびにtopの座標を画面の上部から0pxに指定するので、absoluteでもfixedと同じ効果が生まれます。
ただしこのままだとスクロールのたびに固定したボックスがガタガタしますので、以下のようにbodyの背景にfixdを指定してやると解決します。
body {
background: url(null) fixed; /* 画像はあっても無くても可 */
}

参考サイト
IEで固定座標を指定する方法

前回IE6で透過PNG画像を表示させる方法を書きましたが、今回はメニューの背景画像などをロールオーバーさせる方法です。

よくあるマウスONとマウスOUTの画像をひとつにまとめて作成し、背景画像のポジションチェンジによって画像が入れ替わったように見せるあれです。

IE6で透過PNG画像を使うときは背景画像のポジションが指定できないので無理かと思ってたのですが、画像が入った要素（ボックス）自体を動かしてやれば可能なことに気が付きました。

詳細はこちらから
IE6の透過PNGメニューロールオーバー

今回のテンプレ「png」にも使っているように、透過PNGに対応していないIE6できちんと透過させる方法です。

参考サイト
１、CSS TIPS 「アルファ画像を表示する」
２、[to-R] 「アルファ画像を扱うalphafilter.jsライブラリ」
３、ユンサンの／융상의／YungSang's 「透過PNG と IE と IE7」

１は直接Styleを指定して表示させる方法。
２と３は外部ファイルを利用してページ内のPNG画像を自動的に判別して透過処理を行なう方法です。

ブログのテンプレ作成時にはひとつひとつ指定したほうがやりやすかったので、１の方法を参考にしました。
この方法はJavaScriptがOFFになっていてもActiveXがOFF（セキュリティーレベル高）になっていなければ表示できます。

詳しい解説はこちら
IE6で背景画像に透過PNGを使用する

先日発表されたAppleのWin版Safariですが、Version 3.0.4 になって随分使いやすくなりました。ブラウザとしての性能はかなり高いので、これからシェアが上がってくるかもしれません。

CSSは今のところ大きな問題はありませんが、JavaScriptで幾つか気になる点があります。

ブラウザの表示範囲を計る時は
　　window.innerHeight　window.innerWidth　を使用。

背景画像のStyleを取得するときに何も指定されていない部分は「initial」と言う値を返してくる。
　　body { url('xxx.jpg') #000000 }　の場合
　　document.body.style.backgroundの値は
　　url('xxx.jpg) rgb(0,0,0) initial initial initial initial が返ってきます。
※Version 3.0.3までの話し。3.0.4では直ってました。

Safari判別スクリプトは
　　if (navigator.vendor == "Apple Computer, Inc.")


Windows版Safari（パブリックベータ）は
http://www.apple.com/jp/safari/download/
こちらからダウンロードできます。


2007/11/17追記
日本語化ファイルを作成している方がいらっしゃいました。
Using Windows: Safari 3.0.4 (523.12.9)を使ってみた。
こちらのページから入手できます。

ご無沙汰しております。

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

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

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