印刷用CSSもおわたー。
Operaではちょっとおかしいけどキニシナーイ！

さて、次からどうしよう。
いつも何かしら次の事考えながら作ってるんだけど、気分がイッパイイッパイだったから何も考えて無い。
それにだいぶやられてるから気力もダウン中

成行きでなんか作ってみましょっか・・。

このブログが始まって以来、はじめて全てのページを作ってみた。
だがしかしコピペ！

さて、これはここで終り、と思ったら印刷用のCSSが真っ白だった。
あーもう完全にド忘れ。気づいた以上やっとかないと気落ち悪い。
でも、もしかしたら、明日は精神的に真っ白になってるかもしれない・・

とりあえずこんな感じで表面上は完成。

右下の商品リスト

<div class="goodsTop">
<div class="goodsBottom">
<div class="goods">

<div class="goodsLeftTop">
<img src="image/goods01.gif" alt="goods1 Photo" />
<dl>goods01<br />
<dt>$00.00</dt>
<dd>＆raquo;<a href="#">details</a></dd>
</dl>
</div>

<div class="goodsRightTop">
<img src="image/goods02.gif" alt="goods2 Photo" />
<dl>goods02<br />
<dt>$00.00</dt>
<dd>＆raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="clearImage"><img src="image/clear.gif" alt="" /></div>

<div class="goodsLeftBottom">
<img src="image/goods03.gif" alt="goods3 Photo" />
<dl>goods03<br />
<dt>$00.00</dt>
<dd>＆raquo;<a href="#">details</a></dd>
</dl>
</div>

<div class="goodsRightBottom">
<img src="image/goods04.gif" alt="goods4 Photo" />
<dl>goods04<br />
<dt>$00.00</dt>
<dd>＆raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="clearImage"><img src="image/clear.gif" alt="" /></div>

</div>
</div>
</div>

#rightCol .goodsTop{
width: 382px;
background:url(../image/goods_top.gif) top left no-repeat;
margin-top: 15px;
padding-top: 15px;
}

#rightCol .goodsBottom{
background:url(../image/goods_bottom.gif) bottom left no-repeat;
padding-bottom: 15px;
}

#rightCol .goods{
background:url(../image/goods_center.gif) repeat-y;
}

#rightCol .goods .goodsLeftTop, #rightCol .goods .goodsLeftBottom, #rightCol .goods .goodsRightTop, #rightCol .goods .goodsRightBottom{
float: left;
width: 180px;
margin-bottom: 5px;
padding-left: 10px;
}

#rightCol .goods .goodsLeftTop, #rightCol .goods .goodsRightTop{
background: url(../image/goods_line.gif) bottom repeat-x;
padding-bottom: 20px;
}

#rightCol .goods dl{
text-align: center;
margin-top: 5px;
padding-bottom: 30px;
}

#rightCol .goods dd, #rightCol .goods dt{
float: left;
width: 87px;
border-top: 1px solid #ccc;
margin-top: 10px;
}

HTMLの中にある

<div class="clearImage"><img src="image/clear.gif" alt="" /></div>

は、floatをクリアするためのもの。
一昨日は空DIVを使ってたけどそれじゃ1行空白が出来ちゃうから、代わりに1*1の透過GIFを置いて、それに対してclearさせてみた。
ベストはCSSだけで完結させることなんだろうけどねー。

それにしてもDIVだらけ。
これをDIV病というのだろうかｗ
商品リストはテーブル使った方がいろいろと良い気がするんだよなぁ～。

もう帰ってキター！お早いお仕事ありがとう！

やっほー2画面ふっかーつ！
温度管理も万全！
直接ファンの風を当てて、今まで熱くて数秒しか触れなかったヒートシンクも生暖かい程度に！
温度は・・45度！

あれ、こんなもん？か・・。
高負荷与えれば60度とか行っちゃいそうな気がしないでもない。
しかもさっき何の前触れも無く落ちたし。
やっぱり電源関連も調べた方がいいかな・・。

うーん、またいつ落ちるのかと思うと気が気じゃない

ここから本題。
左カラムが完成。
やってる事自体は昨日のとほぼ同じだから割愛。

さて明日からは右カラム。
こいつわちょっと厄介な雰囲気ですぞ。
テーブルに逃げないように頑張ろう。

本題がおまけになってる

今日はWelcome部分。
角丸＆文字拡大＆中のテキスト量が多くなっても大丈夫なように、いつも通りdiv3枚重ね。

<div class="welcomeTop">
<div class="welcomeBottom">
<div class="welcome">

<p>しろーとのうぇぶでざ</p>

</div>
</div>
</div>

#leftCol .welcomeTop{
background:url(../image/welcome_top.gif) top left no-repeat;
padding-top: 20px;
}

#leftCol .welcomeBottom{
background:url(../image/welcome_bottom.gif) bottom left no-repeat;
padding-bottom: 20px;
}

#leftCol .welcome{
background:url(../image/welcome_center.gif) repeat-y;
}

そして・・このdiv#Welcome内はfloatで左右に分けてるんだけど、clearさせる箇所が見つからない！
ってことでHTML上に

<div style="clear:both">＆nbsp;</div>

という情けないやり方で回り込みの解除をしとります。

1*1の画像をCSSでclearさせたりとかいろいろやり方はあるんだろうけど、結局HTML上に何かを記述させなきゃいけないのならこれでもいいかなぁと。
なんか気持ち悪いけどねー。
って以前から多用しまくりで何を今更って話なんだけどｗ
contentを使ったやり方もあるらしいけど、うまくいったためし無し。なんか勘違いしてるんだろか・・？

昨日の続き
サポセンに電話したら案の定ビデオカードの故障（と思われる）と言われ、この度彼はゆうぱっくで東京へと旅立ちました。
保証書には1週間～10日って書いてあったから、元気な顔を見せてくれるまで今月いっぱいはかかると見た方が良いかな・・。

しかし1ヶ月経たずして壊れるとはなぁ。
まぁ原因はね、なーんとなくわかるというか・・懸念していた事が現実になってしまったと言うか・・まぁ、うん、熱暴走でドカン！
ファンコンあるんだからちゃんと管理しておけばよかった・・保証きくのか！？

今日はロゴとメニューだけ。
ここに来てやっと画像1枚で作るメニューの仕組みを理解ｗ
コピペだけじゃ覚えないね、やっぱり。ちゃんと分解して調べるべし！

素材集をむさぼってたら結婚関連の素材にピンときたから、次のデザインはウェディング関連のサイト作り。
全てオリジナルで作るのはちょっと厳しいもんがあったから、今回も参考はテンプレモンスターの11238より、よって今回は非配布だす。


見た感じでもうfloatだらけになりそうな作り。
そしてfloatといえばOperaの挙動がニガテ・・。
右下の商品リストはテーブルで行くのが無難かなぁ。
勉強という意味ではCSSオンリーでいくべき、というかいかなきゃダメなんだけど・・。

あっ、右上にカートつけるの忘れてた

テンプレ配布開始～。
入り口はかなり分かりにくいけど、
←のカテゴリから「無料配布テンプレート 」か、
→のdesign&layoutから「こちら」の2箇所。

その入り口に書かれている利用規約がまた長い事・・。
実力がこの程度のクセしてなにやってんだと自分でも呆れたけど、変にクレーム来ても困るしねぇ。
サポートなしだしｗ

著作権問題をクリアしているものだけ配布、ただ後は自己責任で、って感じかな。
そもそもこのブログのスタンスからして、テンプレを配布する事自体おかしなわけでｗ

完成～！
他のブラウザでも、印刷プレビューでも、特に問題が無いことを確認。
あとは配布用に修正したものを作らないと～。

うん、今度から配布目的で作っていくのもありかな。
ただ写真素材を使えなくなるのがなぁ・・シンプルすぎるのもつまんないし。
まず何よりも作る楽しさありきだからねｗ

ブログスカウターの数値は15！
低い低すぎる。しかも中途半端。
1桁ならすぐ消したのに！
ところでこの数値が大きければどうなるんだろう？ただの自己満？よく分からないでやった人←

エントリーページがほぼ完成。
見た目かなり手抜きなのは、きっと気のせい、じゃなく真実！

まだ細かいところを調整しなきゃだけど、その後はカテゴリページと検索ページの2つで終り。
月曜までにいけるかな？
なんかもうすっごい気力がすっごいない。すっごいやる気もない。あぁ・・。

あっ、「記事一覧」とか「記事分類」とかの画像が透過されてないし・・修正しなきゃ。