CSSでブログデザイン

ページに今まで見たことのないような背景画像を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>
にすれば回避できます。