ページトップの アメブロのCM

2008.2.18　アメブロの変更でＣＳＳ変わっていますこちらを見てください

CSS　ヘッドのアメブロ広告が変わりました

ページトップの アメブロのCMの幅をサイトの幅に合わせてみませんか？

うまくいけば、背景とうまく関係が築けるのでは？？

また例のごとく、青字をCSSにコピペ

#optionHeadUsr{
margin:0 auto;
width: 800px;/*スキンの横幅にあわせる*/
border-bottom:1px solid #ffffff;
}

記事タイトルバック

記事のタイトルバック
テープを意識しているんですが・・・
養生テープ、みたいな紙テープみたいな・・・・
見えますか・・・・・？

とりあえずはIEハックで

IEの方にはgif画像を、以外の方にはpng画像で表示するようにしていますが・・・

IEでご覧いただいている方

・・・・　薄くて見難いかもです　　ゴメンナサイ
　　　　　　IEだと　png の透過画像がつかえないもんですから・・・・

他のブラウザーでご覧いただいている方

・・・・　下手な画像で　ゴメンナサイ

　　　　　　うまく影がつけられないもんですから・・・・

CSSハック・・・・
ブラウザーによって解釈が違ったり、バグがあったりと、
それらを利用してどのブラウザーで見ても同じように見えるようにする手法です
今回は逆にブラウザーによって違う画像が見えるようにしてみました

/* 記事タイトルバック　*/
.entry h3.title{
margin:5px 0;
padding:25px 0 20px 25px;
color:#333333;
font-size:20px;
background-image:url(http://stat.ameba.jp/user_images/c4/81/10831799.gif );
background-repeat : no-repeat;
}
.entry>h3.title{/* IE以外の設定　*/
background-image:url(http://stat.ameba.jp/user_images/c4/64/108802607.png );
}
IE6の子供セレクタ未対応を利用しています

前日のフッターは
div#footerArea{
margin:0 auto;
border-top:1px solid #ffffff;
background-image:url(http://img0.photo1.ameba.jp/e/1318302.png );
background-repeat : no-repeat;
}
div#footerArea{/* IEの設定　*/
_height: 40px;
_background-image:url(http://img0.photo1.ameba.jp/e/1315475.jpg );
}
特殊記号を読み飛ばして解釈するIEのバグを利用したアンダースコア・ハックを使っています

mac,IE7　では、どう見えるのでしょうか？

フッター部分も作ってみました

フッター部分も作ってみました

だんだんと出来てきましたね

サイドも下地に画像を使ってメモを貼っているようにしてみたい

あっ、タイトル画像のロールオーバーもね

すぐに、飽きちゃうんで・・・・・

いろんなところを同時進行みたいにやっていて

こちらも訳わからなくなってきています

一応、CSSとか退避はとるんですが・・・・

適当に名前つけて

適当なフォルダーに退避するんで

どれが一番新しいCSSのデーターかわからなくなってしまいます・・・・

昔から整理整頓ができないって言われてきました

ついでに・・・・

IEとそれ以外ではフッター画像がちょっと違って見えます