CSSでブログデザイン drop-screenテンプレート

drop-screenテンプレート

2006
12/06
18:51

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

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

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

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

※背景画像の追加方法

1,ブログ設定で「標準サイズ画像の設定」を横幅150にしておく。

2,ブログ機能の「- 写真 / ムービー」で背景画像をUPする。このとき「標準サイズ画像を作る」にチェックを入れておけばサムネイルを作ってくれます。

3,HTMLの下の方「」を探す。
この中の<td>～</td>で囲まれている部分が背景画像の部分です。

4,<td><img onclick="chImg(this)" class="#000000 url(http://14.dtiblog.com/s/season/file/iceglass.jpg) no-repeat center center fixed" src="http://14.dtiblog.com/s/season/file/iceglasss.jpg" alt="" /></td>
青の部分がサムネイルのURL
赤の部分が実際の背景画像
緑の部分が背景画像の並べ方です。

no-repeatは背景画像を繰り返さない大きな写真はこれがいいです。
repeatにすると背景画像を並べて埋めていきます。小さい背景素材などはこちらで。

center centerは左右中央上下中央に配置します。大きな写真はこれがいいです。
小さい背景素材をrepeatで埋めていくときは left top にしてください。

fixedは背景をスクロールさせない設定です。スクロールさせるとこのテンプレは面白くないので、ここはこのままがいいです。

注意：<td>～</td>は必ず<tr>～</tr>の中に4つ入れてください。（サムネイルが横に4枚並びます）
サムネイルの行を増やしたいときは、新たに
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
と書き加えて<td>～</td>内に追加の画像を入れてください。（<td></td>の中は何もなくても問題ありません）